English | 日本語 | Español (Latinoamérica)

@mapconductor/react-for-here

HERE Maps API for JavaScript provider for the MapConductor React SDK. Renders a HERE map through MapConductor's provider-independent camera, marker, and overlay API, so the same application code can also run on Google Maps, MapLibre, Mapbox, Leaflet, OpenLayers, ArcGIS, or Cesium.

Installation

npm install @mapconductor/react-for-here

@mapconductor/js-sdk-core and @mapconductor/js-sdk-react (used for markers and other shared components) are installed automatically as dependencies. Your code imports from both directly, so with pnpm's strict (isolated) node_modules — or whenever you prefer to declare everything you import — install them explicitly instead:

npm install @mapconductor/react-for-here @mapconductor/js-sdk-core @mapconductor/js-sdk-react

Loading the HERE Maps API

The HERE Maps API for JavaScript is not distributed via npm. Load it from HERE's CDN in your host page; this package expects the H global those scripts expose:

<scriptsrc="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script><scriptsrc="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"></script><scriptsrc="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script><scriptsrc="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script><scriptsrc="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script><linkrel="stylesheet" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />

You also need an API key from the HERE platform.

Hello Map tutorial

The simplest possible map app, built with MapConductor + HERE: click the marker and a "Hello, MapConductor" bubble pops up. You can build it in the 5 steps below. HERE needs its API scripts loaded and an API key, so make sure you've completed the CDN setup above before you start.

Step 1: Create a React project

Create a React + TypeScript project with Vite.

npm create vite@latest hello-map -- --template react-ts
cd hello-map
npm install
npm run dev

Step 2: Install MapConductor (HERE)

Install the package needed to show a map. We use HERE here, but you can use other map modules too.

npm install @mapconductor/react-for-here

• @mapconductor/react-for-here — components / hooks for HERE
• @mapconductor/js-sdk-react / @mapconductor/js-sdk-core are installed automatically as dependencies.

Step 3: Show the map

Create the map state with useHereViewState and render it with <HereMapView2D>. HERE also needs a platform (an H.service.Platform) instance, so create that too. Give the outer element a height to make it full-screen.

import{useMemo}from'react';import{HereMapDesign,HereMapView2D,useHereViewState,}from'@mapconductor/react-for-here';import{createGeoPoint,createMapCameraPosition}from'@mapconductor/js-sdk-core';// Your own key. Read it from your environment however your build tool does// it, and keep it out of source control.constHERE_API_KEY='…';constTOKYO=createGeoPoint({latitude: 35.6812,longitude: 139.7671});constINITIAL_CAMERA=createMapCameraPosition({position: TOKYO,zoom: 14});exportdefaultfunctionApp(){constmapViewState=useHereViewState({mapDesignType: HereMapDesign.NormalDay,cameraPosition: INITIAL_CAMERA,});// Create the platform yourself so your app keeps control of HERE credentials.constplatform=useMemo(()=>newH.service.Platform({apikey: HERE_API_KEY}),[],);return(<divstyle={{width: '100vw',height: '100vh'}}><HereMapView2Dstate={mapViewState}platform={platform}/></div>);}

Step 4: Place a marker

Create the marker state with createMarkerState and register it with <Marker>. Write overlays as child elements of the map component.

import{useMemo}from'react';import{createMarkerState}from'@mapconductor/js-sdk-core';import{Marker}from'@mapconductor/js-sdk-react';// ...inside App...constmarker=useMemo(()=>createMarkerState({id: 'hello',position: TOKYO}),[],);// ...inside return...<HereMapView2Dstate={mapViewState}platform={platform}><Markerstate={marker}/></HereMapView2D>

Step 5: Show an InfoBubble on click

Track the selected state with useState, set it to true in the marker's onClick, and render <InfoBubble> only while selected. This is the finished app.

import{useMemo,useState}from'react';import{HereMapDesign,HereMapView2D,useHereViewState,}from'@mapconductor/react-for-here';import{createGeoPoint,createMapCameraPosition,createMarkerState,}from'@mapconductor/js-sdk-core';import{InfoBubble,Marker}from'@mapconductor/js-sdk-react';// Your own key. Read it from your environment however your build tool does// it, and keep it out of source control.constHERE_API_KEY='…';constTOKYO=createGeoPoint({latitude: 35.6812,longitude: 139.7671});constINITIAL_CAMERA=createMapCameraPosition({position: TOKYO,zoom: 14});exportdefaultfunctionApp(){constmapViewState=useHereViewState({mapDesignType: HereMapDesign.NormalDay,cameraPosition: INITIAL_CAMERA,});// Create the platform yourself so your app keeps control of HERE credentials.constplatform=useMemo(()=>newH.service.Platform({apikey: HERE_API_KEY}),[],);const[selected,setSelected]=useState(false);constmarker=useMemo(()=>createMarkerState({id: 'hello',position: TOKYO,onClick: ()=>setSelected(true),}),[],);return(<divstyle={{width: '100vw',height: '100vh'}}><HereMapView2Dstate={mapViewState}platform={platform}onMapClick={()=>setSelected(false)}><Markerstate={marker}/>{selected&&(<InfoBubblemarker={marker}><divstyle={{padding: '8px 12px',fontWeight: 600}}>
Hello, MapConductor
</div></InfoBubble>)}</HereMapView2D></div>);}

Key points

• Coordinates, cameras and markers are created with js-sdk-core functions (provider-independent).
• The map component and hooks come from react-for-here (provider-specific).
• Write overlays as child elements of the map component.
• Control show / hide with React useState.

Related packages

• @mapconductor/js-sdk-core — geometry, camera, and state primitives
• @mapconductor/js-sdk-react — shared Marker, Markers, shapes, and info bubbles