naazim / here-maps-react

React components library for HERE Maps

here-maps-react

React components library for HERE Maps

Easily integrate HERE Maps into your app with a set of React components.

Full TypeScript support!

Tree shakeable!

Install

npm install --save here-maps-react

Usage

Map

import React from 'react'
import HEREMap from 'here-maps-react'

class Map extends React.Component {
  render() {
    return (
      <HEREMap
        appId="my_app_id"
        appCode="my_app_code"
        center={{ lat: -12.0464, lng: -77.0428 }}
        zoom={12}
      />
    )
  }
}

Props

Property	Type	Optional	Description
appId	string	false	The App Id you got after registering to HERE
appCode	string	false	The App Code you got after registering to HERE
center	object	true	Initial map coordinates { lat, lng }
zoom	number	true	Initial zoom level
animateCenter	boolean	true	Animate center prop change
animateZoom	boolean	true	Animate zoom level change
hidpi	boolean	true	Whether to use high quality map tiles or not
interactive	boolean	true	Whether to use static or interactive maps
secure	boolean	true	If true, here-maps-react will load the HTTPS HERE api
setLayer	object	true	An object that can be used to set the map style { layer, mapType }. You can find available configurations HERE

Marker

import React from 'react'
import HEREMap, { Marker } from 'here-maps-react'

class Map extends React.Component {
  render() {
    return (
      <HEREMap
        appId="my_app_id"
        appCode="my_app_code"
        center={{ lat: -12.0464, lng: -77.0428 }}
        zoom={12}
      >
        <Marker
          lat={-12.1199408}
          lng={-77.037241}
          draggable
          onDragEnd={e => {...}}
        />
      </HEREMap>
    )
  }
}

Props

Property	Type	Optional	Description
bitmap	string	true	An image to be used as a marker
lat	number	false	The latitude to place the marker
lng	number	false	The longitude to place the marker
children	JSX.Element	true	You can use markup to put elements on the map
draggable	boolean	true	Flag to enable drag events on the marker
onDragStart	(event) => void	true	Function to listen to HERE's dragstart event
onDrag	(event) => void	true	Function to listen to HERE's drag event
onDragEnd	(event) => void	true	Function to listen to HERE's dragend event

RouteLine

import React from 'react'
import HEREMap, { Marker, RouteLine } from 'here-maps-react'

class Map extends React.Component {
  render() {
    return (
      <HEREMap
        appId="my_app_id"
        appCode="my_app_code"
        center={{ lat: -12.0464, lng: -77.0428 }}
        zoom={12}
      >
        <Marker lat={-12.1199408} lng={-77.037241} />
        <Marker lat={-12.1261171} lng={-77.02060549999999} />
        <RouteLine
          shape={this.state.shape}
          strokeColor="#48dad0"
          lineWidth={4}
        />
      </HEREMap>
    )
  }
}

Props

Property	Type	Optional	Description
shape	string[]	false	An array of latitudes and longitudes obtained using the HERE Routing API
strokeColor	number	true	An optional (HEX, RGB, HSL...) color
lineWidth	number	true	A number representing the width of the route line

This library is based on the original react-here-maps, updated to conform to React StrictMode, as well as, adding new components.

License

MIT © ordazgustavo