MapConductor React SDK Samples

Codebeispiel

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


// (1) Die Karte erzeugen


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


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


// (2) Daten und Interaktionszustand vorbereiten
const [heatmapPoints, setHeatmapPoints] = useState<HeatmapPointState[]>([]);
useEffect(() => {
  fetch('/postoffice/postoffices.json')
    .then(response => response.json() as Promise<[number, number][]>)
    .then(data => setHeatmapPoints(data.map(([latitude, longitude], index) =>
      new HeatmapPointState({
        id: `post-office-${index}`,
        position: createGeoPoint({ latitude, longitude }),
      }),
    )));
}, []);


// (3) Die Karte und ihre Overlays rendern


<MapLibreMapView2D state={mapViewState}>
  <HeatmapOverlay>
    <HeatmapPoints states={heatmapPoints} />
  </HeatmapOverlay>
</MapLibreMapView2D>

Wie der Code funktioniert

Gewichtete geografische Punkte im Heatmap-Erweiterungs-Overlay zusammensetzen.

Ein useEffect holt postoffices.json und bildet jede Koordinate auf einen HeatmapPointState im React-State ab.

Das <HeatmapPoints> innerhalb von <HeatmapOverlay> setzt den ganzen Satz auf einmal zusammen, und die Erweiterung zeichnet die Dichtekarte bei jedem Anbieter.