Docs / Setup / React / Leaflet

Leaflet setup

How to use Leaflet on the Web through MapConductor. No key, and a good fit when you just want raster tiles rendered lightly.

PACKAGE

react-for-leaflet

API KEY

None

CSS

Required

3D CAMERA

Simulated

View demoStore Map · React ↗

Before you start

Node.js 18 or newer

React 18 or 19

STEP 01

Install

leaflet comes bundled with the package.

terminalnpm

npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
            @mapconductor/react-for-leaflet

STEP 02

Import the stylesheet

Import it once from your application entry point. Forget it and the map's layout and controls come out wrong.

main.tsxTypeScript

import '@mapconductor/react-for-leaflet/style.css';

STEP 03

Decide where the tiles come from

The default LeafletDesign.OpenStreetMap uses OpenStreetMap's public tiles and carries the attribution with it.

CAUTION

OpenStreetMap's public tile servers have a usage policy — for production traffic, use your own tiles or a commercial service.

VERIFY

What you should see

The setup is complete when the map renders.

LeafletMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { LeafletDesign, LeafletMapView, useLeafletMapViewState } from '@mapconductor/react-for-leaflet';
import '@mapconductor/react-for-leaflet/style.css';

const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });

export function LeafletMap() {
  const state = useLeafletMapViewState({
    mapDesignType: LeafletDesign.OpenStreetMap,
    cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));

  return (
    <LeafletMapView state={state} style={{ height: 480 }}>
      <Marker state={markerState} />
    </LeafletMapView>
  );
}

Map designs

Each LeafletDesign wraps a tile URL template — construct the type yourself to point at your own tiles.

LeafletDesign

Notes

OpenStreetMap

The standard OSM tiles, attribution included, max zoom 19

None

No base tiles — for when you only want your overlays

Troubleshooting

Tilt and rotation do not work

Leaflet has no native 3D camera. MapConductor approximates tilt and bearing with a CSS 3D transform — a visual effect only, not a real 3D camera.

The map's layout looks broken

Check you imported style.css.

The map initialises twice in development

React StrictMode double-invokes effects. Every provider detects this and discards the aborted run, so you do not need to turn StrictMode off.

Need real 3D? Look at MapLibre or Cesium. Need strict control over projections? Look at OpenLayers.