What data formats does it accept?

GeoJSON FeatureCollections, CSV with latitude/longitude columns, and named region data (country names, US state abbreviations). All are auto-detected on paste.

Which map projection does it use?

Web Mercator (EPSG:3857) by default, matching standard web maps. Switch to Albers Equal-Area for US-focused maps or Robinson projection for world maps where area accuracy matters.

Can I customize the color scale?

Yes — sequential (single-hue), diverging (two-hue), and qualitative palettes are configurable. Colorblind-safe palettes (Viridis, ColorBrewer) are included as presets.

Geographic Map Visualizer

DevTools Surf

Example: Geographic Map Visualizer

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

type=points
center=0,0
zoom=2
New York,40.71,-74.00
London,51.51,-0.13
Tokyo,35.69,139.69

Output

{
  "title": "Geographic Map",
  "type": "choropleth",
  "regions": [
    {
      "name": "type=points",
      "value": 0,
      "lat": 0,
      "lng": 0
    },
    {
      "name": "center=0",
      "value": 0,
      "lat": 0,
      "lng": 0
    },
    {
      "name": "zoom=2",
      "value": 0,
      "lat": 0,
      "lng": 0
    },
    {
      "name": "London",
      "value": 51.51,
      "lat": -0.13,
      "lng": 0
    },
    {
      "name": "Tokyo",
      "value": 35.69,
      "lat": 139.69,
      "lng": 0
    }
  ],
  "bounds": {
    "latMin": -0.13,
    "latMax": 139.69,
    "lngMin": 0,
    "lngMax": 0
  },
  "stats": {
    "min": 0,
    "max": 51.51,
    "total": 87.19999999999999
  }
}

About Geographic Map Visualizer

Geographic Map Visualizer preview - Data / SQL tool

Generate geographic maps with data overlays and regional highlighting. Part of the DevTools Surf developer suite. Browse more tools in the Data / SQL collection.

Use Cases

Visualize sales data by region or country as a choropleth to identify geographic patterns.
Plot customer locations as a bubble map with bubble size representing revenue or engagement.
Highlight specific countries or states for a market expansion analysis presentation.
Generate a heatmap overlay showing population density or event frequency by location.

Tips

Use GeoJSON input for precise boundary overlays — the tool renders both point data and polygon regions from standard GeoJSON FeatureCollections.
Choose choropleth coloring for regional comparisons and bubble maps for absolute value comparisons — each communicates a different kind of data relationship.
Export as SVG for presentations where the map needs to be annotated or resized — SVG scales to any resolution without pixelation.

Fun Facts

Choropleth maps (regions shaded by data value) were invented by Charles Dupin in 1826 to map literacy rates across France — the first known thematic map using this technique.
GeoJSON was standardized as RFC 7946 in 2016. It replaced older formats like KML and Shapefile for web mapping because it's human-readable JSON compatible with JavaScript's native data structures.
The Mercator projection (1569), still used by Google Maps, increasingly distorts area at high latitudes — Greenland appears comparable in size to Africa on Mercator maps, despite Africa being 14x larger in actual area.

FAQ

What data formats does it accept?: GeoJSON FeatureCollections, CSV with latitude/longitude columns, and named region data (country names, US state abbreviations). All are auto-detected on paste.
Which map projection does it use?: Web Mercator (EPSG:3857) by default, matching standard web maps. Switch to Albers Equal-Area for US-focused maps or Robinson projection for world maps where area accuracy matters.
Can I customize the color scale?: Yes — sequential (single-hue), diverging (two-hue), and qualitative palettes are configurable. Colorblind-safe palettes (Viridis, ColorBrewer) are included as presets.

Related Data / SQL Tools

CSV Viewer CSV → SQL INSERT SQL → CSV Fixture TSV ↔ CSV CSV Schema Validator SQL → Prisma Schema CSV Column Remapper CSV Validator with Schema