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

``bash
npm install --save here-maps-react
`

Usage

$3

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

class Map extends React.Component {
render() {
return (
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 |

$3

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

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

)
}
}
`

$3

| 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 |

$3

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

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


shape={this.state.shape}
strokeColor="#48dad0"
lineWidth={4}
/>

)
}
}
``

#### 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