MapConductor React SDK Samples

Ejemplo de código

import { useMemo } from 'react';
import { createGeoPoint, createMapCameraPosition, createPolygonState } from '@mapconductor/js-sdk-core';
import { Polygon } from '@mapconductor/js-sdk-react';
import { MapLibreDesign, MapLibreMapView, 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 geodesicPolygon = useMemo(() => createPolygonState({
  id: 'geodesic', points: longDistancePoints, geodesic: true,
}), [longDistancePoints]);
const straightPolygon = useMemo(() => geodesicPolygon.copy({
  id: 'straight', geodesic: false,
}), [geodesicPolygon]);
const polygons = [geodesicPolygon, straightPolygon];


// (3) Renderizar el mapa y sus capas


<MapLibreMapView state={mapViewState}>
  {polygons.map(polygon => (
    <Polygon key={polygon.id} state={polygon} />
  ))}
</MapLibreMapView>

Cómo funciona el código

Compara bordes de polígono geodésicos y no geodésicos en distancias largas y al cruzar el antimeridiano.

geodesicPolygon se construye con geodesic:true, y straightPolygon es una .copy con geodesic:false sobre los mismos longDistancePoints.

Dibujar ambos muestra cómo los bordes geodésicos se curvan para seguir la ruta más corta mientras que los rectos permanecen planos en la proyección del mapa.