gis

The Stack: ArcGIS + MapLibre + Deck.gl

Most GIS tools want to do everything. ESRI builds the data platform, the map renderer, the visualization layer, the dashboard, the app builder, the authentication system, and the deployment infrastructure — all integrated, all within the ecosystem. That integration is genuinely valuable. It's also a ceiling.

There's a different way to build. One where each tool does only what it's best at, and the three layers cooperate without being locked together. It's already possible with tools that are free, production-ready, and used at massive scale in industry. Almost nobody in humanitarian GIS is doing it yet.

The Layers of Glass

Picture two glass panels stacked on top of each other.

The bottom panel is MapLibre — the base map. It draws the world: tiles, roads, coastlines, terrain. It handles the camera — pan, zoom, tilt, rotation. It renders geography beautifully, at WebGL speed, with no API key and no licensing cost.

The top panel is Deck.gl — the data visualization. It draws your features on top of the base map: points, arcs, hexbins, animated flows. It talks to the GPU directly, rendering millions of features as fast as hundreds. It doesn't know or care what's on the bottom panel. It just renders data at coordinates.

A single adapter — MapboxOverlay — connects them. MapLibre and Deck.gl share the same camera, so they move together as you pan and zoom. From the user's perspective, it's one seamless map. Underneath, they're two independent rendering engines.

Below both of them, invisible to the renderer, is ArcGIS Online — the data layer. It hosts your Feature Layers, maintains the authority of your data, handles permissions and sharing, and serves everything through a REST API that any tool can query.

Three Phases

Getting to the full stack is a progression. You don't have to build all three phases at once.

Phase 1 — Where most GIS developers start:

ArcGIS JS SDK pulling live AGOL Feature Layers. ESRI renders everything. You get powerful querying, solid map views, and full integration with the AGOL ecosystem. This is the foundation. Nothing wrong with it.

Phase 2 — The first unlock:

Keep AGOL as the data backend. Replace the ESRI map view with MapLibre. Your Feature Layer's GeoJSON endpoint feeds MapLibre sources directly. You get full visual control — any basemap, any styling, any tile source, zero ESRI UI chrome. The data pipeline doesn't change. Only the renderer changes.

Phase 3 — The cinematic layer:

Add Deck.gl on top of MapLibre. Your shelter data becomes a scatter plot where circle size encodes occupancy and color encodes status. Evacuation routes become animated arcs where line width encodes the number of people moving. Damage assessment density becomes a 3D hexbin visualization that no Dashboard widget has ever produced.

The three phases are independent. You can stop at Phase 1 and build excellent tools. Phase 2 is where the visual quality jumps. Phase 3 is where the data storytelling capability changes entirely.

Why AGOL Stays in the Stack

The question worth asking: if MapLibre and Deck.gl are doing the rendering, why use AGOL at all?

Because AGOL is genuinely excellent at what it does. Your Feature Layers are authoritative. They have field definitions, domains, editor tracking, version control, and permissions. They can be updated by field teams using Survey123 or Collector and the changes appear immediately. They are the system of record for your organization's operational data.

queryFeatures() is the bridge that makes AGOL work with anything:

const result = await shelterLayer.queryFeatures({
  where: "STATUS = 'OPEN'",
  outFields: ['NAME', 'CAPACITY', 'OCCUPANCY'],
  returnGeometry: true
});

const shelters = result.features.map(f => ({
  name: f.attributes.NAME,
  capacity: f.attributes.CAPACITY,
  load: f.attributes.OCCUPANCY / f.attributes.CAPACITY,
  lon: f.geometry.x,
  lat: f.geometry.y
}));

After that .map() call, the data is plain JavaScript. AGOL stays as the backend. Everything downstream — renderer, visualization layer, UI framework — becomes your choice.

The Build That Proves the Stack

The hurricane evacuation flow demo at jbf.com/gis-sdk-live.html shows what Phase 3 looks like rendered: a MapLibre dark basemap with Deck.gl ArcLayer arcs connecting origin counties to shelter destinations, arc width encoding evacuee volume, arc color encoding shelter load. Shelter circles sized by occupancy. Storm track as a native MapLibre layer.

That demo uses synthetic data. The same visualization with real AGOL Feature Layers — queryFeatures() replacing the hardcoded arrays — is the difference between a prototype and a production tool.

The swap is one change. The rendering doesn't care where the data came from.

What This Means for Humanitarian GIS

The people working with the most operationally critical geospatial data — disaster response organizations, emergency management agencies, humanitarian NGOs — are almost entirely inside the ESRI ecosystem. That's appropriate: ESRI's tools are enterprise-grade, widely supported, and deeply integrated with how these organizations store and share data.

But the visualization ceiling inside that ecosystem is real. Dashboards have widget limits. Experience Builder requires ESRI training to maintain. The tools designed for public-facing communications, decision-support during active deployments, and large-scale data storytelling are not inside the ESRI product suite.

The stack described here doesn't replace AGOL. It extends it. AGOL data, rendered with tools that have no ceiling on what they can visualize, deployed as a single HTML file that any Red Cross staffer can open, maintain, or hand off to a successor.

That's the architecture. And right now, almost nobody working in humanitarian GIS has built it.