@wolfmatrix/react-here-maps

React Here Map

$3

First, install library
``
npm install --save @wolfmatrix/react-here-maps
yarn add @wolfmatrix/react-here-maps
`

$3

#### Map

#### Example

`js
import { HereMap } from "@wolfmatrix/react-here-maps";
export default class Map extends Component {
render() {
return (
initialCenter={{ lat: 27.710769, lng: 85.31014 }}
appConfig={{
appId: "",
appCode: ""
}}
/>
);
}
}
`
#### Addtional Map Props

zoom : This props sets the zoom level of the map. Every zoom level represents a different scale. The map at zoom level 2 is twice as large as the map at zoom level 1.

initialCenter : This props sets the center of the map.

style : This props takes CSS style object, commonly width and height.
`css
const style = {
width: '100%',
height: '100vh'
}
`

liveTrafficEnable : This props displayed traffic information on the map.

setMinZoomOut : This props sets the minimum zoom level at which the given layer provides content.

appConfig : This props contains `appId` and `appCode` as a object.

#### Configuration

| Property | Default | Option | Example |
| ------------- |-----------|---------|---------|
| zoom | - | integer | ` zoom={10} `|
| initialCenter | -| object|` initialCenter={{ lat: 27.710769, lng: 85.31014 }} `|
| style | - | object |` style={{ width: "100%",height: "100vh"}} `|
| liveTrafficEnable| false| boolean| ` liveTrafficeEnable={true} `|
| setMinZoomOut | - | integer|` setMinZoomOut={10} `|
| appConfig | - | object|` appConfig={{appId="", appCode=""}} `|


#### Circle






#### Example

`js
import { HereMap, Circle } from "@wolfmatrix/react-here-maps";

const circleProps = [
{
lat: 27.710769,
lng: 85.31014,
radius: 200,
style: {
strokeColor: "rgba(55, 85, 170, 0.2)",
lineWidth: 1,
fillColor: "rgba(255, 0, 0, 0.3)"
}
},
{
lat: 27.7,
lng: 85.312,
radius: 300,
style: {
strokeColor: "rgba(55, 85, 170, 0.2)",
lineWidth: 1,
fillColor: "rgba(35, 19, 250, 0.3)"
}
},
{
lat: 27.717,
lng: 85.312,
radius: 300,
style: {
strokeColor: "rgba(55, 85, 170, 0.2)",
lineWidth: 1,
fillColor: "rgba(26, 243, 40, 0.3)"
}
}
];
export default class Circle extends Component {
render() {
return (
zoom={14}
initialCenter={{ lat: 27.710769, lng: 85.31014 }}
appConfig={{
appId: "",
appCode: ""
}}
>


);
}
}
`

#### Additional Circle Props

circleProps : This props sets geopraphical center,radius of circle & style of circle.

bounds : This props adjust the center and zoom of the map.

#### Configuration

| Property | Default | Option |
| ------------- |-----------|---------|
| circleProps | - | Array |
| bounds | false| object|


#### Marker






#### Example

`js
import { HereMap, Marker } from "@wolfmatrix/react-here-maps";
const markerProps = [
{
lat: 27.710769,
lng: 85.31014,
title: "Kathmandu"
img: "https://lh4.ggpht.com/Tr5sntMif9qOPrKV_UVl7K8A_V3xQDgA7Sw_qweLUFlg76d_vGFA7q1xIKZ6IcmeGqg=w40"
},
{
lat: 22.710769,
lng: 85.31014
}
];
const style = {
fontSize: "10px"
};
export default class Marker extends Component {
render() {
return (
zoom={10}
initialCenter={{ lat: 27.710769, lng: 85.31014 }}
appConfig={{
appId: "",
appCode: ""
}}
>


);
}
}
`

#### Addtional Marker Props

markerProps : This props sets geopraphical center,bubble info,image in marker.

bounds : This props adjust the center and zoom of the map.

#### Configuration

| Property | Default | Option |
| ------------- |-----------|---------|
| markerProps | - | Array |
| bounds | false| object|


#### Marker with Cirlce






#### Example

`js
import { HereMap, Marker,Circle } from "@wolfmatrix/react-here-maps";

const markerProps = [
{
lat: 27.710769,
lng: 85.31014,
img:
"https://lh4.ggpht.com/Tr5sntMif9qOPrKV_UVl7K8A_V3xQDgA7Sw_qweLUFlg76d_vGFA7q1xIKZ6IcmeGqg=w50"
},
{
lat: 27.58287,
lng: 85.50972,
}
];
const circleProps = [
{
lat: 27.710769,
lng: 85.31014,
radius: 9000,
style: {
strokeColor: "rgba(55, 85, 170, 0.2)",
lineWidth: 1,
fillColor: "rgba(255, 0, 0, 0.3)"
}
},
{
lat: 27.58287,
lng: 85.50972,
radius: 4000,
style: {
strokeColor: "rgba(55, 85, 170, 0.2)",
lineWidth: 1,
fillColor: "rgba(35, 19, 250, 0.3)"
}
}
];
export default class MarkerWithCircle extends Component {
render() {
return (
zoom={10}
style={style}
initialCenter={{ lat: 27.710769, lng: 85.31014 }}
appConfig={{
appId: "",
appCode: ""
}}
>



);
}
}
``