MapConductor React SDK Samples

Code example

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition } from '@mapconductor/js-sdk-core';
import { MapLibreDesign, MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';


// (1) Create the map


const initialCamera = createMapCameraPosition({
  position: createGeoPoint({ latitude: 35.6812, longitude: 139.7671 }),
  zoom: 12,
});


const mapViewState = useMapLibreViewState({
  mapDesignType: MapLibreDesign.OsmBrightJa,
  cameraPosition: initialCamera,
});


// (2) Prepare the data and interaction state
const mapDesignOptions = providerDesignOptions;
const [selectedDesignId, setSelectedDesignId] = useState(
  String(mapViewState.mapDesignType.id),
);


// (3) Render the map and its overlays


const handleDesignChange = (designId: string) => {
  const option = mapDesignOptions.find(item => item.design.id === designId);
  if (!option) return;
  mapViewState.mapDesignType = option.design;
  setSelectedDesignId(String(option.design.id));
};


<MapLibreMapView2D state={mapViewState}>
  <select
    value={selectedDesignId}
    onChange={event => handleDesignChange(event.target.value)}
  >
    {mapDesignOptions.map(option => (
      <option key={String(option.design.id)} value={String(option.design.id)}>
        {option.label}
      </option>
    ))}
  </select>
</MapLibreMapView2D>

How the code works

Change the abstract map design on the view state, and let each provider resolve it to its corresponding native style.

The mapDesignOptions come from the active provider's design list, and selectedDesignId mirrors mapViewState.mapDesignType.id so the <select> stays a controlled component.

handleDesignChange finds the chosen option and assigns option.design to mapViewState.mapDesignType; the provider then swaps to the matching native style without rebuilding the map.