Browser Maps APIs

Which mapping library makes your use case simple and your budget sustainable?

Maps are one of the most common browser APIs to integrate — and one of the easiest to overpay for. The right choice depends on your job to be done, not the feature list.

Selection Checklist

Score each option against your requirements before committing.

#	Criterion	Question	Weight
1	Cost at scale	What's the monthly bill at 100K, 1M, 10M loads?	Critical
2	Tile source	Do you need satellite imagery, street-level, or vector only?	High
3	Interactivity	Static pins or dynamic drawing, clustering, real-time updates?	High
4	Offline capability	Must the map work without network?	Medium
5	3D and terrain	Do you need elevation, building extrusion, globe view?	Medium
6	Geocoding	Address-to-coordinates and reverse?	Medium
7	Routing	Directions, distance matrix, isochrones?	Medium
8	Data volume	Rendering 100 markers or 100K? How does it handle density?	High
9	React integration	First-party React wrapper or community-maintained?	Medium
10	Self-hosting	Can you host your own tile server?	Low-High
11	Bundle size	How much JS ships to the client?	Medium
12	Licensing	Open source, freemium, or enterprise-only?	Critical

Comparison

Dimension	Google Maps	Mapbox GL JS	MapLibre GL JS	Leaflet	Deck.gl	Apple MapKit JS
License	Proprietary	Proprietary (BSL)	BSD-3-Clause	BSD-2-Clause	MIT	Proprietary
Cost	$200 free/mo credit, then per-load	50K free loads/mo, then per-load	Free (bring tiles)	Free (bring tiles)	Free (bring tiles)	250K free/day
Rendering	Raster + Vector	WebGL vector	WebGL vector	Canvas/SVG raster	WebGL overlay	WebGL vector
3D support	Limited	Full (terrain, extrusion)	Full (terrain, extrusion)	None	Full (point clouds, arcs)	Limited
React wrapper	`@vis.gl/react-google-maps`	`react-map-gl`	`react-map-gl`	`react-leaflet`	`@deck.gl/react`	None (vanilla JS)
Large datasets	Moderate	Good (clustering, expressions)	Good (same engine)	Poor above 10K markers	Excellent (millions of points)	Moderate
Geocoding	Built-in	Built-in	Bring your own	Bring your own	N/A (viz layer)	Built-in
Routing	Built-in	Built-in (Directions API)	Bring your own	Bring your own	N/A (viz layer)	Built-in (limited)
Offline tiles	No	Yes (mobile SDKs)	Yes (PMTiles, MBTiles)	Yes (with plugins)	N/A	No
Bundle size	~200KB (async)	~210KB	~210KB	~40KB	~300KB+	~30KB (thin client)
Globe view	No	Yes	Yes	No	Yes	Yes
Street View	Yes	No	No	No	No	Look Around (limited)
Best for	Familiar UX, Places API	Custom styling, production apps	Cost-sensitive, self-hosted	Lightweight, quick prototypes	Data viz, geospatial analysis	Apple ecosystem apps

Jobs To Be Done

Match your use case to the right tool.

Job	Best Fit	Why
Show a location on a contact page	Google Maps embed or Leaflet	Simplest integration, familiar UX
Property or asset map with filters	Mapbox or MapLibre	Custom styling, clustering, interactive popups
Real estate listing browser	Mapbox or MapLibre + `react-map-gl`	Draw-to-search, price overlays, smooth transitions
Fleet or device tracking (DePIN)	MapLibre + Deck.gl	Real-time updates, thousands of moving points, no per-load cost
Route planning and navigation	Google Maps or Mapbox	Built-in routing, traffic, turn-by-turn
Geospatial data visualization	Deck.gl + MapLibre	Heatmaps, arcs, hex grids at scale
Offline field app	MapLibre + PMTiles	Self-hosted vector tiles, zero API cost
Satellite imagery overlay	Google Maps or Mapbox	High-res tile sets included
Custom branded map style	Mapbox or MapLibre	Full style spec control, design studio

React Integration

react-map-gl (Mapbox and MapLibre)

The standard React wrapper for GL-based maps. Works with both Mapbox and MapLibre by swapping the mapLib prop.

import Map, { Marker, Popup, NavigationControl } from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";

function PropertyMap({ listings }) {
  return (
    <Map
      initialViewState={{ longitude: 174.77, latitude: -41.29, zoom: 12 }}
      mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_TOKEN}
      mapStyle="mapbox://styles/mapbox/streets-v12"
    >
      <NavigationControl position="top-right" />
      {listings.map((listing) => (
        <Marker key={listing.id} longitude={listing.lng} latitude={listing.lat} />
      ))}
    </Map>
  );
}

Switch to MapLibre (zero cost)

import Map from "react-map-gl/maplibre";
import "maplibre-gl/dist/maplibre-gl.css";

<Map
  initialViewState={{ longitude: 174.77, latitude: -41.29, zoom: 12 }}
  mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
/>;

Tile Sources

Free and paid tile providers for MapLibre and Leaflet.

Provider	Type	Cost	Quality
OpenStreetMap	Raster	Free (fair use)	Good
CARTO basemaps	Vector	Free	Good
Protomaps	Vector (PMTiles)	Self-hosted, free	Good
Stadia Maps	Raster + Vector	Free tier, then paid	Good
Maptiler	Vector	Free tier, then paid	Excellent
Mapbox	Vector	50K free, then paid	Excellent
Google	Raster	$200 credit, then paid	Excellent

Decision Tree

Need Street View or Places API?
  YES → Google Maps
  NO ↓

Need custom styling + production quality?
  YES ↓
    Budget for per-load pricing?
      YES → Mapbox GL JS
      NO  → MapLibre GL JS + free tiles
  NO ↓

Visualizing large datasets (10K+ points)?
  YES → Deck.gl + MapLibre base
  NO ↓

Quick prototype or simple embed?
  YES → Leaflet

Context

Browser APIs — The frontend iceberg
DePIN Infrastructure — Device tracking and spatial data use cases
Component Driven Development — Build map components in isolation

Questions

When does the cost of "free" open-source tiles exceed the cost of a managed service?

At what data volume does Leaflet's canvas renderer break down and WebGL become necessary?
If your map is the product (not a feature), does that change which library you choose?
What's the real cost of switching map providers after you've built custom styles and interactions?

Selection Checklist​

Comparison​

Jobs To Be Done​

React Integration​

react-map-gl (Mapbox and MapLibre)​

Switch to MapLibre (zero cost)​

Tile Sources​

Decision Tree​

Context​

Links​

Questions​