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..."
]
}