FreePublished on GitHubEnglish overview

maps-geography

Create maps from real geographic data for presentations, documents, graphics, and websites. Use d3-geo for static maps suitable for export, or Leaflet with OpenStreetMap tiles for street maps that users can pan and zoom.

OriginalShow the original description

Accurate maps from real geo data — use for any map, or whenever geography would make a good graphic for a deliverable

asgeirtj/system_prompts_leaks

Run score Not tested

See how to install

Good for

Add a world map to a presentation
Create a regional map for a report
Build a street map that users can pan and zoom
Prepare maps for PNG or PDF export

Overview

What it does

Create maps showing national borders, coastlines, and streets using real geographic data. Static maps for slides and documents are rendered with d3-geo, with a projection suited to the whole world or a particular region. For street maps that people can pan and zoom on a website, the skill uses Leaflet and OpenStreetMap. It chooses the rendering approach according to whether the map is intended for export or interactive use.

When it helps

Use it to show where places are in relation to one another in a report, or to add a world map to a presentation. It also helps when you need a street map that visitors can move around in a website or prototype.

Example requests

“Create a world map for my slides.”
“Prepare a close-up map of this region for a PDF.”
“Add a street map that users can pan and zoom to this webpage.”

Notes

Map pages use plain HTML and require the specified external libraries, geographic data, or map tiles to load. Export maps use d3-geo rather than map tiles. Natural Earth data is in the public domain. OpenStreetMap requires attribution under its license.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Document check

AI checked the SKILL.md for operations that need care and for setup requirements. The score comes only from actually running the skill (hands-on test).

SafetyAre sending data, deleting files, and running commands disclosed?: AGoodIt fixes external sources and versions and specifies script hash verification and attribution.
Easy setupDoes it need few tools or API keys, and are they documented?: AGoodIt uses plain HTML and shows how to load the required libraries, data, and tiles.

Not counted in the score. Rated by AI (OpenAI Codex) as of Oct 23, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Files included (1)

SKILL.md2.8 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Maps & geography

Geographic maps are data problems, not drawings: never freehand country outlines, coastlines, or street layouts — hand-drawn geography is reliably wrong, and users notice. Load real geometry and render it.

Build every map page as plain HTML — a .html file with ordinary <script> tags, NEVER a .dc.html Design Component, even when every other design in the project is one: DC confines scripts to <helmet>, whose mount timing races the map container — the same call the data-viz and 3D skills make.

For decks, docs, graphics, and animations — anything static or exported — render TopoJSON geometry with d3-geo: fetch https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-110m.json (Natural Earth data, public domain; the URL is version-pinned — use it exactly), convert with topojson.feature(topology, topology.objects.countries), and draw with d3.geoPath() under a projection chosen for the job (d3.geoNaturalEarth1 for the whole world; d3.geoMercator().fitSize(...) to zoom a region). d3-geo ships inside the d3 bundle below. Load the libraries ONLY through these exact pinned, hash-verified tags, in <head>. These tags fail closed if tampered with; any other script you add would load unverified — so do not change versions, URLs, or hashes, and add nothing else from a CDN:

Inline SVG from d3 also exports cleanly to PNG and PDF, which live map tiles do not — so exported deliverables always get d3 geometry, never an embedded tile map.

For street-level interactive maps — prototypes, websites, anything the user pans and zooms — use Leaflet with OpenStreetMap tiles, loaded ONLY through these exact tags (the stylesheet is required: without leaflet.css the tiles render scrambled):

Create the map with L.map(...) and L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }). The attribution string is OpenStreetMap's license requirement — never omit it.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

More skills from this repository

3d-object

FreeSummary

Create a 3D object with three.js, inspect it from every angle in an interactive viewer, and download it as OBJ + MTL or GLB for use in other 3D applications.

Create a 3D object and inspect it from every angle
Export a model for further editing in Blender
Review an object's silhouette and materials