Anticode Open builder

Interactive map maker: clickable regions and hotspots on a map of your own

Many people searching for an interactive map maker don't need street maps at all. They need a festival site plan, a campus, a shopping centre floor, a trail, or a map of regions that people click for details. Anticode can build that kind of custom interactive map as an app, drawn in code or from a map image you upload. What it can't do is load online map tiles, search addresses or show where the visitor is.

Updated · By the Anticode team

Two kinds of interactive map

Clickable regions
Shapes that light up on hover or tap and open details: council areas, sales territories, zones of a venue, parts of a building. Drawn as vector shapes, so they stay sharp at any zoom.
Hotspots on a picture
Pins placed on an image (an illustrated map, a site plan, a floor plan) that open a card with a name, a description and a link. Good for venues, trails, exhibitions and estates.

Pick one as the main pattern. Mixing both is possible but harder to read, especially on a phone.

Where the map itself comes from

The base map is the part people underestimate. Inside Anticode's sandbox nothing loads from the internet except a Google Fonts stylesheet, so map tiles from mapping services are out. That leaves three sources:

  1. Drawn in code. For simple layouts (a venue with six zones, a stylised town centre, a diagram of a route), the model can draw the map as SVG from your description. Give it the shapes, their rough positions and labels.
  2. An image you upload. Add your own site plan or illustrated map as a photo with the build. The app shows it as the background and places hotspots on it. Use an image you made or have permission to use; a screenshot of an online map usually isn't yours to publish.
  3. Region outlines you provide. For real geographic regions, accurate outlines need proper boundary data. Simplified shapes can be drawn, but don't rely on them for anything where exact borders matter.

What a good clickable map includes

  • A legend and categories. Food, toilets, stages, first aid; each with its own colour and symbol, and a filter to show one category at a time.
  • A list beside the map. Every hotspot also appears in a searchable list, which helps on small screens and for anyone using a screen reader or keyboard.
  • Detail cards. Name, a line or two, opening times if relevant, and a link out. On a phone the card slides up from the bottom rather than covering the map.
  • Zoom and pan for detailed plans, with a reset button. Pinch zoom needs testing on a real phone.
  • Directions as text. "Gate B is on the north side, past the car park" helps more than an arrow when people can't see where they are.

Describing your map

Attach the base image if you have one, and list the points: "A clickable map of our summer fair using the attached site plan. Hotspots for the main stage, food court, craft tent, toilets, first aid and the two entrances, each with a short description and times. Categories with a filter. A list of all hotspots under the map on phones. Our colours are dark green and cream."

Anticode writes it as one app. Check every hotspot's position against the real site, on a phone as well as a laptop, because a pin that's slightly off on a big screen can land on the wrong building on a small one.

Content you'll change often

If points change from event to event, ask for the hotspots to be a CMS collection you edit in the dashboard (name, category, description, position). The app then reads them, read-only, whenever it's opened. Positions as numbers are fiddly to edit by hand, so keep this for text that changes and leave the layout fixed.

Limits

  • No street maps, search or routing. No address lookup, no turn-by-turn directions, no satellite view. Link to an outside mapping service for directions to the venue.
  • No "you are here". The sandbox doesn't allow location access, so the map can't show the visitor's position.
  • No live information. Queue times, open or closed status and capacity can't update by themselves.
  • No embedding in another site. The map is a published page you link to or share.

For a map that's part of a data story, see the interactive infographic maker. For an event's own site, start from event website.

Questions people ask

Can I make a clickable map of the UK or US states?

Simplified outlines can be drawn and made clickable. For precise boundaries, provide the outlines or an accurate map image you're allowed to use, and check the result.

Can visitors add their own pins?

Only in their own browser. Pins one visitor adds aren't seen by anyone else, because apps can't share data between people.

Does the map work offline at the venue?

Published sites can be installed as an app with an offline fallback. Whether your map shows fully offline is worth testing on a phone before the event.