MapConductor React SDK Samples

Ejemplo de código

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) Crear el mapa


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


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


// (2) Preparar los datos y el estado de interacción
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) Renderizar el mapa y sus capas


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

Cómo funciona el código

Compone puntos geográficos ponderados dentro de la superposición de la extensión de mapa de calor.

Un useEffect obtiene postoffices.json y convierte cada coordenada en un HeatmapPointState guardado en el estado de React.

El <HeatmapPoints> dentro de <HeatmapOverlay> compone todo el conjunto de una vez, y la extensión dibuja el mapa de densidad en cualquier proveedor.