react-here-map
v4.0.0
Published
React components for working with Here Maps API
Downloads
260
Readme
react-here-map
React components for rendering and working with Here Maps.
It simplifies the use of the Here Map JavaScript API with the help React components.
The components can be imported and easily rendered. It also comes with seamless configuration and modifications.
Demo
Installation
Using NPM:
npm i --save react-here-map
Using Yarn:
yarn add react-here-map
General Usage
import React from "react";
import ReactDOM from "react-dom";
import HPlatform, { HMap, HMapCircle } from "react-here-map";
const points = [
{ lat: 52.5309825, lng: 13.3845921 },
{ lat: 52.5311923, lng: 13.3853495 },
{ lat: 52.5313532, lng: 13.3861756 },
{ lat: 52.5315142, lng: 13.3872163 },
{ lat: 52.5316215, lng: 13.3885574 },
{ lat: 52.5320399, lng: 13.3925807 },
{ lat: 52.5321472, lng: 13.3935785 },
];
ReactDOM.render(
<HPlatform
options={{
apiKey: 'TIAGlD6jic7l9Aa8Of8IFxo3EUemmcZlHm_agfAm6Ew',
appId: 'EF8K24SYpkpXUO9rkbfA',
includePlaces: false,
includeUI: true,
interactive: true,
version: 'v3/3.1'
}}
>
<HMap
options={{
center: {
lat: 52.5309825,
lng: 13.3845921
}
}}
style={{
height: '480px',
width: '100%'
}}
useEvents
>
<HMapCircle
coords={{
lat: 52.5309825,
lng: 13.3845921
}}
events={{
pointerdown: function noRefCheck(){},
pointerenter: function noRefCheck(){},
pointerleave: function noRefCheck(){},
pointermove: function noRefCheck(){}
}}
options={{
style: {
fillColor: 'rgba(0, 128, 0, 0.7)',
lineWidth: 4,
strokeColor: 'rgba(55, 85, 170, 0.6)'
}
}}
radius={10000}
setVisibility
zoom={8}
/>
</HMap>
</HPlatform>,
document.getElementById("app")
);
CHANGES
06/05/2020
- Includes support for V3.1 API_KEY
Contributions
See the TODO.MD
Licence
MIT