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.

Happy Human Spirit Day!

Perhaps in 20 years we’ll be celebrating AI Spirit Day? Or the LLMs will be? Alas, until then, we have coffee.

Keep slamming coffee my friends. (Sorry, to any colleagues who don’t much like it. May tomorrow’s find will bring more joy.) It prevents dementia, cancer, and is loaded with prebiotics. Even better, recent research suggests 2-3 cups of coffee a day is good for your heart, including irregular heartbeats. Coffee prices are skyrocketing this year globally, but keep drinking, my friends. For humanity!

Original Prompt

Please come up with three different map themes, with readily accessible public data (doesn’t have to be spatial yet but needs to be able to joined to spatial data) regarding the theme “Smells Like Human Spirit.” I’m going to use one of these ideas to create an interactive web map for Human Spirit Day tomorrow. I will probably use Mapbox or Leaflet. 

Sadly, it didn’t go with my “Smells Like Human Spirit” theme.

I was originally going thinking of highlighting all the conflict and economic disparity in the world.

Alas, these damn LLMs are made by tech bros who seem to want to keep topics sugary sweet. And who am I to fight tech bros on a Monday evening? 🙂 So coffee we get!

Happy Recognize Singles Day!

Presumably this day is inclusive of those who were rejected on Valentine’s Day or just want to remain single. Regardless, it’s a day. And I thought I could celebrate it by mapping where in the US one can move to join other single people — presumably for singular solidarity or to increase one’s odds of not being single much longer? I don’t know; don’t overthink it, please. It’s just a map!

View Map Here

Original Prompt

Please come up with a map design idea, aesthetic, and motif for a tongue-in-cheek “Recognize Singles Day” map of the United States that will use the attached dataset of single-adult led households, etc., by state. The map should “Recognize Singles” and perhaps imply where to move if you’re single and want to meet other singles. As for style, I would love it if the map were in a conformal or equal area conic projection. Perhaps a MapBox globe bounded to the United States, Alaska, and Hawaii area — no panning outside of it? The title should be Masthead style. It needs to work on mobile. The interactivity should be minimal — if possible show total percent of singles by county, percent of all singles that are female, percent of all singles that are male, county name, etc. Once you’ve designed the two motifs, critique them — 300 words or less. Give a logical answer to which is best or if further ideation may be useful.

Happy Valentine’s Day!

Send a hopeful Valentine a poem in a variety of languages by clicking on your country of choice and entering their email. (Warning: carrier fees may apply…?)

View Map Here

Original Prompt

Hi. I want to create a map for Valentine’s Day that is pretty straightforward. When a user clicks on a country, I want it to open a “mailto:” link with the subject line of “Will you be my valentine?!” and a sweet poem in that country’s majority or official language. Please come up with the short but sweet poem here, in English, and we will use the same one (translated for all languages). The user will need to enter the email address. It will not fill it automatically. The map should be in the Bonne Projection (a heart-shaped map. Users should be able to zoom in far enough to click on whatever country they wish. The countries should be colored the same. The map should have Valentine like cherubs and arrows and hearts on it. Very Valentiney. Not too corny but also definitely not serious. It should work on mobile. When the user clicks on the country, a pop-up should appear that says: “Would you like to send a poem to your Valentine in {country name}?” “Yes” will open the default email app with the pre-populated text and info. This will require a countries dataset with the following fields: – geometry – Name – 3-Letter Country Abbreviation – Language If the user clicks yes, it should read the country’s language and populate that version of the poem in the email. The subject line should read: “Will you be my Valentine?” in that language as well. — Before we proceed: is this doable? Can you help me make this map? What more info or data do you require? I can provide country shapefiles (Natural Earth) if it helps. Thanks!

World Radio Day by the United Nations because… well… maybe because people were forgetting about the importance or radio for emergency communications, etc.? I’m not quite sure.

Personally, I love radio. Have ever since I saw Pump Up the Volume with Christian Slater (about a high school pirate radio station!) in the 1980s when I was an impressionable kid.

I decided to make a map that highlights some major moments in European and US radio broadcasting history. My goal was to try a narrative (okay, fine, story map) style. I used Dataset Doctor GPT to create the historic datasets (one for the technology development and one for the broadcast history. Then I asked Web Mapper GPT to come up with three styles or plans for the map. I chose the Cold War theme/vibe.

Here we are… Enjoy! And happy world radio day!

View the map (or click the image above)

Provenance File (The whole process is now stored and exported automatically in Web Mapper GPT with every map, including metadata for datasets, summary of every prompt, result, hash of final map, ethics overview, accessibility overview, etc. You can now reproduce it, by-and-large.)

Original Prompt

Happy Paul Bunyan Day!

Paul Bunyan is a Minnesota (and northwoods) legend. He carved the Grand Canyon with his glorious ax. And Babe the Blue Ox? Well…

Today’s map offers places named after Paul Bunyan that you can visit to celebrate this wonderful day! 😉View the Map Here.

Original prompt

Hi there. I’d like to make an interactive Paul Bunyan map to celebrate Paul Bunyan Day. I have created a Mapbox basemap in Cartogram and have the API token to use it. I would like to use that basemap. It’s a Lambert Conformal or Equal area projection. I forget, but it’s centered on the US.

I also have a geojson dataset of places named after Paul Bunyan or Babe the Blue Ox. I would like to make the map fun and somewhat folksy.

Please use a cool, folksy font that hovers over the map in the upper-left-hand part of the map.

Title Ideas: “Place to Celebrate Paul Bunyan Day!”

When a user clicks on one of these spots, please have a tool-tip pop up that gives the name of the place, the type of place (I forget which field this is but there is one), it’s city and state/province, and a little button that says: “Take me there.” When the user clicks this button, the default map application on a mobile device or computer should open (e.g., Apple Maps, Google Maps, etc.).

Do not have arrows connecting the tool-tip/info window to the point. Use rounded rectangles 4px max for all borders and windows, etc. Do not put any background rectangle behind the title. In the lower right have a hamburger menu button. When the user clicks it, please provide attribution for Mapbox (for tiles and design), Turbo-overpass.eu (for data), and Minnesota for being the Paul Bunyan state. Also, add a “Provenance Doc”, which will link to your provenance JSON when our conversation is done. You don’t have to produce that document until the final package is exported as a zip file.

Below is the cleaned dataset. If you can save it as a separate .geojson file in the export or just load it in the JS/HTML files directly, that would be awesome.

It’s World Cancer Day.

I decided to create a global map of the leading cause of death by cancer for males and females by country. The data was collected and cleaned using Dataset Doctor GPT. Map created with Web Mapper GPT.

View Map

Web Mapper GPT Prompt

I would like to make a map highlighting the leading cause of death by cancer in each country with data in the attached dataset. This will be for International Cancer Research Day. It should be a serious map, minimalist with a journalistic feel. Quite simple. On desktop, I would like a donut chart showing the number of deaths caused by each type of cancer world wide. Any that fall beneath 8% of total deaths should be included in an “Other Cancer” category. When the user clicks on a country (equal earth projection, please) I would like a pop-up to display showing country name and leading cause cancer cause of death, as well as any death numbers and a source in the popup if possible. Please us a dark background. Color each country by the type of cancer that leads in that country. Up to seven unique colors. The eighth color (if necessary, as I don’t know how many unique types of cancer are in the dataset) should be a gray that represents “Other Type of Cancer”. It will displayed if a user clicks on that country. Countries without data should not be filled in. If possible, since I don’t believe the CSV has geometry, can you link this dataset to a polygon boundaries dataset of countries (e.g., Natural Earth Data?) so it can be a category by color map? Thank you!

Dataset Doctor GPT Prompt

Please create a global dataset that provides the type of cancer leading to the most deaths in each country of the world (for which there is data). I’m not sure where this data might live: perhaps the WHO, UN, World Bank, or elsewhere. Please scour high or low. Any data within the past 20 years can be included. If the dataset does not yet have geometry, or is compiled from a bunch of different sources, I would like to link it to Natural Earth data, so please include or add a field that makes it easily joinable. Field examples that would be useful: – Country Name (English) – Most common cancer leading to death (broad categories, simplified… e.g., Lymphoma, not particular types of Lymphoma, etc.) – Count of deaths from this cancer (when available), null if not – Country population estimate (perhaps in Natural Earth data already) – Per Capita GDP (or similar economic indicator data just for context) – any other field data you find relevant – please include ISO country codes too. Thanks! – source – year or years for data Thanks!