MapConductorConfigurar HERE
Instrucciones para usar HERE en la web a través de MapConductor. HERE Maps API for JavaScript se carga desde CDN en lugar de npm; cree H.service.Platform en la aplicación y páselo a la vista.
Antes de empezar
Instalar
El paquete mismo no incluye la JS API de HERE. Se usa el global H cargado en el lado de la página.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-hereCargar JS API de HERE
Al igual que el inicio rápido de HERE, se carga con etiqueta script desde CDN. @mapconductor/react-for-here asume el global H que ellos publican.
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script> <script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"></script> <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script> <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script> <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script> <link rel="stylesheet" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
Crear Platform y pasarla a la vista
En HERE, pasa la clave a H.service.Platform, no a un hook de estado. Crea Platform con credenciales de la app y pásala a las props platform de la vista. Si la creas con useMemo, no se recrea en cada rerender.
const platform = useMemo(
() => new H.service.Platform({ apikey: import.meta.env.VITE_HERE_API_KEY }),
[],
);
<HereMapView2D state={state} platform={platform}>{children}</HereMapView2D>VERIFICAR
Lo que deberías ver
Listo cuando aparezca el mapa de HERE. El proveedor web de HERE solo admite vista 2D.
import { useMemo, useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { HereMapDesign, HereMapView2D, useHereViewState } from '@mapconductor/react-for-here';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
export function HereMap() {
const state = useHereViewState({
mapDesignType: HereMapDesign.NormalDay,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});
// HERE Maps API for JavaScript is loaded from the CDN (see index.html);
// the platform must be created with the host page's own credentials.
const platform = useMemo(
() => new H.service.Platform({ apikey: import.meta.env.VITE_HERE_API_KEY }),
[],
);
const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));
return (
<HereMapView2D state={state} platform={platform}>
<Marker state={markerState} />
</HereMapView2D>
);
}Diseños de mapa
HereMapDesign admite esquemas de mapas de HERE.
Solución de problemas
H queda undefined
- Verifica que la etiqueta script en index.html esté cargada y que el orden sea correcto (core → core-legacy → service → ui → mapevents).
- Si haces SSR, realiza la creación de Platform solo en el lado del cliente.
El mapa no aparece
- Verifica que el apikey pasado a H.service.Platform sea correcto.
Al cambiar de proveedor aparece un error de orden de hooks
- React no puede cambiar el orden de llamadas a hooks. Crea un componente pequeño por proveedor y llama al hook de ese proveedor dentro. El directorio providers/ de la app de ejemplo tiene esta estructura.
Siguiente
Si hay muchos marcadores, pasa markerTilingOptions para dibujar conjuntos estáticos de marcadores como superposición raster.