MapConductor React SDK Samples

Ajustes de estilo | MapLibre | MapConductor React SDK

Ejemplo de Ajustes de estilo de MapConductor React SDK con MapLibre.

Este ejemplo interactivo muestra Ajustes de estilo mediante la abstracción de MapConductor sobre MapLibre.

Ejemplo de código

import { createGeoPoint, createMapCameraPosition } from '@mapconductor/js-sdk-core';
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) Renderizar el mapa y sus capas


<MapLibreMapView2D state={mapViewState}>
  {/* MapConductor overlays */}
</MapLibreMapView2D>

Cómo funciona el código

Renderiza capas independientes del proveedor dentro de la vista de mapa compartida de MapConductor.