Docs / Setup / React / OpenLayers

OpenLayers setup

How to use OpenLayers on the Web through MapConductor. No key, and the right pick when you need fine control over projections and tile sources.

PACKAGE

react-for-openlayers

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

ol comes bundled with the package.

terminalnpm

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

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-openlayers/style.css';

STEP 03

Decide on a tile source

Each OpenLayersDesign wraps an OpenLayers TileSource. The default OpenStreetMap uses ol's own OSM source and carries the attribution.

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.

OpenLayersMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { OpenLayersDesign, OpenLayersMapView, useOpenLayersMapViewState } from '@mapconductor/react-for-openlayers';
import '@mapconductor/react-for-openlayers/style.css';

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

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

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

Map designs

Each OpenLayersDesign wraps an ol TileSource.

OpenLayersDesign

Notes

OpenStreetMap

ol's OSM source, attribution included

None

No base tiles

Troubleshooting

Tilt and rotation do not work

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

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.

When you need something only OpenLayers can do, pull the ol Map instance out of MapViewHolder and drive it directly.