MapConductor React SDK Samples

Code example

import { useMemo, useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { InfoBubble, Marker } from '@mapconductor/js-sdk-react';
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 position = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
const [selected, setSelected] = useState(false);
const marker = useMemo(() => createMarkerState({
  id: 'place', position, onClick: () => setSelected(true),
}), [position]);


// (3) Render the map and its overlays


<MapLibreMapView2D state={mapViewState}>
  <Marker state={marker} />
  {selected && (
    <InfoBubble marker={marker}>Simple text content</InfoBubble>
  )}
</MapLibreMapView2D>

How the code works

Anchor a simple React content bubble to a marker selected by the user.

A boolean selected flag lives in useState, and the marker's onClick flips it to true.

The InfoBubble renders only while selected is true and holds plain text, showing the minimal shape of a marker-anchored bubble.