MapConductorHERE setup
How to use HERE on the Web through MapConductor. The HERE Maps API for JavaScript comes from a CDN rather than npm, and you construct the H.service.Platform yourself and hand it to the view.
Before you start
Install
The package does not bundle HERE's JS API — it uses the H global that your page loads.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-hereLoad HERE's JS API
Load it from the CDN with script tags, exactly as HERE's own quick-start does. @mapconductor/react-for-here expects the H global they expose.
<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" />
Build the platform and hand it to the view
For HERE the key goes into H.service.Platform, not the state hook. Construct the platform with your own credentials and pass it to the view's platform prop — wrap it in useMemo so it survives re-renders.
const platform = useMemo(
() => new H.service.Platform({ apikey: import.meta.env.VITE_HERE_API_KEY }),
[],
);
<HereMapView2D state={state} platform={platform}>{children}</HereMapView2D>VERIFY
What you should see
The HERE map rendering means you are done. The Web HERE provider is 2D only.
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>
);
}Map designs
HereMapDesign maps onto HERE's map schemes.
Troubleshooting
H is undefined
- Check the script tags in index.html load, and in the right order: core → core-legacy → service → ui → mapevents.
- If you server-render, make sure the platform is only constructed on the client.
The map does not appear
- Check the apikey you passed to H.service.Platform.
Switching providers throws a hook-order error
- React will not let the hook call order change. Make one small component per provider that calls its own hook — that is exactly how the sample app's providers/ directory is laid out.
Next
For large marker sets, pass markerTilingOptions — static markers are then drawn together as a raster overlay.