Happy Buzzard Day! (74/365)

Happy Buzzard Day!

I love buzzards, so I was excited to see this day is actually a thing. And I love bins, so I thought… let’s see what happens when I prompt for binning.

I went to iNaturalist again and collected all buzzard sighting data from the US over the past two years or so.

My goal was to use a single prompt to produce a passable map and hopefully get a tree map chart legend, mutli-classification option, and about 100,000 pictures of buzzards ready to load right out of the gate.

The Kidney Map took 17 minutes for ChatGPT to output. Not bad, considering it would probably have taken a week or more otherwise for a non-programmer cartographer. I’m curious how long this one will take… I’m waiting right now while watching an episode of Wallander from the BBC. (I do love this prompt cartography! It’s like grading… I prep the instructions, the agents do all the work, and then I just grade it and post the result here. Reminds me of the good ol’ days of being a professor. Once these agents graduate to grad student level, then I’ll make them revise heavily and come back in the morning. πŸ™‚

And that’s a wrap. one take. Four classification schemes, bins, individual birds at a close enough zoom, projection, interactive tree map legends that update as the classification scheme is changed, and…

Yeah, I think it may be time to ditch all GUI- and CLI-based applied cartography curriculums and labwork — like they did darkrooms in the 1980s. AutoCarto is finally here – truly! πŸ™‚

Now, time for another episode of Wallander!

y

Bonus: zoom in far enough and you can click on individual buzzard sightings to see them up close! πŸ™‚

View Map Here

Prompt Used

# Intention
Create a map showing buzzard distribution across the United States for Buzzard Day.

The map should have two visualization components. When viewing the United States or regions from afar, there should be hexagonal bins representing the sighting counts per bin from the CSV dataset (which is attached).

The bins should resize to show more detail with every two zoom levels. Maximum of 7x zoom. At the most zoomed in (7x zoom) individual birds icons should be shown instead of bins.

## Audience
Basically people that love buzzards and birds. Probably an eclectic mix. Also, cartographers who are interested in prompt cartography.

# Map Extent
I would like Alaska and Hawaii to be in the lower left-hand area of the map. I would like a panel legend (that is minimizable) in the lower right-hand part of the map near Florida. I would like the title to be placed in the Gulf of Mexico, like an old fashioned National Geographic Map Title might be.

The user should not be able to pan off the canvas of the map of the Continental US. Inside the legend, I would like a little house icon to appear that, when clicked, takes the map user back out to the original fullt extent of the map.

The map should use a conformal or equal area projection. State borders should be shown on top of the bins, without fill and very lightly.

## Bins

Users must be able to select the bins through the state layer. The bins will have two types of interactivity.

### Hover
When the user hovers over a bin, a tool tip should appear with: 
Total Sightings: {total for that bin}
{Year_ordered_descending_1}: {total sightings for that year}
{Year_ordered_descending2}: {total sightings for that year}

### Click
When the user clicks on a bin, immediately zoom in all the way (within the zoom range defined above, to the bing and show the individual point locations of the bird. When the user clicks on a specific sighting, show the information for that sighting in an information window. When the user clicks anywhere on the map that is not a point, while zoomed in, zoom back to the previous zoom level with that hex bin centered.

## Info Windows
Info windows should be minimalist in design. They should have a place name at the top, in lighter gray text (find the appropriate field in the dataset). They should have a state abbreviation. It should provide the date of the sighting, the latitude and longitude of the sighting, the species type (when available), and also at the bottom of the info window an embedded image of the bird when a sighting URL (not sure of the name in the field but you'll see it) is available in the dataset. The image should be sized appropriately to fit inside the info window, and when the user clicks on the smaller sized image, it should blow up like a modal window over the map that easily disappears when you click outside of it. If no image is available for a given sighthing, simply omit any mention of an image and this functionality. (Not all data points have images.)

Style this info window well, to be clearly skimmed by the user.

## Bird point design

When the user is zoomed in as far as possible, and individual bird sightings are possible, please use either the attached SVG or PNG image of a vulture as the point symbol. (I'm providing both, as different APIs prefer different formats. PIck the one best for the API being used.) Please size it appropriately so it is not too dominant on the screen but still selectable.

## Bin design

Bins should be colored using an audobon-esque green scale. White should be zero sightings and the bins should be unclassed and increase to green from there. There should be no boundary between the bins until the user clicks on a bin or hovers over it, at which point it should be a light white-blue color that complements the greens in teh color ramp and is just barely discernible when hovering over white bins in the middle of other white bins.

# Legend & Map Elements

The legend will be comprised of an interactive tree map chart resting on top of a classification picker. The title of the legend should be: "Buzzard Analysis"

## Tree Map Chart

Underneath the title header in the legend panel, create a treemap chart that classifies the bins into six different groups. These six groups should be differentiated using the same color ramp as the map, but they will be classed. Ensure the white to green color schemes are easily differentiated. Feel free to add some saturation or play with the values to make this so.

The tree map will be a vertical rectangle that fits in the Legend panel and represents all the bins in the continguous US, Alaska, and Hawaii in one chart. The default classification scheme for the bins is Unclassed. When the map is unclassed, the Tree Map be an empty rectangle with the following text fashionably, left-aligned in it with padding: "Select a classification scheme below to create an interactive tree map."

### Tree Map Chart Interactivity

The tree map chart is multi-selectable (using click and CTRL/CMND keys, but not multi-select on a touch device). It is not selectable when the classification scheme is "Unclassed", however. Only when a classification scheme is actually selected.

When a classification scheme other than "Unclassed" is chosen, the user may mutliselect the Tree Map. When she does so, the bins on the map belonging to that (or those) class(es) will all be highlighted on the map using the same blue outline as when it a bin is clicked on the map individually.

The user may deselect these by clicking that part of the tree map again, clicking outside of the tree map but inside the legend, or clicking a "Deselect" small button at the bottom right of the tree map.

## Dropdown Classification Picker

Underneath the Tree Map, inside the legend will be a drop-down that allows the user to change the classification scheme. The first option underneath "Unclassed" in the drop down is "Natural Breaks" (created with 6 classes). Then "Equal Intervals" (6 classes again), and finally "Standard Deviation". Note: Standard deviation should use an appropriate amount of classes based on the range and your understanding of the dataset; it will also require a diverging color scheme. For this color scheme keep the same greens you were using, with white in the middle, and represent fewer than average sighthings with purples.

The classification dropdown menu should be minimalist and not too prominent. There for nerds but not overpowering the actual Tree Map which is the legend.

As the dropdown menus is changed, the map will update and the tree map chart itself, above the dropedown menu, will update.

# Title and Sources

The title should be left-aligned "Buzzard Sightings across the United States (Jan 2024 – March 2026)" on top of a header. Use a Google Display font that is modern but natural looking. Serif is fine as long as it isn't too gaudy -- modern looking. On the far right of the header bar, please place an information "i" icon. Clicking this will open a "Provenance" panel. In here will be links to the provenance file, and the following information in a structured, modern, fashionable presentation of some sort. (Make sure there is padding around the text inside of the model, please.)


## Modal Information

Prompt Cartographer: <a href="https://linkedin.com/in/ianmule/">Ian Muehlenhaus</a>
LLM Assistant: <a href="https://www.webmapgpt.com">Web Mapper GPT</a>
Attribution: {list any APIs and basemaps used to create the map}
Data Source: <a href="https://www.inaturalist.com"><iNaturalist/a>

Created for the #365DaysOfMaps campaign organized by the <a href="https://mapdesign.icaci.org/">Map Design Commission</a> of the ICA.

## Modal interactivity
The user may click hyperlinks inside the modal and these will open the link in a new tab "_buzzard". The modal MUST BE CLOSED when the map loads. If the user clicks anywhere outside of it, it should close.

---

Please let me know if you have any questions before you start this process. I'm happy to facilitate. Also, please check the names of the fields in the attached dataset. I was not using literal field names in my write-up, but I know certain fields are there, including Lat/Lng.

Thank you so much!

 

 

Happy Crowdfunding Day! (73/365)

Happy Crowdfunding Day!

In a superficial, self-centered world built on likes and hearts, I suppose it shouldn’t have surprised me that there would be an official “crowdfunding” day for narcissistic influencers, carpet-baggers, and yes, some people who actually are in desperate need. (I should look up if there are any studies on this… maybe after I finish Wallander!)

Alas, why donate your money to people you don’t know that may not deliver on promised goods or may not use your funds in the way they advertise on the site. I thought, wouldn’t it be useful for countries around the world to start a crowdfunding campaign?! After all, the world is about to enter a huge financial crisis (and I’m not talking about the oil crisis but the bigger one looming with private credit destabilizing the whole system as I write).

Which countries are most in need of your altruistic crowdfunding help? Let’s make a map, I thought! And so I did. Again, with a single prompt. I share a link to the entire Web Mapper GPT conversation here.Β 

In the book I cover an entire prompt cartography pipeline, schemas and techniques you can use to produce and design maps using natural language, and how to articulate aesthetic and style linguistically to make production-level maps – not these one-off daily, throwaway maps here. The book may already be on Amazon for pre-order; I haven’t checked, because I’m too obsessed watching Kenneth Branagh play a Swedish detective these days… but I digress.

Oh yes, so I decided to make a map so you can crowdfund your favorite nation-state – or better yet, pick one that is most in need based on how high the national debt is compared to the country’s GDP.

But this is stupid,” you say?! (I am not sure you do, I am just speculating. I do love how blogs give me creative license of sorts.) “I pay taxes already!

Well, by the looks of it, most of us aren’t paying nearly enough or, to put it mildly, our governments are spending far more than we can afford to pay. So contribute more, I say, but let’s spread it around and donate to another country or two.

Together we can achieve more and fight international insolvency! I’ll get around to starting a GoFundMe page for Japan and Hungary right after this episode of… Wallander!

Entire Conversation in Web Mapper GPT

1 prompt; 1 answer (13m33s); 1 map package.Β 

View Map Here

Happy World Kidney Day! (71/365)

Happy World Kidney (Awareness) Day. This day is meant to commemorate survivors of, and raise awareness about, kidney and renal disease.

I decided to try and make a more detailed visualization for this map. It works on desktop best — perhaps mobile not at all. The side bar histogram is too small, but the goal of this project is to make half-decent maps fast. So I left it for now. This was a one-prompt output with two excel files. I’m pretty happy with the results. Perhaps I’ll come back to it in the future.

Kidney Disease Map, USA

View the map here

LLM Tool Used: Web Mapper GPT

Here is the prompt that created this

# Purpose
I am creating a map for World Kidney Day. I would like it to be informative and more exploratory, health-oriented than many that I’ve made previously. I would like the legends to act as interactive filters by default. The dataset will be larger than normal, all US counties. I would like to use a generalized geometry of US counties to minimize load times, etc.

# Dataset
I have an Excel dataset in the US showing National Institute of Health (NIH) statistics by county for the following types of kidney treatment and disease (all combined into a single value per field, but just provided for context): Hemodialysis, Peritoneal Dialysis, Unknown Dialysis Type, Transplant Primary Cause of ESRD: Diabetes, Hypertension, Glomerulonephritis, Cystic Kidney, Other Urologic.

The dataset contains the following fields:
– State Name
– County Name
– FIPS Code
– Admission (Per PY)
– Hospitalized Days Rate (Per PY)
– Admission Count
– Hospitalization Days (Count)

Nulls = suppressed due to inadequate sample size


# Map type and layout

The map shape itself will not change once loaded on desktop. It should be an equal area projection of the contiguous United States, with Alaska and Hawaii in the lower left and Puerto Rico represented in the Gulf of Mexico.

There will be four different maps presented — **never** concurrently — within the same map area. Which map is shown at a particular time will be determined via user interactivity with a legend component (see next section). The first default map will be State Admission Rate (per Patient Year).

– State Dataset: Admission Rate (per Patient Year)
– State Dataset: Hospitalization Days (per Patient Year)
– County Dataset: Admissions (per Patient Year)
– County Dataset: Hospitalization Days (per Patient Year)

Each of the maps should be designed to show a diverging color scheme that is purple and green (Color Brewer based). Determine the mean value for each of the four numeric fields in the dataset. Then create a standard deviation classification scheme. The middle color should be white. States should have very light gray, thin outlines. Purple equals higher patients, hospitalizations, etc. Green should be below the average. White average. Have at least five classes. You will only map rates — Admission Rates per patient per year) and Hospitalized Day Rates (per patient per year), not the count fields.


# Interactive Legend and Exploration

There will be four different maps that can be shown. The user may change between maps by choosing which she prefers using a drop box within a panel taking up 90% of the vertical height of the window on the right side of the map. The panel should slide open and shut from the right edge of the window pane.

Create a horizontal leftward pointing arrow icon right aligned with the right-edge of the window that the user can easily click on or tap (make the select area larger than the arrow itself so it is not difficult to press) to slide the panel open. When open, the panel should be closable with a horizontal arrow facing rightward that they click on to slide the panel shut. The interactivity should be designed to allow the user to open and close the panel at will. However, the panel will **always** start open when the map is loaded on a desktop or laptop machine.

Near the top of the panel, which should be titled “Data Explorer Panel,” there should be a drop-down selector showing the four different options for different visualizations (discussed in the map section above). The default should already be showing in the drop down.

When the user selects a new visualization/map option in the drop down, the map should update to show the appropriate visualization. If it takes a while to load and visualize any of the visualizations, please put a spinner over the middle of the map a little message that says: loading the new data now. Thanks for your patience. If possible, cache previously loaded visualizations locally. (No worries if this isn’t possible.)

## Interactive Vertical Histogram

On desktop, inside the panel but beneath the map selection drop down, the right-hand side of the map should have an interactive vertical histogram (highest rates on top, lower on bottom) that allows users to group select subsets of counties in smaller ranges. Each county should be represented as a dot, stacked when applicable in ranges. The histogram bar should be on the left and the dots on the right of the bar. The histogram should have tick marks on the right-side of the vertical histogram line denoting value breakdowns (e.g., every 0.2 or so rate change a mark) and then the counties that fall within that range stacked (or lined up because it will be horizontal) as dots.

The county dot colors should match their color on the map. For white counties (counties near the average), the circles should have light gray outlines so they are visible).

Each horizontal area between tick marks on the vertical histogram will be multi-selectable. Users may Cmd/Ctrl click multiple select these ranges and these counties (or states if a state map is being shown) will light up on the map across the US. The other states will still be shown, but make 50% transparent. All states are shown again as soon as the selection changes or if the user clicks anywhere outside of the panel or off the map in the window. Near the top of the vertical histogram, please add a “Refresh” button.

The histogram will also act as a legend. Please highlight the range of each classification on the histogram vertical line itself by coloring the line appropriately where its values are. When the user hovers just a tad to the left of the vertical histogram, have a pop up show up with a background color matching that used to map its features and either white or black font highlighting the range of values.

The histogram must update for each map. When the user switches map views, the histogram must update to show that data in the histogram. Selections must work on the appropriate matching map as well, of course.

## Map Navigation Interactivity
The map area itself will not change. Users may zoom in and pan in a limited fashion (up to 4x zoom in D3), but they are never allowed to zoom or pan outside of the original Canvas extent. In the lower left-hand corner, please put a little “House” icon that when clicked zooms to the original default, entire US, Alaska, Hawaii, and Puerto Rico view.

## Desktop Sources Modal
The sources modal should be shown when the user clicks a small, subtle, stylish information button to the right of the title at the top of the map in desktop. Location of mobile sources modal button is discussed below.

The modal MUST not be open when the map loads.


# Desktop versus Mobile Layout

I’m envisioning that this map will work best on Desktop but it should function in a limited capacity on mobile. First, make sure the user turns their phone to landscape mode. If in portrait mode, show the title of the map. Provide a brief message saying the map is best viewed on a PC as it is meant to function as an exploratory tool. However, a limited version is viewable on mobile **but** the user must rotate their phone.

Once the phone is in landscape mode, center the US Map so it fills the whole screen. No need for a title or anything. Show statewide data, and Puerto Rico, of rates. The info window should present all the data concerning State Name, Rates, and Counts. Use the same State Admission Rates Per Patient Per Year map/visualization used on desktop. In an inconspicuous place, please add a button that allows the user to view Sources.

# Sources Modal
In both versions (mobile and desktop) the same sources modal can be used. It MUST start closed/invisible. It should only show up when interactivity calls for it. It MUST close whenever the user clicks outside of it. (On mobile, it must leave a little window space so the user can click outside of it.)

Content in the Sources Model should include:
– Data source: https://www.niddk.nih.gov/about-niddk/strategic-plans-reports/usrds/data-query-tools/esrd-hospitalization-rate
– 2023 county- and state-level data conglomerated and cleaned by <a href=”https://linkedin.com/in/ianmule”>Ian Muehlenhaus</a>.
– Download links to the XLSX datasets uploaded here.
– Subtly and more clearly than I did above, mention what the values represent and mean in plain English.
– Map tools: {Any mapping APIs used}
– Prompt cartographer: Ian Muehlenhaus
– Provenance file:

Created for the #365DaysOfMaps and #promptcartography campaign created for the <a href=”https://mapdesign.icaci.org/”>Commission on Map Design</a> of the International Cartographic Association. Sign up today to receive a map like this — though sometimes more uplifting — every day!

No rights reserved. πŸ˜‰

Data year: 2023


# Title, Style, and Map Element Aesthetic

## Title
The title be in a formal but modern Google font display type across the top. Prominent but not obnoxious. Single Line. No background box. Add a slight black drop shadow so it remains readable even if it is over parts of the map after zooming and panning, etc. If the user hovers over the title, a little tool tip can show up “Designed to raise awareness about kidney diseases on World Kidney Day (March 12, 2026). More info available by clicking the info icon.”

Title: “The Geography of Kidney Disease across the US”

## Info Window
The background of the Info Window should be white but the window should have a 1.5px border in the color of the county or state on that particular map. The font color in the info window should be the same purple or green as the color of the county or state on that particular map.

Info window should show:
– State Name bold.
– Admission Rate
– Hospitalization Rate
– Admission Count
– Hospitalization Count

Subtly add in lighter gray text “All statistics per patient in 2013.”

## Style

### Fonts

Use Google fonts that exude modernity and clinical precision. Science! Title should use a Scientific and empathetic sans-serif Google Font.

All fonts must be sans-serif.

### Map Elements
Map elements should have 4px rounded corners. The background of the map should be sanitary white. Clear crisp design signaling medical modernity.

The panel and histogram and dropdowns, etc., should all be designed as ultra contemporary data exploration and visualization tools that you might see in the New York Times, Washington Post, or from Alberto Cairo.

Minimalism goes a long way here, as the data is already dense.

Before you begin, please let me know if you have any questions. One other note, I don’t have geometry files for these datasets. I would like these to be joined to state and county geometries, respectively, if possible. I believe this will work well in D3, but if you think there is another way that is better, please let me know.

Thank you!

 

 

Happy National Cold Cut Meats Day! (62/365)

Happy National Cold Cut Meats Day!

I imagine that this may have been started by the cold cut meats industry to offset National Colectoral Cancer Awareness Month. Cold cut meats are designated as a Class 1 carcinogen by the World Health Organization, as deadly (and some research shows potentially more lethal) than smoking.

For me, it’s a tough call between a quarter kilo of thinly sliced turkey or salami or a pack of Dunhill International cigarettes. In most circles, i.e., around my kids and wife, it’s more socially acceptable to eat cold cuts. So I’ll probably stick with that. Though, if smoking is actually less deadly… I do miss smoking like an old friend. Maybe I should give up meat and go back to that? Perhaps I will just shun both! That’s an idea! Yes…

Regardless of cancer risk, today is a day to celebrate! Today is just as important and celebrated as any other self-declared day, including our discipline’s sacred GIS Day.

So tip your hats and salute the Cold Cuts Meat Industry! (And not just for the gall to place their day smack dab in the middle of Colectoral Cancer awareness week and month!)

Today is a day for cold cuts! And here is a map to celebrate the industry’s many triumphs!

Map of colectoral cancer rates in the US. View the map here.

LLM tools used:

  • WebMapGPT: to create the map, interactivity, and layout, etc.
  • ChatGPT 5.2 Image: for the background tiles.
  • Google Gemini: to collect the CDC data on colectoral cancer rates by state.

WebMapGPT Prompt

Hi there. I have a dataset of colon and rectal cancer rates by state. I’m wondering if there is a way to get this information by county. Regardless, I’d like to make a thematic US map (with Alaska and Hawaii in the lower left) of colon and rectal cancer rates by state or country as a counter-celebration to National Cold Cut Meats Day on March 3. Processed meats are known to be carcinogenic and likely cause colon cancer, so I think it’s a good opportunity to highlight the risks. The background, behind the map, should be a large, tiled image of cold but meats layered on top of one another from a bird’s eye view angle. Can you create a background tile that makes it look like a neverending layering of sliced deli meats, including roast beef, salami, turkey, and ham, please? That should be the html body fill behind the map. The color should be caramel and brown, by and large, but the meat colors. I’m going for shock like Lady Gaga’s meat dress that one year. πŸ™‚ The map itself should be a legitimate choropleth representation of the cancer rates (by county, preferably but state to start, to create the proof of concept). Use a quantitative color scheme from Color Brewer from orange/yellow to red (red being the highest rates). Let’s go with Natural Breaks and six categories. The info window should show the State Name, the colon and rectal cancer rate, and the state’s rank for highest rate to lowest. The title should be: “Cold Cutting Your Way to Cancer” Make the title look like one of those label stickers they slap on plastic cold cut meat bags at a deli. White rounded rectangle label with the title, a faux mini bar code under it, and March 3, 2026 as a date on it. Put the title in the upper left. Create a legend in the lower right. Double the legend as a multi-selet filter (clicking on certain classes will show them and remove unselected classes). Include a minimal reset button at the bottom of the legend. Also, a minimal Sources button in the bottom of the legend that will show the Sources Modal when clicked. When someone clicks anywhere outside of the sources modal, it should disappear. The sources modal MUST NOT be open when the map instantiates. Keep it hidden until it is asked for. The legend title should be something like colectoral cancer rates. The pop-up window should note, in fine print, at the bottom, but still readable, that processed meats have been deemed as carcinogenic as smoking by the WHO. Thanks!

Happy Banana Cream Pie Day, USA! (61/365)

Happy National Banana Cream Pie Day!

In honor of a pie I’ve never had, I decided to show each state’s adult obesity rate. Howeve,r you have to find your state first! It’s hard digging through all of that cream! Celebrate responsibly!

View map here.

Provenance File

Original Prompt (Web Map GPT at around midnight)

Tomorrow is National Cream Pie Day. Please create a map of the United States that fits in a single browser window (with (Alaska and Hawaii in the lower left) that has no state outlines but just a coconut or chocolate cream pie texture fill across the entire United States. It should look a lot like a cream pie.

Then, as a person clicks on different states, which do not have borders necessarily, a tooltip should pop up with the state name and percent of population (adult is fine if that is easier) that is overweight or obese.

Recency of data doesn’t matter, as it’s a tongue in cheek nod to America’s obsession with bad food.

Give the map a title of Happy National Boston/Maple/Baked Cream Pie Day! In the upper left. An Attribution button should pop up a modal (make sure it starts closed) that provides info on where you got the obesity data, that the map was made with Web Mapper GPT, and list the APIs you used. At the end, remind people to enjoy eating responsibly.

Please give the map a clean, white background aesthetic and a big corny pie-tastic title. Thanks!

Happy National Tooth Fairy Day! (60/365)

Happy National Tooth Fairy Day (and welcome to March)!

The Tooth Fairy has been shaking parents down for cash for a long, long time around the world. How much does it cost parents? Well, geography matters. (Hint: I’m glad I don’t live in Delaware, as I’d never be able to save up for my children’s orthodontist!)

View where your state stands (if you live in the US) to see how much more or less you are paying on average compared to the national average for a tooth. If you don’t live in the US, sorry. Only the US dental insurance company seems to collect data on this… as far as I could find.

View Map Here

View Entire Web Map GPT Conversation

View Entire Perplexity Pro Conversation to Create the Dataset

Happy (National) Science Day! (59/365)

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.)

Map of world with proportional symbols showing number of scientific breakthroughs since 2000.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 International Polar Bear Day! (58/365)

Happy World Polar Bear Day!!!

Polar bears are beloved by many. They are also amazing hunters, tracking prey over vast distances.

 

Climate change is threatening their existence, however. They may be extinct within 100 years, some have predicted.

To celebrate these wonderful beasts, I decided to create a map showing the bears remaining (where counts are available) in the Arctic region.

View Map Here

Tools used

  • Dataset Doctor GPT
  • Web Mapper GPT

Prompt

I would like to make a map of polar bear counts in the Arctic region using the attached CSV dataset. In each region, which should be highlighted very lightly on a global map using a polar projection, I would like a proportional symbol to be created representing how many bears are in each district. Please scale based on area. The smallest should be 15px wide and the largest 35px wide. The geojson is in EPSG: 3413 coordinate system. If possible, I would love to use the same projection for this map. If it makes sense, we can omit a basemap and instead use Natural Earth countries. The map theme should be scientific. Not bleak but not positive. I’m attaching a polar bear report from where the data was collected to provide nuance and context. Polar Bears are endangered, but it’s International Polar Bear Day, so let’s celebrate them! Also please make sure this map works well on mobile devices. Thanks! Please provide feedback and ask follow-up questions, as required, to help begin drafting this map. Thank you.

Happy Fairy Tale Day! (57/365)

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! (48/365)

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!

Human spirit via coffee consumption map 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!