MapConductor React SDK Samples

Ejemplo de código

import { useMemo, useState } from 'react';
import {
  Spherical,
  createCircleState,
  createGeoPoint,
  createMapCameraPosition,
  type MarkerState,
} from '@mapconductor/js-sdk-core';
import { Circle, Marker, Polyline } from '@mapconductor/js-sdk-react';
import { MapLibreDesign, MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';


// (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 center = createGeoPoint({ latitude: 21.382314, longitude: -157.933097 });
const [edge, setEdge] = useState(() => Spherical.computeOffset({
  origin: center, distance: 1000, heading: 90,
}));
const radiusMeters = useMemo(
  () => Spherical.computeDistanceBetween(center, edge),
  [edge],
);
const circleState = useMemo(() => createCircleState({
  id: 'circle', center, radiusMeters,
  fillColor: 'rgba(37, 99, 235, 0.3)',
}), [radiusMeters]);
const resizeCircle = (markerState: MarkerState) => setEdge(markerState.position);


// (3) Renderizar el mapa y sus capas


<MapLibreMapView2D state={mapViewState}>
  <Circle state={circleState} />
  <Polyline points={[center, edge]} zIndex={1} />
  <Marker position={center} />
  <Marker position={edge} draggable onDrag={resizeCircle} />
</MapLibreMapView2D>

Cómo funciona el código

Dibuja un círculo y cambia su radio arrastrando el marcador del borde; la línea del radio se dibuja sobre el círculo.

El punto edge es estado de React iniciado con Spherical.computeOffset, Spherical.computeDistanceBetween(center, edge) obtiene radiusMeters, y useMemo reconstruye el CircleState cada vez que ese radio cambia.

Arrastrar el marcador del borde llama a resizeCircle para mover edge, mientras que la Polyline dibujada con zIndex 1 mantiene la línea del radio sobre el relleno y el círculo crece en consecuencia.