Map Builder

design your own interactive map
saved

Brand

The title, tagline and colours shown around your map.

Cards

Optional link cards shown under the map (leave empty for none).

Layers (tabs)

Each layer is a tab on your map. Regions shades countries; Points drops pins; Places is a grouped set of markers with a themes side-panel.

Data

Pick a layer and fill its rows. Use Pick on map to grab coordinates by clicking.

Preview

Live view of your current map. Needs the builder to be served over http (see Export & Publish).

Export

Download data.js and drop it into your map folder — that's the only file that changes.

How to use it

How your edits become data.js (live)

Nothing here is written to a file automatically — it works in two stages:

  1. While you edit — everything you type is saved live in this browser and the Preview tab re-renders instantly, so you can design the whole map without touching any files.
  2. When you're happy — your entire map (brand, layers, every row) lives in one file, data.js. Click Download data.js above, drop it into your map folder (replacing the old one), and reload the map — your changes are now live on the site. That one file is your content; the map reads it on load.

To keep editing later, use Import data.js to load that file straight back into the builder.

Run it locally

Put data.js next to index.html, then from that folder run:

python3 -m http.server 8777

Open http://localhost:8777. A server is needed because the map loads world.geojson.

Publish free on GitHub Pages
  1. Create a new GitHub repository and upload all the map files (this folder), including your new data.js.
  2. Open Settings → Pages, choose Deploy from a branch, pick main / root, save.
  3. Your map goes live at https://USERNAME.github.io/REPO/.
Embed it in your website

Once published, drop this into any page (adjust the URL):

<iframe src="https://USERNAME.github.io/REPO/"
        style="width:100%;height:640px;border:0"
        loading="lazy"></iframe>
Use your own domain (subdomain)

You don't need to buy anything — GitHub Pages is enough. To serve the map from a subdomain of a site you already own, e.g. maps.yoursite.com → your repo, use a CNAME record. (WordPress.com supports pointing a subdomain to an external site this way.)

1. In your DNS screen, add:

TypeCNAME
Name / hostmaps (just the subdomain label)
Points to / alias ofUSERNAME.github.io
TTL3600

⚠︎ Point only to USERNAME.github.io — not a full URL and not the repo path. DNS has no concept of https:// or /REPO/. GitHub maps the repository for you in the next step.

2. In GitHub, open Settings → Pages → Custom domain, enter maps.yoursite.com and save. GitHub verifies the DNS and provisions HTTPS automatically; once the certificate is ready, tick Enforce HTTPS.

Your project's Pages site (previously at USERNAME.github.io/REPO/) is now served at maps.yoursite.com — no need to encode /REPO/ anywhere in DNS.