Map a Local Boundary and Export a PNG

Introduction

30 Second Summary

Your council area, your school zone, your electoral district. Someone drew those lines, published them as data, and then left you with no easy way to see them as a picture.

In this project, you will turn two real boundaries near you into one styled map and export it as a PNG. You will do the whole thing in a browser, with no account and no install.

What You'll Build

A map image of two overlapping places you know, each boundary in its own colour, ready to drop into a document or a post.

By the end of this project, you'll have:

• A downloaded PNG of your map, with crisp edges at the resolution you picked, that you can open and share right now.
• Two GeoJSON files you can reopen and restyle any time, so you never have to hunt down the same boundary twice.
• A saved link that reopens your exact map, colours and zoom included, because the whole map state lives in the URL.
• Secret Mission: Read the tool's colophon entry to see how it was built, then change one default in your own copy and reload to confirm the change took.

Are there any prerequisites?

You need a browser, a place you can name, and somewhere to host a raw file such as a GitHub gist. No mapping experience and no coding background required.

Before We Start

Before you open a single tab, let's lock in what you're about to build and why it matters. Naming the goal now makes every choice later a lot easier.

Get Your First Boundary as GeoJSON

Councils, school districts and electoral bodies all publish their boundaries as data. Almost none of them hand you that data as a picture you can drop into a document.

The raw material behind every one of those boundaries is a list of coordinates, and GeoJSON is the settled open format for writing that list down.

In this step, get ready to:

• Ask an AI chat tool for the boundary of an area you know.
• Save the reply as area-a.geojson on your Desktop.
• Read the coordinate list inside the file.

Ask your AI chat tool for a boundary

Pick somewhere you can picture from memory, so you can tell at a glance whether the shape lands in the right place. A council area, a school catchment or a city district all work.

• Pick one district, council area or school zone you know well.
• Note the area you picked here: the district, council area or school zone you chose.
• Switch back to your AI chat tool tab.
• Ask for the boundary by sending this prompt:

Give me the boundary of [[AREA_A="the district, council area or school zone you chose"]] as a GeoJSON FeatureCollection with a single Polygon feature.
Return only the raw GeoJSON, with no explanation around it.

Why ask an AI instead of a government portal?

Government bodies do publish their boundaries. Each one buries them behind a different search page, a different licence and a different download format.

One question to a chat tool collapses that hunt into a few seconds. You get coordinates now and spend your time on the map instead.

• Scan the top of the reply for "type": "FeatureCollection".

That line tells you the reply is a real GeoJSON document rather than prose describing one.

How exact is this boundary?

An AI-generated boundary is an approximation of the official one. Edges get smoothed and small notches disappear.

That is fine for a map you are drawing yourself. For anything official, download the boundary from the body that publishes it.

Save the reply as a file on your Desktop

• Copy the whole GeoJSON block from the reply, from the opening { to the closing }.

Next you need a plain text editor. A rich text editor quietly adds formatting that the map viewer cannot read.

macOS

• Press Cmd+Space to open your search bar.
• Type TextEdit and press Enter to open it.
• Click Format in the top menu bar.
• Click Make Plain Text.
• Press Cmd+V to paste your GeoJSON in.

The window fills with the coordinate text you copied.

• Press Cmd+S to save.
• Enter area-a.geojson as the file name.
• Choose Desktop as the location.
• Click Save.

macOS may ask whether to keep the .geojson ending or swap it for a plain text one. Choose to keep it.

Windows

• Press the Windows key to open your search bar.
• Type Notepad and press Enter to open it.
• Press Ctrl+V to paste your GeoJSON in.

The window fills with the coordinate text you copied.

• Press Ctrl+S to save.
• Choose your Desktop as the location.
• Set the file type dropdown so it saves all file types, not text documents only.
• Enter area-a.geojson as the file name.
• Click Save.

• Open your Desktop in Finder (macOS) or File Explorer (Windows).
• Confirm area-a.geojson is listed there.

Can't find area-a.geojson on your Desktop?

• Look for area-a.geojson.txt instead. Some editors append a text extension unless you tell them to save all file types.
• Rename the file so it ends in .geojson and nothing else.
• Why did my editor add a .txt extension to my GeoJSON file?

Read the coordinate list inside your file

The file is still open in front of you. Everything the map viewer needs is sitting in there, and it pays to see the shape of it before you hand it over.

Before you scroll, how many coordinate pairs do you think one boundary needs to trace its outline? Ten? A few hundred?

• Scroll through the file from top to bottom in your text editor.

You'll see a long run of number pairs, often hundreds of them. Each pair marks one corner of the outline.

Stripped down to four corners, your file follows this shape:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [-0.1425, 51.5012],
            [-0.1398, 51.5074],
            [-0.1301, 51.5046],
            [-0.1425, 51.5012]
          ]
        ]
      }
    }
  ]
}

What is each part of this file doing?

• FeatureCollection is the wrapper. It can hold many shapes, and yours holds one.
• Feature is that single boundary, carrying a geometry and a properties bag.
• Polygon says the geometry is a closed outline rather than a point or a line.
• coordinates is the outline itself, written as [longitude, latitude] pairs.

• Compare the very first coordinate pair with the very last one.

They match. That repeat is how the outline closes back on itself into a shape instead of trailing off as an open line.

Longitude comes before latitude

Maps apps usually quote a location the other way round, latitude first. GeoJSON puts longitude first.

Swapping the two is the single most common reason a boundary draws itself in the middle of the ocean.

Your boundary is now a file you own, sitting on your Desktop. Next up, you'll give it a public URL and watch the shape appear over a real map.

Load the Boundary in the Map Viewer

You've got area-a.geojson saved on your machine, and you've seen the coordinate list sitting inside it.

The map viewer draws a shape by fetching it from a web address. A file on your Desktop has no address, so your GeoJSON has nowhere to be fetched from yet.

A GitHub gist hands your file a public URL in about a minute. That URL is what turns a list of coordinates into a shape on a map.

In this step, get ready to:

• Publish area-a.geojson as a public gist with its own URL.
• Copy the raw content URL that serves your file as plain text.
• Load that URL into the map viewer and see your boundary drawn.

Publish your boundary as a public gist

A gist is the shortest path from a file on your machine to a file on the internet. You need no repository, no build, and no hosting account beyond the one you already have.

• Switch back to the browser tab where you're signed into GitHub.
• Go to https://gist.github.com in that tab.
• Click the + icon in the top right to start a new gist.
• Type area-a.geojson into the Filename including extension field.

Why host the file instead of pasting it?

The viewer accepts pasted GeoJSON directly. Pasted text lives only in the tab you pasted it into, so reopening the page means pasting all over again.

A gist is a single-file Git repository with its own public URL. Point the viewer at that URL and your boundary is fetched fresh every time the map loads.

The viewer stores every URL you load inside its own page address. That makes your finished map a link you can reopen or send to someone.

• Switch back to area-a.geojson in your text editor.
• Press Cmd+A (macOS) or Ctrl+A (Windows) to select the whole file.
• Press Cmd+C (macOS) or Ctrl+C (Windows) to copy it.
• Switch back to the new gist tab in your browser.
• Paste the contents into the large file contents box below the filename field.
• Click Create public gist.

Your gist page loads, showing area-a.geojson with the coordinate list you inspected earlier.

Gist saved but the file looks empty?

Check the filename ends in .geojson. Without an extension GitHub still saves the file, and the viewer has no format to work with.

Check your copy captured the whole file, from the opening brace to the closing one. A partial copy saves without complaint.

My gist saved but the contents look wrong

Copy the raw content URL

The gist page you're looking at is a web page wrapped around your data, with navigation, buttons and syntax highlighting.

The map viewer wants the JSON on its own. GitHub serves that at a separate raw address.

• Click Raw in the header bar above your file's contents.

A plain page opens showing your coordinates as unstyled text, with no GitHub navigation around it. The address bar now holds a different URL to the one you came from.

• Copy the full URL out of your browser's address bar.
• Paste your raw URL here so you can find it again later: your raw gist URL

Still seeing the GitHub page frame?

If the page still has a header, a sidebar and coloured syntax, you copied the gist page URL. Go back and click the Raw button first.

How do I tell a raw file URL from a normal GitHub page URL

Load your boundary into the map viewer

The viewer runs entirely in your browser and fetches the file itself. Your boundary never gets uploaded to anyone's server.

• Switch back to the GeoJSON Map Viewer tab you have open.
• Paste your raw URL into the URL field inside the Shape 1 card.
• Click Load next to the URL field.

The shape box fills with the text from your gist. Nothing is on the map yet, because the viewer waits for you to render.

Before you render, take a guess. Will the polygon land over the place you asked the chat tool for, or somewhere you don't expect?

• Click Render map.

Your boundary appears as a filled polygon over the map, drawn in the viewer's default blue at 50% opacity. The streets underneath show through the fill.

Nothing drawn, or the shape landed in the ocean?

If the shape box stayed empty, the URL points at the gist page rather than the raw file. The viewer receives a web page and finds no coordinates in it.

If a polygon drew but sits far from your town, the coordinates are in latitude then longitude order. The viewer reads longitude first, so a swapped pair lands somewhere else entirely.

My boundary rendered in the wrong part of the world

Your boundary is on the map, wearing the colour the viewer picked for you. Next up, you'll take that colour over and watch the polygon change under your hands.

Style the First Layer

Your boundary is on the map, loaded straight from the raw gist URL you copied. The viewer drew it in its own default blue at half strength.

That default washes out the streets and place names underneath it. It is also the same blue every new shape gets, so styling this layer now gives the second boundary somewhere to stand out against later.

In this step, get ready to:

• Change the fill colour of your loaded boundary layer.
• Lower the layer's opacity so the map underneath shows through.
• Confirm the new style survives a page reload.

Change the fill colour of your boundary

The colour swatch is a native browser control, so clicking it opens your operating system's colour picker on top of the page.

• In the panel to the left of the map, find the card titled Shape 1.
• Click the small colour swatch on the Fill colour row.
• Pick a strong green in the picker.
• Close the picker to get back to the map.

Your polygon turns green on the map as you pick. The hex readout beside the swatch changes from #028FC3 to the colour you chose.

Why the map updates without a re-render

Your GeoJSON is already parsed and drawn as a layer on the map.

Changing the swatch restyles that existing layer in place, so you never have to click Render map again. The shape changes under your cursor.

🙋‍♀️ Polygon still blue?

Check the colour picker window is not sitting over the map. On macOS it opens as a floating panel that can cover the whole right-hand side.

If no shape is drawn at all, the layer is not on the map yet. Click Render map and read the status line under the buttons.

Why doesn't my shape change colour?

Dial the opacity down

A boundary is only useful when you can still see the place it covers. At the default strength, the fill sits over the street names instead of framing them.

• Find the Opacity row directly below Fill colour in the same card.
• Drag the slider left until the readout beside it shows 30%.

The green thins as you drag. Roads, labels and the coastline underneath your boundary come back into view.

What opacity changes here

The slider controls the fill only. The outline around your polygon stays solid at full strength whatever you set.

That combination is what makes the shape readable over OpenStreetMap. A crisp edge marks the border, and a light wash claims the area inside it.

Reload the page and confirm the style stuck

Before you reload, what do you expect to happen to your green boundary? Think about whether the viewer has anywhere to keep your colour.

• Press Cmd+R (macOS) or Ctrl+R (Windows) to reload the page.

Your boundary comes back green at 30%. The status line under the buttons reads Rendered 1 shape. Click a feature to inspect its properties..

Where your colour was stored

Look at your address bar. Everything after the # is the viewer's saved state: the gist URL, your colour and your opacity.

Copy that link and the styled map travels with it. Anyone who opens it sees the same boundary in the same green.

🙋‍♀️ Came back blue or empty after the reload?

Check the address bar still carries the long fragment after the #. Reopening the plain tool address starts you from an empty shape instead.

If the shape is missing, the status line names the reason, usually a gist URL the browser could not fetch.

Why did my map lose its shape after reloading?

One boundary, styled and shareable. Next up, you'll fetch a second area that overlaps it and put both shapes on the same map.

Add a Second Boundary Layer

Area A is on the map, wearing the colour you picked for it. One boundary on its own only shows you where a single line sits.

The interesting question is how two boundaries relate to each other. Does your school zone sit neatly inside the council area, or does it spill across the edge?

Answering that needs a second shape on the same map, in its own colour. In this step you fetch Area B, publish it, and stack it on top of Area A.

In this step, get ready to:

• Get the GeoJSON boundary for a second, overlapping area from your AI chat tool.
• Publish area-b.geojson as a public GitHub gist and copy its raw URL.
• Load Area B as a second layer with a fill colour that is clearly different from Area A.

Ask for the boundary of an overlapping area

Area B only earns its place if it overlaps Area A. Pick something that shares ground with it, such as the council area your school zone sits inside.

• Switch back to your AI chat tool.
• Choose a second area that overlaps Area A.
• Ask for its boundary by pasting this prompt into the chat:

Give me the boundary of [[AREA_B_NAME="the name of your second area"]] as GeoJSON.
Return a single FeatureCollection containing one Feature.
Reply with the raw JSON only, and no explanation around it.

What you are asking for

A FeatureCollection is the GeoJSON wrapper that holds one or more shapes. Asking for one Feature inside it keeps the file down to a single boundary.

Asking for raw JSON only matters because the map viewer parses the whole file. One sentence of chat commentary at the top breaks that parse.

A chat tool draws these boundaries from what it has seen before. Treat the result as a close approximation rather than the official line.

• Copy the JSON block out of the chat reply.
• Save it next to area-a.geojson with the filename area-b.geojson.
• Open area-b.geojson and confirm the first key reads "type": "FeatureCollection".

Reply came back wrapped in prose?

Chat tools often add a sentence above and below the JSON. Delete everything above the opening { and everything below the closing } before you save the file.

Is my GeoJSON file valid?

Publish area-b.geojson as a public gist

The map viewer reads each boundary over the network, so area-b.geojson needs a public URL of its own.

• Return to gist.github.com in your browser.
• Create a new gist with the filename area-b.geojson.
• Paste the contents of area-b.geojson into the file body.
• Choose the public option so the file is readable without signing in.

Your new gist page appears with the contents of area-b.geojson listed on it.

• Open the raw view of area-b.geojson, the same way you did for Area A.
• Copy the raw URL and drop it here so you can reuse it: your Area B raw gist URL.

The raw view shows plain JSON text with no GitHub page wrapped around it.

Seeing a web page instead of plain text?

The gist page URL and the raw file URL are two different addresses. If your browser still shows the file inside a styled GitHub page, you copied the page URL, and the viewer will not be able to read it.

Which URL should I be using?

Load Area B as a second layer

Before you paste anything, make a call. Will Area B sit inside Area A, cross its edge, or contain it completely?

• Switch back to the map viewer tab, where Area A is still loaded.
• Add a second layer using the same control you used to load Area A.
• Paste your Area B raw URL, your Area B raw gist URL, into the new layer.

Area B draws on the same map as Area A. You can see straight away whether your prediction held.

• Open the style controls for the Area B layer.
• Set Area B's fill colour to something clearly different from Area A.
• Zoom out until both boundaries sit fully in view.

You should now see two boundaries in two colours on one map, with the edge of one crossing the other.

Only seeing one shape?

Check the Area B layer's URL first. A gist page URL loads nothing, so the layer stays empty and the map looks unchanged.

If the shape did draw but landed out at sea, the coordinates came back as latitude then longitude. GeoJSON orders every pair as longitude then latitude.

Why is my shape in the wrong place?

Two real boundaries, one map, two colours. Next up, you'll set the centre, zoom and output resolution, then export the whole thing as a PNG file you own.

Export the Map as a PNG

Both boundaries are on the map now, each in its own colour. That map lives in a browser tab though, and a browser tab is not something you can drop into a document.

The viewer can bake the current view into a PNG file you own. Before it does that, you need to tell it what to frame and how sharp to make it.

In this step, get ready to:

• Set the map's centre, zoom and output resolution in the export controls.
• Export the map and open the file to check both layers are visible.
• Save the map's state URL so you can reopen this exact map later.

Frame the map and set the export size

The viewer exports whatever the map is showing right now. The tool says so directly: the export is centred on the current map view at the current zoom.

• Drag the map until both boundaries sit inside the visible area.
• Zoom with your scroll wheel until there is a little space around the outer edges of both shapes.

Watch your browser's address bar while you drag. It rewrites itself every time you pan or zoom.

Why the address bar keeps changing

The viewer keeps its whole state in the part of the URL after the # character. That covers the gist URLs you loaded, each layer's fill colour and opacity, the map view, and the PNG export settings.

Nothing gets sent to a server. Your map is rebuilt from the link itself.

• Scroll down to the PNG export section below the map.
• Choose Match map from the Size preset dropdown.

The Size (px) boxes fill in with the width and height of the map on your screen.

• Select 2× (retina) under Resolution.

What does resolution change?

• OpenStreetMap has no retina tiles, so higher resolutions load tiles from deeper zoom levels for sharper detail.
• Labels stay the same pixel size, so they look smaller in the export.

Export the png and open the file

Export builds the image out of the view you just framed. Anything sitting outside that view gets cropped away.

Before you click, look at your map one more time. Do you think both boundaries will fit inside the image, or will an edge get cropped?

• Click Export PNG….

A PNG preview modal opens with the rendered image. Both polygons should be there in their own colours, with the OpenStreetMap attribution baked into the image.

• Click Download PNG to save the file.
• Dismiss the modal with Close.
• Open your Downloads folder in Finder (macOS) or File Explorer (Windows).
• Double-click the downloaded file to open it.

Zoom into the boundary edges in the image. The lines should be crisp rather than soft, and both fill colours should be visible where the two areas overlap.

Only one boundary in the image?

• The export is centred on the current map view at the current zoom, so a shape that was off-screen gets cropped. Zoom out until both fit, then export again.
• Later shapes are drawn on top, so a high Opacity on the second layer can hide the first one underneath. Drop it and re-export.

Why is one of my map layers missing from the exported image?

Save the map's state url

Close this tab and the map is gone. One copied link brings back the layers, the colours, the view and the export settings.

• Click into your browser's address bar to select the whole URL.
• Copy it with Cmd+C (macOS) or Ctrl+C (Windows).
• Paste it into a note you will find again, or save it as a bookmark.

Before you open that link in a fresh tab, what do you expect: a blank map waiting for you to load the gists again, or both boundaries already drawn?

• Open a new browser tab.
• Paste the saved link into the address bar and press Enter.

Both boundaries render on their own, in the same colours, at the same centre and zoom you framed for the export.

New tab loads an empty map?

• Check the link you saved still has everything after the # character. Some note apps trim long links.
• Both GeoJSON gists have to stay public, because the viewer fetches them fresh each time the link opens.

Why does my saved map link open with no shapes on it?

You now own a map image and a link that rebuilds it on demand. Next up, you'll look under the hood at how this tool was built and change one of its defaults yourself.

Customize the Viewer's Defaults

Your PNG is exported and your map state URL is saved. The map is finished, but the tool that drew it still belongs to someone else.

The GeoJSON map viewer is one file of code with nothing hidden inside it. The site that hosts it also publishes a colophon, a public record of how each tool was built.

In this step you read that record, take your own copy of the file, and change one of its defaults.

In this step, get ready to:

• Read the map viewer's colophon entry to see how the tool was built.
• Download your own copy of the viewer and run it from your machine.
• Change one default in the code and confirm the change took effect.

Read the colophon entry

A colophon is the note at the back of a book saying how it was made. This tool's site publishes one covering every tool it hosts.

• Open a new browser tab.
• Go to https://tools.simonwillison.net/colophon#geojson.html in that tab.
• Read the entry for geojson.html and note what it says about how the tool was built.

Landed at the top of the page?

The colophon covers every tool on the site, so it is a long page and the jump link can be missed.

Press Cmd+F (macOS) or Ctrl+F (Windows) and search for geojson.html to jump to the right entry.

Why can't I find the entry on this page?

Download your own copy of the viewer

The viewer is a single file with no build step and no server behind it. Downloading that file gives you a copy you can run and change.

• Open https://github.com/simonw/tools/blob/main/geojson.html in a new browser tab.
• In the toolbar above the code, click the download icon (a downward arrow) to save geojson.html to your Downloads folder.
• Open your Downloads folder.
• Double-click geojson.html to open your copy in the browser.

What did you just download?

That one file is the whole tool. The layout, the styling controls, the map, and the PNG export all live inside it.

It runs straight off your hard drive because everything happens in your browser. The map tiles come from OpenStreetMap, and nothing else phones home.

• Click Load example in your local copy.
• Click Render map.

The status line reads Rendered 2 shapes. and two overlapping shapes appear over San Francisco.

Your copy opened as plain text?

Some machines hand HTML files to an editor instead of a browser. Right-click the file, choose Open With, then pick your browser.

If the page loads but the map area stays blank, check that you are online, because the map tiles are fetched over the network.

Why does my downloaded HTML file open as text?

Change one default and reload

Every shape the viewer draws gets a 3 pixel outline. That number is a default, sitting on one line of the file you just downloaded.

• Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
• Type VS Code and press Enter to open it.

✔️ VS Code opens

Your editor is ready. Open your downloaded file in it next.

ⓧ Nothing called VS Code appears

You do not have the editor installed yet. It is free and the install takes a couple of minutes.

• Open https://code.visualstudio.com/ in a new browser tab.
• Click the download button for your operating system.
• Open the downloaded installer and follow its prompts.
• Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
• Type VS Code and press Enter to open it.

• In VS Code, click File in the top menu bar.
• Click Open File.
• Select geojson.html in your Downloads folder.
• Click Open.

• Press Cmd+F (macOS) or Ctrl+F (Windows) to open Find.
• Search for weight: 3 to jump to this block:

function style(shape) {
  return {
    color: shape.colorInput.value,
    weight: 3,
    fillColor: shape.colorInput.value,
    fillOpacity: Number(shape.opacityInput.value) / 100,
  };
}

• Change weight: 3 to weight: 8, so the block now looks like this:

function style(shape) {
  return {
    color: shape.colorInput.value,
    weight: 8,
    fillColor: shape.colorInput.value,
    fillOpacity: Number(shape.opacityInput.value) / 100,
  };
}

• Save the file with Cmd+S (macOS) or Ctrl+S (Windows).

What does weight control?

This block hands the map a style for every shape you load. weight is the outline thickness in pixels.

The fill colour and opacity beside it read from the controls you used earlier. The outline had no control, so it took whatever the file said.

Before you reload, what do you expect the two example shapes to look like now?

• Switch back to the browser tab showing your local copy.
• Reload the page.
• Click Load example.
• Click Render map.

Both shapes now carry a thick 8 pixel outline instead of a hairline. Your copy of the tool draws maps to your default, not the original one.

Outlines still look thin?

Check that VS Code saved the file. An unsaved tab shows a dot instead of a close cross.

Check the address bar of the tab you reloaded. It must point at your downloaded file, not at the hosted version of the tool, which still has the original default.

Why is my edited HTML file showing the old version?

Secret mission

Merge Both Boundaries Into One File

Your map is drawn from two files, two gists and two layers. GeoJSON can hold as many shapes as you want in a single file. Merge Area A and Area B into one FeatureCollection, publish it as a third gist, and draw the whole map from a single layer.

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs entirely in your browser and on GitHub's free tier, so there are no ongoing costs.

Resources you used:

• The public GitHub gist holding area-a.geojson.
• The public GitHub gist holding area-b.geojson.
• Your two downloaded GeoJSON files, area-a.geojson and area-b.geojson.
• The exported map PNG.
• Your own copy of the GeoJSON map viewer, with one default changed.
• The saved map state URL holding both layers, their colours, the centre and the zoom.

Why your gists are the thing to think about

A public gist is readable by anyone with the link, and it is indexed by search engines. Boundary data for a school zone or council area is already public, so this is usually fine.

If your boundary describes something you would rather not publish, the Delete tab below removes both gists for good.

Keep everything running

No action needed. Choose this if you're still actively building, or if you want to keep redrawing the map from the same boundary data.

• Keep both gists public so the map viewer can keep fetching their raw URLs.
• Paste your saved map state URL somewhere you'll find it again, such as a browser bookmark.
• Keep your copy of the map viewer so your changed default stays in place.

Your gists are the backup

Even if you lose the local area-a.geojson and area-b.geojson files, the gists still hold the coordinates.

Pause - I'll come back to this later

Take your boundary data out of public view while keeping every file you made. Choose this if you want to come back to the map later.

GitHub cannot switch a public gist to secret after it is created, so pausing means recreating each one as a secret gist.

• Open your Area A gist on GitHub.
• Copy the full contents of area-a.geojson.
• Go to https://gist.github.com and paste the contents into a new gist named area-a.geojson.
• Click **Create secret gist**.
• Repeat for area-b.geojson.
• Delete each original public gist by opening it and clicking **Delete**.

Your saved map state URL stops working once the public raw URLs are gone. Load the new secret gists' raw URLs into the map viewer and save the fresh state URL.

Map viewer shows an empty map after switching gists?

The raw URL of a secret gist is different from the public one, so the old link no longer resolves. Copy the new raw URL from the **Raw** button on each secret gist.

A raw URL that serves a rendered page instead of plain JSON also produces an empty map. Check the link you pasted points at the raw file.

Still stuck? Why won't my GeoJSON gist load in the map viewer?

Delete - I don't want to use this again

Remove all project resources and start fresh. Choose this if you're done with the map and don't want the boundary data sitting in public.

• Open your Area A gist on GitHub.
• Click **Delete** in the top right of the gist.
• Click **OK** to confirm.
• Repeat both clicks for your Area B gist.

Both gist pages now return a 404. Your saved map state URL stops rendering the layers, because the raw URLs it points at are gone.

• Delete your downloaded GeoJSON files and the exported PNG by running these commands:

cd ~/Downloads
rm area-a.geojson area-b.geojson

On Windows, use del in place of rm in the same folder.

• Drag the exported map PNG to your Trash (macOS) or Recycle Bin (Windows).
• Delete your local copy of the map viewer file, along with the changed default inside it.
• Delete the bookmark holding your saved map state URL.
• Confirm the GeoJSON files are gone by running:

ls ~/Downloads

Neither area-a.geojson nor area-b.geojson appears in the output.

No such file or directory?

Your browser may have saved the files somewhere other than ~/Downloads. Check your browser's downloads list to see the folder each file landed in.

The files may also have been renamed on download if a file with the same name already existed.

Need a hand? How do I find where my browser saved a downloaded file?

Nice Work!

Nice Work!

Nice work. You've turned two public boundaries into one styled map image that you own, exported at the resolution you chose.

You've learned how to:

• Source a real boundary as GeoJSON and read the coordinate list that describes a place you know.
• Publish a file to a public GitHub gist and load its raw URL as a styled layer in the map viewer.
• Stack two overlapping areas in their own colours, then export the map as a PNG at the centre, zoom and resolution you set.
• Secret Mission: an optional challenge that pushes what you built here a step further.

Ready to quiz yourself?