MapConductor React SDK Samples

Ejemplo de código

import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Markers } 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 destination = createMapCameraPosition({
  position: createGeoPoint({ latitude: 35.6812, longitude: 139.7671 }),
  zoom: 13,
});
const destinations = [createMarkerState({ id: 'tokyo', position: destination.position })];


// (3) Renderizar el mapa y sus capas


<button onClick={() => mapViewState.moveCameraTo(destination, 1000)}>
  Fly to destination
</button>


<MapLibreMapView2D state={mapViewState}>
  <Markers states={destinations} />
</MapLibreMapView2D>

Cómo funciona el código

Mueve la cámara a un destino con una animación de un segundo mediante la misma API para todos los proveedores.

El destination es un MapCameraPosition que fija a la vez una coordenada y un nivel de zoom, y el arreglo destinations coloca un marcador allí para que el objetivo sea visible.

El botón llama a mapViewState.moveCameraTo(destination, 1000) y la animación de 1000 ms se reproduce igual sin importar qué proveedor dibuje el mapa.