HereMap

Main map container component with context provider

HereMap

The HereMap component is the main container for HERE Maps. It provides the map context to all child components through React Context.

Props

apikey · string · required

Your HERE Maps API key. Get one at developer.here.com

options · object

Map initialization options

Show options properties

center · { lat: number; lng: number }

Initial center coordinates of the map. Defaults to { lat: 0, lng: 0 }

zoom · number

Initial zoom level (0-22). Defaults to 10

engineType · 'P2D' | 'WEBGL'

Rendering engine type. Defaults to 'P2D'

mapStyle · string

Map style/theme. Defaults to "vector.normal.map"

Available styles:

• vector.normal.map - Standard vector map
• raster.satellite.map - Satellite imagery
• raster.terrain.map - Terrain view
• raster.normal.mapnight - Night mode

children · ReactNode

Child components (Markers, Polylines, Controls, etc.)

Basic Usage

import { HereMap } from '@rodrito/react-here-maps';

function App() {
  return (
    <div style={{ height: '500px', width: '100%' }}>
      <HereMap
        apikey="YOUR_API_KEY"
        options={{
          center: { lat: 52.52, lng: 13.405 },
          zoom: 12
        }}
      />
    </div>
  );
}

The container must have a defined height for the map to render properly.

Map Styles

Normal

<HereMap
  apikey={apiKey}
  mapStyle="vector.normal.map"
  options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}
/>

Satellite

<HereMap
  apikey={apiKey}
  mapStyle="raster.satellite.map"
  options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}
/>

Terrain

<HereMap
  apikey={apiKey}
  mapStyle="raster.terrain.map"
  options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}
/>

Night Mode

<HereMap
  apikey={apiKey}
  mapStyle="raster.normal.mapnight"
  options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}
/>

With Child Components

import { HereMap, Marker, Polyline, ZoomControl, ScaleBar } from '@rodrito/react-here-maps';

function CompleteMap() {
  return (
    <div style={{ height: '600px', width: '100%' }}>
      <HereMap
        apikey="YOUR_API_KEY"
        options={{
          center: { lat: 52.52, lng: 13.405 },
          zoom: 12
        }}
      >
        <Marker position={{ lat: 52.52, lng: 13.405 }} label="Berlin" />

        <Polyline
          points={[
            { lat: 52.52, lng: 13.405 },
            { lat: 52.53, lng: 13.415 }
          ]}
          options={{ style: { strokeColor: 'blue', lineWidth: 4 } }}
        />

        <ZoomControl alignment="right-top" />
        <ScaleBar alignment="bottom-right" />
      </HereMap>
    </div>
  );
}

Context Provider

The HereMap component provides a context that can be accessed by child components:

import { useMapContext } from '@rodrito/react-here-maps';

function CustomComponent() {
  const { map, platform, ui, behavior } = useMapContext();

  // Access map instance and other HERE Maps objects
  // ...

  return null;
}

Engine Types

P2D (Default)

2D rendering engine. Better performance on older devices.

WEBGL

WebGL rendering engine. Better performance with complex visualizations.

// Use WebGL engine
<HereMap
  apikey={apiKey}
  options={{
    center: { lat: 40.7128, lng: -74.0060 },
    zoom: 12,
    engineType: 'WEBGL'
  }}
/>

See Also

Map Context

Learn about the context system

Marker

Add markers to the map

Controls

Add interactive controls