RC Here Maps
Here Maps provide amazing api's to add map using Javascript. This is a React wrapper for Here Maps API. Right now, this library gives functionalities like creating map and adding objects like Marker, Polygon, Polyline, Rectangle and Circle on top of it.
How to install it
It's pretty easy to install this library in your react app,
npm install rc-here-maps
Prerequisite
Copy the following snippet and paste it in your html file,
<link href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" rel="stylesheet">
<script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>Demo
You can see the demo of this library here
Basic Usage
import React, { Component } from 'react';
import { HereMap, Marker, Polyline, Polygon, Circle, Rectangle, PathFinder } from 'rc-here-maps';
class MapDemo extends Component {
constructor(props) {
super(props);
this.center = {
lat: 52.51,
lng: 13.4,
};
this.bounds = {
north: 53.1,
south: 13.1,
east: 43.1,
west: 40.1,
};
}
onPolylineDrawn = () => {
console.log('polyline drawn');
};
onPolygonDrawn = () => {
console.log('Polygon drawn');
};
onCircleDrawn = () => {
console.log('circle drawn');
};
onRectangleDrawn = () => {
console.log('rectangle drawn');
};
render() {
return (
<div className="map-wrapper">
<HereMap appId="YYYY" appCode="XXXX" useHTTPS={false} center={this.center}>
<Marker lat={52.21} lng={48.12}>
This is a sample marker
</Marker>
<Polyline
dataPoints={[52, 48, 100, 42, 77, 100]}
strokeColor="#HexCode"
lineWidth={3}
onPolylineDrawn={this.onPolylineDrawn}
/>
<Polygon
dataPoints={[52, 48, 100, 42, 77, 100]}
fillColor="#HexCode"
strokeColor="#HexCode"
lineWidth={3}
onPolylineDrawn={this.onPolygonDrawn}
/>
<Circle
center={this.center}
radius={1000}
fillColor="#HexCode"
strokeColor="#HexCode"
onCircleDrawn={this.onCircleDrawn}
/>
<Rectangle
bounds={this.bounds}
fillColor="#HexCode"
strokeColor="#HexCode"
onRectangleDrawn={this.onRectangleDrawn}
/>
<PathFinder waypoints={[{ lat: 52.516, lng: 13.3779 }, { lat: 52.5206, lng: 13.3862 }]} />
<PathFinder
waypoints={[{ lat: 52.516, lng: 13.3779 }, { lat: 52.518, lng: 13.4062 }, { lat: 52.519, lng: 13.4162 }]}
style={{
lineWidth: 10,
strokeColor: 'rgba(220, 220, 0, 0.9)',
}}
/>
</HereMap>
</div>
);
}
}
export default MapDemo;Documentation
You can view the documentation here
Feel free to contribute to this repo by raising PR.