MapConductorDocumentación / Configuración / React / TomTom
Configurar TomTom
Pasos para usar TomTom Orbis Maps en la web con MapConductor. Envuelve @tomtom-org/maps-sdk (basado en maplibre).
PACKAGE
react-for-tomtom
API KEY
Necesario
CSS
No necesario
REACT NATIVE
Ninguno
Antes de empezar
Node.js 18 o superior
Clave de API de Orbis Maps del TomTom Developer Portal
STEP 01
Instalar
@tomtom-org/maps-sdk y maplibre-gl están incluidos en el paquete.
terminalnpm
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-tomtomSTEP 02
Pasar la clave de API al state hook
Pase la clave al state hook, no a los props del component de vista. Si se coloca en props, se mezclará en registros y pruebas de pruebas.
TomTomMap.tsxTypeScript · React
const state = useTomTomViewState({
apiKey: import.meta.env.VITE_TOMTOM_API_KEY,
mapDesignType: TomTomDesign.Standard,
cameraPosition: createMapCameraPosition({ position: AMSTERDAM, zoom: 11 }),
});PRECAUCIÓN
Pase la clave desde variables de entorno en tiempo de compilación (para Vite, por ejemplo import.meta.env.VITE_*) y no la ponga en el control de código fuente. Dado que se pasa al frontend, asegúrese de aplicar restricciones de referer o dominio para evitar daños si se hace pública.
VERIFICAR
Lo que deberías ver
Listo cuando aparezca el mapa de TomTom.
TomTomMap.tsxTypeScript · React
import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { TomTomDesign, TomTomMapView2D, useTomTomViewState } from '@mapconductor/react-for-tomtom';
const AMSTERDAM = createGeoPoint({ latitude: 52.3676, longitude: 4.9041 });
export function TomTomMap() {
const state = useTomTomViewState({
apiKey: import.meta.env.VITE_TOMTOM_API_KEY,
mapDesignType: TomTomDesign.Standard,
cameraPosition: createMapCameraPosition({ position: AMSTERDAM, zoom: 11 }),
});
const [markerState] = useState(() => createMarkerState({ id: 'ams', position: AMSTERDAM }));
return (
<TomTomMapView2D state={state} style={{ height: 480 }}>
<Marker state={markerState} />
</TomTomMapView2D>
);
}Diseños de mapa
TomTomDesign es compatible con los estilos de Orbis Maps. Hay pares claro y oscuro.
TomTomDesign
Notes
Standard / StandardLight / StandardDark
Estándar para visualización
Driving / DrivingLight / DrivingDark
Para conducir
MonoLight / MonoDark
Un solo color. Diseñado como base para datos.
Satellite
Imágenes satelitales
Solución de problemas
El mapa se queda completamente en blanco
- Verifique que apiKey no sea una cadena vacía.
- Verifique que la clave se haya emitido para Orbis Maps.
El zoom difiere de otros proveedores
- El zoom de TomTom depende de la latitud. MapConductor usa la latitud de la cámara para convertir el zoom a un equivalente de Google.
Solo durante el desarrollo el mapa se inicializa dos veces
- React StrictMode ejecuta los effects dos veces. Cada proveedor detecta esto y descarta una de las instancias, por lo que no es necesario quitar StrictMode.
Siguiente
TomTomMapView es 3D, TomTomMapView2D es 2D. Ambos comparten el mismo objeto de estado.