Today is National Science Day (in India)!

I figured we could celebrate by looking back at the past 25 years of scientific breakthroughs and accomplishments since the millennium turned in 2001. I asked Perplexity to find major scientific achievements and breakthroughs continent by continent around the world.

Then I asked Web Mapper GPT to create an interactive, graduated symbol map with clustered points of achievements that are color-coded by category to explore. I added an interactive legend so you can whittle the results by category, etc. Took four iterations — mostly because I kept coming up with new tweaks, etc. And here we are.

Explore twenty-first century scientific achievements by country and category. (Apologies to anyone who was accidentally left off the list. I blame Perplexity for that, even though it was probably bad prompting on my part. (You can see the Perplexity prompts by visiting the Sources tab at the bottom of the Legend.)

View Map Here

Original Web Map GPT prompt

I would like to crate a world map centered on India to celebrate India’s National Science Day. I realize it’s India’s National Science Day, but we’re going to make a world map celebrating international scientific breakthroughs of the 21st century so far.

I have uploaded a JSON/geojson file with country names, ISO_A3 abbreviations, and several different values. There is more than one value for many countries. What I would like you to design is the following type of web map:

—

# Map Symbology

Each country has a proportional symbol representing its count of features in the dataset. The symbols can be graduated using equal intervals from 1 to whatever the maximum number is. Three of four classes max.

The graduated symbol will act as a point cluster. When the user clicks on a particular country’s graduated symbol, the map zooms to that country’s extent and and a point is created for each feature within the country.

Each point will be a different color (use Color Brewer if possible) representing the type of “science” or category it belongs to. (There is a field in the geojson representing this. I can’t recall the name right now.)

When the user clicks on those points, an info window appears that provides the name of the scientific breakthrough, the year, the names of those affiliated with it, and a brief description. All of the sub-points from the cluster remain visible and clickable until the user clicks outside of any info window or on the map not over one of the subpoints, at which point the cluster returns.

The info window should have the breakthrough in the same color as the point symbol, tying the name to that innovation.

Dark or black background color with white or lighter text. Also, the type of scientific breakthrough (as identifiable in one of the fields) can be highlighted and classified by a color on the bottom.
—
# Map Navigation

On the map, there should be a “Zoom Out” button that shows the world at its full extent.

Allow zoom and drag. However, don’t allow people to zoom all the way in. Only to a subregional extent (e.g., Arabian Peninsula size fits in their map window) that allows them to click on smaller countries.

Do not let people zoom outside of global extent.

—

The base map should be dark gray with white outlines for the countries — similar to a polar bear map you created recently in color. Graduated symbols should be in the middle of the countries if possible, using the LABEL_X and LABEL_Y values for lat-long.

—
Title and Vibe

The title should read: Celebrating National Science Day (India)
Subtitle: “Learn about 21st century scientific breakthroughs from around the world.”

Please use a Google font that epitomizes scientific knowlege.

—

# Sources Modal

In the legend, please include a link that opens a “Sources” modal. The modal should include the following information in a styled manner:

“`
Data Provenance:
– [Perplexity Plus](https://www.perplexity.ai/search/please-try-to-identify-major-s-HNvrL2GWQK2upsmvQxka5g)
– [Mapshaper](https://www.mapshaper.org) used to join dataset to geometry layer.
Map Provenance:
– Web Mapper GPT: [JSON](min-provenance-schema.json)
– Base Map: Countries with lakes boundaries from [Natural Earth Data](https://naturalearthdata.com)
– Geometry Generalization: [Mapshaper](https://mapshaper.org)
– Prompt Cartographer: Ian Muehlenhaus

Apologies in advance for any omissions of important scientific breakthroughs. This map is not comprehensive. For example, I didn’t have enough tokens to do a thorough web analysis of all countries.
“`
PLEASE MAKE SURE that the sources modal is NOT open by default and easily closes by clicking anywhere outside of it.

—

# Map Component Interactivity and Behaviors

The legend should start open on desktop, closed on mobile. make sure that if you click outside of the legend, it minimizes. On mobile, it may have a different mechanism for opening and closing, whatever works best in that UX. Just make sure it works, please. 🙂

Legend title bar should read: “25 Years of Science”.

The legend should show the graduated symbol classes and data ranges for each (largest on top, smallest on bottom). When the user clicks on a circle size, all other circles should disappear and only those belonging to that range should be present on the map. When the user clicks on that range symbol in the legend again, it should show all symbols on the map again. Or if a user clicks on a different range symbol int he legend, it should stop showing the currently shown range and instead only show the map symbols belonging to that current range. (Users are still able to click on these filtered graduated symbols on the map and see the point symbols pop up and interact, etc.

The legend should also have a list of simplified / concise scientific category names in alphabetical order with a small point symbol to the left of the category text in the appropriate color. The text should be in the appropriate color too.

Above this list, in minimal text, add some concise text telling the user that they can filter the results by category and select multiple categories by holding the Ctrl/Cmnd Key.

When the user selects one or more categories, any graduated circles on the map (as filtered already or earlier in the legend by clicking on the legend symbols above this list) that contain points of these values should remain. All others should become invisible. This should update in real time as the user interacts with the legend, if possible.

If the user has filtered to one or more particular scientific categories, when the user clicks on a map graduated symbol, only the points matching those symbols inside the cluster should be visible. However, the graduated symbols as a whole do not need to resized based on how many points of a particular category area contained therein.

## Legend Composition
On desktop, the legend and filter can be a floating panel on the left-hand side of the map underneath the title. Make sure it doesn’t overlap the title or any other map elements other than the map. Make sure the legend is minimizable so info windows that may pop up underneath it on the map are still viewable.

In mobile make sure that the legend is minimizable with ease (normally clicking outside of it or by clicking close. Make sure that it DOES NOT start open in mobile formats, please.
—

Requirements:
– This map must work on mobile devices. The interface can change to better fit mobile (e.g., legend placements, info windows popping up from bottom panel instead of over the map, title font size smaller, etc. But make sure the info window closes when the user clicks away, etc.

Any questions, before we begin? Thank you! I’m really excited about this map! If it’s not possible to center the map on India, that’s okay, but it would be a nice shout-out for the country celebrating this wonderful day! 🙂

Provenance JSON (available in Sources as well but now automatically produced for every WebMapGPT map)

{
"schema_version": "1.0.0",
"created_at": "2026-02-27T20:08:46Z",
"map_fingerprint": {
"hash": "4ee07a3d7f5795c4f26be5e07955c8dd414445ddc54c617cc3eec8d515bfba48",
"algorithm": "sha256(files:index+css+js+data)"
},
"model": {
"llm_name": "GPT-5.2 Thinking"
},
"agent": {
"name": "Web Mapper GPT",
"url": "https://webmapgpt.com",
"version": "v4"
},
"prompts": [
"I would like to crate a world map centered on India to celebrate India's National Science Day... (full prompt in chat)",
"This is an AWESOME first pass! ... no symbols are showing up ... left align the title ...",
"This is rad! ... polishing touches ... title green, India highlighted, reverse symbol sizes, remove Antarctica, legend drag, zoom out in legend, clear filters ...",
"Perfect. Two minor things... legend buttons wrapping, zoom out placement, clear filters not clearing..."
]
}

Happy Fairy Tale Day!

I thought about mapping where Grimm’s Fairy Tales took place, but then decided that, even though that would be cool, I wanted to see what kind of fairy tale an LLM would come up with.

So this fairy tale is 100% invented by an LLM (Perplexity Plus). It wrote the tale, came up with the fake island coordinates, and exported an entire schema for me to feed to Web Mapper GPT. Then, Web Mapper GPT exported this, by-and-large, after I copy-pasted what Perplexity said. I did come up with the name Mette and ask for a fairy tale about a cartographer. But that’s it… and as one might suspect, the resulting story — with no human guidance or guardrails — is kind of boring. But alas… this is a daly thing. Maybe on Folk Hero Day I will have more time. 🙂

View Map Here

Complete Single Prompt to WebMapGPT

ROLE & CONTEXT
You are an expert web cartographer and front-end developer. Your task is to build a complete, self-contained interactive narrative web map called "The Inkward Isles: A Cartographer's Fairy Tale" using Leaflet.js 1.9.4 and vanilla JavaScript. No frameworks, no build tools, no proprietary APIs. The entire application must run from a single index.html file with embedded CSS and JS, plus two external data files: islands.geojson and chapters.json (provided below in full).

PROJECT CONCEPT
A young cartographer named Mette discovers that a map she drew by hand has come to life. The user navigates her fairy tale by clicking through six chapters, each corresponding to a fictional island in a remote archipelago. The map is the story. As the user advances chapters, the map flies to each island, the story panel updates with narrative prose, and a dashed route line draws itself progressively across the sea.

FILE STRUCTURE
text
/inkward-isles/
index.html ← entire app (HTML + CSS + JS)
islands.geojson ← island polygons + metadata
chapters.json ← chapter narrative data
DEPENDENCIES (CDN — no installs)
xml
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lora:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet"/>
MAP CONFIGURATION
javascript
const map = L.map('map', {
center: [-19.5, 159.5],
zoom: 4,
zoomControl: true,
scrollWheelZoom: true,
dragging: true,
tap: true
});

// Tile layer — CartoDB Positron No Labels (clean, minimal, no real geography labels)
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>',
subdomains: 'abcd',
maxZoom: 10
}).addTo(map);

// Override map background to pale sea blue
// Add to CSS: .leaflet-container { background: #c9dde8; }
LAYOUT (HTML STRUCTURE)
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>The Inkward Isles</title>
<!-- dependencies here -->
</head>
<body>
<div id="app">
<div id="map"></div>
<div id="story-panel">
<div id="panel-inner">
<div id="chapter-eyebrow"></div>
<div id="chapter-title"></div>
<div id="chapter-tagline"></div>
<div id="chapter-text"></div>
</div>
<div id="nav-buttons">
<button id="btn-prev">← Previous</button>
<div id="chapter-counter"></div>
<button id="btn-next">Next →</button>
</div>
</div>
</div>
</body>
</html>
CSS SPECIFICATION
Apply the following styles precisely:

css
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
font-family: 'Lora', serif;
background: #1a1008;
height: 100vh;
overflow: hidden;
}

#app {
display: flex;
flex-direction: row;
height: 100vh;
width: 100vw;
}

#map {
flex: 1;
height: 100%;
background: #c9dde8;
}

.leaflet-container {
background: #c9dde8;
}

#story-panel {
width: 380px;
min-width: 320px;
background: #f5e9c8;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0;
border-left: 4px solid #3a1f0d;
/* Torn parchment left edge effect */
clip-path: polygon(
6px 0%, 0% 2%, 8px 5%, 2px 8%, 6px 12%,
0% 16%, 4px 20%, 0% 24%, 6px 28%, 2px 32%,
4px 36%, 0% 40%, 6px 44%, 0% 48%, 4px 52%,
0% 56%, 6px 60%, 2px 64%, 4px 68%, 0% 72%,
6px 76%, 0% 80%, 4px 84%, 2px 88%, 6px 92%,
0% 96%, 4px 100%,
100% 100%, 100% 0%
);
position: relative;
overflow: hidden;
}

#panel-inner {
padding: 2rem 1.8rem 1rem 2rem;
overflow-y: auto;
flex: 1;
}

#chapter-eyebrow {
font-family: 'Cinzel', serif;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #8a6a3a;
margin-bottom: 0.5rem;
}

#chapter-title {
font-family: 'Cinzel', serif;
font-size: 1.3rem;
font-weight: 700;
color: #3a1f0d;
line-height: 1.3;
margin-bottom: 0.4rem;
}

#chapter-tagline {
font-family: 'Lora', serif;
font-style: italic;
font-size: 0.85rem;
color: #8a6a3a;
margin-bottom: 1.2rem;
border-bottom: 1px solid #c9a84c;
padding-bottom: 0.8rem;
}

#chapter-text {
font-family: 'Lora', serif;
font-size: 0.92rem;
color: #2c1a0e;
line-height: 1.75;
}

#chapter-text p {
margin-bottom: 0.9rem;
}

#chapter-text em {
color: #6b4c2a;
}

#chapter-text strong em {
color: #3a1f0d;
font-size: 1rem;
}

#nav-buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
border-top: 1px solid #c9a84c;
background: #ede0b0;
}

#nav-buttons button {
font-family: 'Cinzel', serif;
font-size: 0.78rem;
letter-spacing: 0.08em;
background: transparent;
border: 1.5px solid #3a1f0d;
color: #3a1f0d;
padding: 0.45rem 0.9rem;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}

#nav-buttons button:hover:not(:disabled) {
background: #3a1f0d;
color: #f5e9c8;
}

#nav-buttons button:disabled {
opacity: 0.3;
cursor: default;
}

#chapter-counter {
font-family: 'Lora', serif;
font-style: italic;
font-size: 0.8rem;
color: #8a6a3a;
}

/* ── MOBILE LAYOUT ── */
@media (max-width: 768px) {
#app {
flex-direction: column;
}
#map {
height: 50vh;
width: 100%;
}
#story-panel {
width: 100%;
height: 50vh;
border-left: none;
border-top: 4px solid #3a1f0d;
clip-path: none;
}
}
JAVASCRIPT — CORE APPLICATION LOGIC
javascript
// ── STATE ──
let currentChapter = 0;
let chapters = [];
let routeLayer = null;
let islandLayers = [];
let markerLayers = [];

// ── LOAD DATA ──
async function init() {
const [chaptersRes, islandsRes] = await Promise.all([
fetch('chapters.json'),
fetch('islands.geojson')
]);
chapters = await chaptersRes.json();
const islandsGeoJSON = await islandsRes.json();

renderIslands(islandsGeoJSON);
renderMarkers();
goToChapter(0);
}

// ── RENDER ISLAND POLYGONS ──
function renderIslands(geojson) {
L.geoJSON(geojson, {
filter: f => f.geometry.type === 'Polygon',
style: {
color: '#3a1f0d',
weight: 1.5,
fillColor: '#c9a84c',
fillOpacity: 0.35,
dashArray: '4 3'
}
}).addTo(map);
}

// ── RENDER CLICKABLE MARKERS ──
function renderMarkers() {
chapters.forEach((ch, i) => {
const icon = L.divIcon({
className: '',
html: `<div style="
width:12px; height:12px;
background:#c9a84c;
border:2px solid #3a1f0d;
border-radius:50%;
cursor:pointer;
"></div>`,
iconSize: [12, 12],
iconAnchor: [6, 6]
});

const marker = L.marker(ch.marker_latlng, { icon })
.addTo(map)
.on('click', () => goToChapter(i));

markerLayers.push(marker);
});
}

// ── CORE NAVIGATION ──
function goToChapter(index) {
const ch = chapters[index];
currentChapter = index;

// Fly the map
map.flyTo(ch.marker_latlng, ch.flyto_zoom, {
duration: 1.8,
easeLinearity: 0.4
});

// Update story panel
updateStoryPanel(ch, index);

// Draw route up to this chapter
drawRouteTo(index);

// Update button states
document.getElementById('btn-prev').disabled = index === 0;
document.getElementById('btn-next').disabled = index === chapters.length - 1;

// Update counter
document.getElementById('chapter-counter').textContent =
`${index + 1} of ${chapters.length}`;
}

// ── UPDATE STORY PANEL ──
function updateStoryPanel(ch, index) {
document.getElementById('chapter-eyebrow').textContent =
index === 0 ? 'The Inkward Isles' : `The Inkward Isles · Chapter ${index}`;
document.getElementById('chapter-title').textContent = ch.title;
document.getElementById('chapter-tagline').textContent = ch.tagline;

const textEl = document.getElementById('chapter-text');
textEl.style.opacity = 0;
setTimeout(() => {
textEl.innerHTML = ch.story_text;
textEl.style.transition = 'opacity 0.6s ease';
textEl.style.opacity = 1;
}, 300);

// Scroll panel back to top on chapter change
document.getElementById('panel-inner').scrollTop = 0;
}

// ── ANIMATED ROUTE POLYLINE ──
function drawRouteTo(chapterIndex) {
const coords = chapters
.slice(0, chapterIndex + 1)
.map(ch => ch.marker_latlng);

if (routeLayer) map.removeLayer(routeLayer);

if (coords.length < 2) return;

routeLayer = L.polyline(coords, {
color: '#3a1f0d',
weight: 2,
dashArray: '6 8',
opacity: 0.7,
lineJoin: 'round'
}).addTo(map);
}

// ── BUTTON LISTENERS ──
document.getElementById('btn-next').addEventListener('click', () => {
if (currentChapter < chapters.length - 1) goToChapter(currentChapter + 1);
});
document.getElementById('btn-prev').addEventListener('click', () => {
if (currentChapter > 0) goToChapter(currentChapter - 1);
});

// ── KEYBOARD NAVIGATION (bonus UX) ──
document.addEventListener('keydown', e => {
if (e.key === 'ArrowRight') document.getElementById('btn-next').click();
if (e.key === 'ArrowLeft') document.getElementById('btn-prev').click();
});

// ── START ──
init();
islands.geojson — PASTE THIS FILE VERBATIM
json
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"id": "isle_01",
"name": "The Isle of Unfinished Roads",
"chapter": 1
},
"geometry": {
"type": "Polygon",
"coordinates": [[
[157.65, -17.05], [157.85, -17.00], [158.00, -17.10],
[158.05, -17.25], [157.95, -17.40], [157.75, -17.42],
[157.60, -17.30], [157.58, -17.15], [157.65, -17.05]
]]
}
},
{
"type": "Feature",
"properties": {
"id": "isle_02",
"name": "The Fog Shore",
"chapter": 2
},
"geometry": {
"type": "Polygon",
"coordinates": [[
[160.20, -15.60], [160.45, -15.55], [160.62, -15.68],
[160.60, -15.88], [160.42, -15.98], [160.22, -15.90],
[160.15, -15.75], [160.20, -15.60]
]]
}
},
{
"type": "Feature",
"properties": {
"id": "isle_03",
"name": "The Mountain That Forgot Its Name",
"chapter": 3
},
"geometry": {
"type": "Polygon",
"coordinates": [[
[162.72, -17.88], [162.95, -17.82], [163.12, -17.98],
[163.10, -18.22], [162.90, -18.35], [162.70, -18.28],
[162.62, -18.10], [162.68, -17.95], [162.72, -17.88]
]]
}
},
{
"type": "Feature",
"properties": {
"id": "isle_04",
"name": "The Library of Drowned Maps",
"chapter": 4
},
"geometry": {
"type": "Polygon",
"coordinates": [[
[163.60, -21.10], [163.85, -21.05], [164.00, -21.18],
[164.02, -21.38], [163.88, -21.52], [163.65, -21.50],
[163.52, -21.35], [163.55, -21.18], [163.60, -21.10]
]]
}
},
{
"type": "Feature",
"properties": {
"id": "isle_06",
"name": "The Center",
"chapter": 6
},
"geometry": {
"type": "Polygon",
"coordinates": [[
[158.38, -20.88], [158.55, -20.85], [158.65, -20.95],
[158.62, -21.10], [158.48, -21.18], [158.35, -21.10],
[158.32, -20.97], [158.38, -20.88]
]]
}
}
]
}
chapters.json — PASTE THIS FILE VERBATIM
(Use the complete chapters.json assembled in the previous session — all seven entries, Prologue through Chapter VI, with full story_text HTML, marker_latlng, flyto_zoom, tagline, title, island_id, chapter, route_segment_index, and has_polygon fields.)

BEHAVIOR SPECIFICATION — PLEASE IMPLEMENT EXACTLY
On load: Map initializes at center: [-19.5, 159.5], zoom: 4. All island polygons render immediately. All chapter markers render as small gold dots. Prologue story panel displays. Previous button is disabled.

On Next/Previous click: map.flyTo() animates to the chapter's marker_latlng at flyto_zoom with duration: 1.8. Story panel text fades out then fades in (0.3s delay, 0.6s fade). Route polyline redraws to include all chapters up to and including current. Story panel scrolls to top.

On marker click: Same behavior as Next/Previous — jumps directly to that chapter.

Keyboard: Left/Right arrow keys trigger Previous/Next.

Chapter V (Ink Sea): Has no polygon — marker only. flyTo() zooms to level 5, showing open water. This is intentional and reinforces the "crossing" narrative.

Mobile: Below 768px viewport width, layout stacks vertically — map 50vh on top, story panel 50vh below. clip-path on story panel is removed on mobile. Navigation buttons remain fully accessible.

No external plugins beyond Leaflet 1.9.4 and Google Fonts.

All files are local — fetch calls use relative paths 'chapters.json' and 'islands.geojson'. Must be served from a local server (e.g., python -m http.server) or deployed — not opened as file:// directly.

DELIVERABLE
Produce three complete, copy-paste-ready files:

index.html — full application with all HTML, CSS, and JS inline

islands.geojson — verbatim from above

chapters.json — verbatim from the full assembled data

The application should require zero modification to run. Include a brief README.md noting the python -m http.server requirement.