Looking for a fun, interactive way to showcase your spatial data, highlight local landmarks, or engage your audience? Meet ArcGIGuess: a lightweight, browser-based guessing game built with ArcGIS Maps SDK for JavaScript (v5.1).

Players are presented with a landmark name and photo and then challenged to pin its location on a web map. Using client-side geometry operators, the app calculates proximity which determines award points, culminating in a live leaderboard powered by ArcGIS Survey123.

ArcGIGuess is open source, framework agnostic, and ready to deploy. It requires no build steps, external frameworks, or heavy build pipelines. You can drop it onto any static web server, configure a single file, and begin to play.

Looking for the full step-by-step guide?
You can clone the repository, explore the configuration options, and inspect the complete codebase on the ArcGIGuess GitHub Repository.

How ArcGIGuess Works

The following describe how the game works behind the scenes:

• No build steps or dependencies—Runs directly on standard static web servers using native browser capabilities.
• Hybrid cloud and on-premises support—Connects out of the box with both ArcGIS Online and ArcGIS Enterprise
• Configuration driven—Customize data sources, scoring tiers, game modes, and branding through a config.js file without changing core application logic
• Mobile first and responsive—Dynamically collapses panels, reflows action buttons, and repositions map controls for effortless play on mobile devices

The ArcGIS ecosystem in action

Rather than relying on complex server infrastructure or custom backend services, ArcGIGuess coordinates core ArcGIS tools into a client-side experience:

Prepare the hidden answer key (ArcGIS Online)

The backbone of the game is a hosted feature layer containing your landmark locations. Instead of point features, ArcGIGuess uses polygon footprints (such as stadium outlines, park borders, or airport boundaries). Polygons give players a fair target area to hit rather than requiring them to identify a single point coordinate.

Each feature stores landmark names—including localized fields for multilanguage games—and photo attachments uploaded from the web editor.

To keep the game challenging, make the following configurations:

1. Add the feature layer to a web map in Map Viewer.
2. Choose a clean, high-impact basemap, such as Enhanced Contrast.
3. Turn off reference labels so street names can’t be used as clues.
4. Turn off layer visibility. The JavaScript SDK can still query hidden layers for geometries and image attachments in the background while keeping the answers invisible on screen.

Modern components and on-demand modules (Maps SDK for JavaScript v5.1)

ArcGIGuess uses the component architecture introduced in version 5.1 of Maps SDK for JavaScript. The application UI is built around the <arcgis-map> web component, eliminating boilerplate initialization code. Modules like containsOperator and distanceOperator are loaded on demand from $arcgis.import(), replacing legacy AMD syntax with modern ES module patterns.

Client-side spatial scoring system

When a player clicks to guess a landmark’s location, ArcGIGuess evaluates the click geometry directly inside the user’s browser for instant feedback:

• Direct hits—containsOperator checks if the clicked point sits within the hidden polygon boundary, instantly awarding maximum points.
• Proximity calculation—If the guess falls outside the boundary, distanceOperator calculates the exact distance in meters between the point and the nearest edge of the polygon footprint.

Points are then deducted based on configurable distance bands (for example, deducting 1 point for every 500 meters off-target), down to a minimum score floor.

Serverless high scores (ArcGIS Survey123)

To record high scores without building a custom database or API, ArcGIGuess integrates with ArcGIS Survey123.

When a round ends, an iframe modal opens the survey with URL parameters that pass the player’s final score directly (?field:score=100). Additional parameters hide unnecessary elements like headers, footers, and score input fields (&hide=navbar,header,description,footer,field:score). Players type their name, click Submit, and the game queries a public feature server view to update the Top 10 Leaderboard instantly.

Adapt ArcGIGuess to your needs

Because all behavior is controlled by config.js, you can customize and adjust the app in minutes:

• Randomized quiz mode—Set shuffleLandmarks: true to pull random features every session for infinite replay value.
• Guided tour mode—Set shuffleLandmarks: false to present features in sequential order, which is ideal for campus orientation, historical walks, or curated spatial storytelling.
• Multilingual and RTL support—Built-in localization support handles right-to-left languages (like Arabic) and dynamically switches feature attribute fields on the fly.

Get started today

Whether you want to build a local geography quiz for your city, an interactive game for an event, or an onboarding experience for your organization, ArcGIGuess gives you a production-ready template.

1. Play the live app—Test your spatial knowledge with the Dubai Landmarks Demo.
2. Explore the code—Fork or clone the repository on GitHub and use it with your own web map.

What datasets or regions will you turn into a map guessing game? Share your ideas and use cases on the Esri Community.