This application requires JavaScript.
maps.guru
maps for react

React maps, the boring infra part sorted.

Wrap maplibre-gl in the official react-map-gl adapter for declarative React components. Drop in <Map> + <Source> + <Layer> and stay purely React, with no imperative DOM ref handling.

Get a free API key React docs
install
pnpm add maplibre-gl react-map-gl
tsx
import 'maplibre-gl/dist/maplibre-gl.css';
import Map, { Source, Layer, NavigationControl } from 'react-map-gl/maplibre';

const MAP_STYLE = 'https://maps.guru/api/v1/styles/standard/light/style.json?key=YOUR_API_KEY';

export function CityMap() {
  return (
    <Map
      initialViewState={{ longitude: 77.209, latitude: 28.6139, zoom: 11 }}
      mapStyle={MAP_STYLE}
      style={{ width: '100%', height: 480 }}
    >
      <NavigationControl position="top-right" />
      <Source
        id="places"
        type="geojson"
        data="https://maps.guru/api/v1/datasets/your-dataset/geojson?key=YOUR_API_KEY"
      >
        <Layer
          id="places-fill"
          type="circle"
          paint={{
            'circle-radius': 6,
            'circle-color': '#ff6b00',
            'circle-stroke-width': 2,
            'circle-stroke-color': '#ffffff',
          }}
        />
      </Source>
    </Map>
  );
}
live · React preview

Why React teams ship on maps.guru

Free-tier generous enough for real production traffic. 50,000 tile requests/month , no credit card.

  • Use react-map-gl/maplibre for full TypeScript types and React 18+ concurrent rendering.
  • Compose maps declaratively with <Source> + <Layer> JSX instead of imperative map.addLayer() calls.
  • Subscribe to map events via onLoad / onViewportChange for in-component state and SSR-friendly rendering.

Frequently asked

Maps for other frameworks

Ready to build with
beautiful basemaps?

Join developers worldwide who trust maps.guru for their mapping needs. Start free, no credit card required.

Contact us
Free forever plan
5-minute setup
No credit card