Geomarketing, realistic 3D globe (MapLibre + deck.gl + Esri) with geo decision-intelligence
Built the geomarketing surface for a paid-media reporting portal as a client-side WebGL experience: a photo-realistic 3D globe using MapLibre GL 5 globe projection over an Esri World Imagery satellite raster basemap (no API token), with a deck.gl overlay whose visualization mode switches between heatmap, points, extruded 3D columns, hexbins and great-circle connection flows, plus flat/globe and dark/light/geographic base maps. Around the map, added decision-intelligence the mockup lacked: a 'where to scale vs reallocate' table that classifies each market against the account ROAS, a model-agnostic value-by-market view (purchases and AOV for ecommerce, SQL/opportunity/pipeline for B2B), a platform×market ROAS matrix highlighting the best channel per market, and momentum and concentration modules. Because the offline build sandbox cannot render WebGL, the globe was delivered as a standalone for in-browser verification before porting the engine into the portal.
A photo-realistic 3D globe with switchable heatmap, columns and connection flows, MapLibre + deck.gl + Esri imagery, no API token.
Role: Sole designer/implementer of the geomarketing visualization engine and intelligence modules
The Problem
Geographic performance needs to be both visually credible (a realistic explorable globe) and decision-useful, telling a client not just where they spend, but where to scale, where to reallocate, which platform works in which market, and how concentrated the account is.
Render a photo-realistic 3D globe with data overlays in the browser without a paid map token, support switchable visualizations (heatmap / points / 3D bars / connections / choropleth) and flat vs globe projection, and add analytical modules, all inside the single-file POC and verifiable despite the WebGL map requiring internet the headless sandbox lacks.
MapLibre's vector globe looks nothing like the mockup's satellite-textured earth; that requires a satellite raster basemap in globe projection. deck.gl layer selection had to be wired for real (the POC's selectors were decorative). And the WebGL map cannot be screenshot-verified in the offline sandbox, so the map had to be split into a standalone file for in-browser verification while the surrounding intelligence modules were headlessly verified.
Approach & Architecture
Wired the deck.gl visualization modes for real in the POC (HeatmapLayer, ScatterplotLayer, ColumnLayer, HexagonLayer, ArcLayer, and a country GeoJsonLayer choropleth) plus a flat/globe MapLibre projection toggle, then built a separate realistic-globe standalone using an Esri World Imagery satellite raster basemap in globe projection (no token). Added a full geo-intelligence layer around the map: Top Markets, a Selected-Market panel, a 'Where to scale vs reallocate' action table, a model-agnostic 'Value by market', a platform×market ROAS matrix, and Momentum + Concentration modules.
MapLibre GL 5.5 renders the basemap (Esri satellite raster in globe projection, or CARTO dark/light/voyager vector styles) with atmosphere; a deck.gl 9 MapboxOverlay draws data layers by mode over it; city points carry conv/sessions/revenue and drive heatmap/points/3D-columns/hexbins and great-circle arcs. Base-map switches re-apply projection and rebuild layers on style.load. The POC page adds vanilla-JS/SVG intelligence modules with action badges, a heat-colored matrix, share bars and decision callouts (allowed on this intelligence page).
Key Decisions & Trade-offs
Hardest Part
Matching the mockup's realistic globe: it isn't MapLibre's vector globe but a satellite-textured earth, solved with an Esri World Imagery raster source in MapLibre 5 globe projection with the deck.gl overlay on top.
Technical Detail
City records {name, lat, lng, conv, sessions, revenue}; market/country-level synthetic aggregates for the intelligence modules scaled to the account total.
Client-side WebGL (browser). Free CDN libraries (unpkg) and free tiles (Esri, CARTO).
Intelligence modules screenshot-verified headlessly; the WebGL globe verified in a real browser by the user (offline sandbox cannot load the tiles). JS syntax gate over the script block.
Code
var SAT={version:8,projection:{type:'globe'}, sources:{esri:{type:'raster', tiles:['[url]'], tileSize:256,attribution:'Esri, Maxar, Earthstar Geographics'}}, layers:[{id:'esri',type:'raster',source:'esri'}]};if(vizMode==='heatmap') layers.push(new deck.HeatmapLayer({data:CITIES,getPosition:d=>[d.lng,d.lat],getWeight:d=>d[m.key],radiusPixels:75,colorRange:COLORRANGE}));
else if(vizMode==='points') layers.push(new deck.ScatterplotLayer({data:CITIES,getPosition:d=>[d.lng,d.lat],getRadius:d=>45000+240000Math.sqrt(d[m.key]/metricMax),getFillColor:d=>heatRGB(d[m.key]/metricMax).concat([215])}));
else layers.push(new deck.ColumnLayer({data:CITIES,extruded:true,getPosition:d=>[d.lng,d.lat],getElevation:d=>d[m.key],elevationScale:600000/metricMax,getFillColor:d=>heatRGB(d[m.key]/metricMax).concat([235])}));
if(arcOn) layers.push(new deck.ArcLayer({data:FLOWS,greatCircle:true,getSourcePosition:d=>d.from,getTargetPosition:d=>d.to}));Built inside Claude Cowork: the assistant located the prior globe artifact in the workspace, identified the open-source stack (MapLibre + deck.gl + CARTO/Esri), wired the real viz modes into the POC, and authored a new realistic-globe standalone, while being explicit that the WebGL map required human in-browser verification because the sandbox is offline.
Measured Results
Delivered a realistic satellite 3D globe standalone (MapLibre + deck.gl + Esri, no API key) with switchable heatmap/points/3D-bars/connections and flat/globe modes, plus a geomarketing intelligence page (scale/reallocate, model-agnostic value-by-market, platform×market ROAS matrix, momentum, concentration) verified headlessly. The globe awaits in-browser confirmation before porting its engine into the portal; all figures are synthetic.