React.js HERE Maps component
npm install @impargo/react-here-mapsreact-here-maps
==============
React Wrapper for the HERE Maps API for JavaScript (v3.1)
Dependencies
--------------
The module is dependant on @here/maps-api-for-javascript packaged and hosted by HERE. To make sure it installs correctly in your environment, make sure you have the correct registry URL configured.
- Run this
``
npm config set @here:registry https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/
- Or, add this to your .npmrc
@here:registry=https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/
Quick Start
--------------
Declare your HERE Maps component using the following React syntax:
`tsx
import HEREMap from 'react-here-maps';
export const Map = () => {
return (
appCode="{your app_code}"
center={{ lat: 0, lng: 0 }}
zoom={14}
/>
)
}
`
If you would like to display a marker as well, you can do so as follows:
`tsx
import HEREMap, { Marker } from 'react-here-maps';
const CENTER = { lat: 0, lng: 0 };
export const Map = () => {
return (
appCode="{your app_code}"
center={CENTER}
zoom={14}
>
)
}
`
Supported Components
--------------
> This entire project is written in TypeScript, so refer to the interfaces of each of the supported components in the code.
from HERE.#### Supported layers
- Truck restrictions
- Traffic
- Satellite
- Congestion / environmental zones
- Marker: can be rendered as a child to HEREMap to show a marker on the map.
$3
Can be used as a child to the map component to render a marker on the map. The content of the marker is controlled either via children, or the bitmap prop.#### children
Any children passed to the marker will be rendered as static markup and used as a DomIcon.
$3
The bitmap is used to create an Icon that is used as the marker. This is usually more performant than passing the children prop. Specially that the icons are cached.> If neither
children nor bitmap are supplied, a default icon is used.> Supports event handling via callbacks
onTap, onPointerLeave, onPointerMove, onPointerEnter, onDragStart, onDrag, and onDragEnd.$3
This component clusters multiple nearby markers. You can supply different icons for the clusters and for the individual data points via getBitmapForCluster and getBitmapForPoint respectively. The clustering behavior is controlled via clusteringOptions.You can also provide callbacks for clicking on the cluster icon or individual markers.
$3
Renders a polyline on the map by passing an array of { lat, lng } points.> Supports event handling via callbacks
onTap, onPointerLeave, onPointerMove, onPointerEnter, onDragStart, onDrag, and onDragEnd.#### Direction Arrows
In the HERE HARP Engine, the route direction arrows need to be rendered separately, by using an additional
Polyline component than the route itself.For the arrows to show up, the style prop in the
PolyLine needs to include a strokeColor, lineWidth, lineDash and a lineDashImage.-
lineDash is a tuple indicating the painted and non painted segments. The painted segment cannot be zero. Ex: [1, 5].-
lineDashImage can be any HTMLImageElement object. You can also used the H.map.SpatialStyle.DashImage.ARROW bundled by HERE.For an example check the testbench.
Publishing a Pre-release Package Version
--------------
To generate a pre-release package from the changes in a pull request, add a
/publish` comment in the PR. This will publish a new package version and add a comment in the PR with the details of the published version.
Acknowledgment
--------------
This project was originally forked from https://github.com/Josh-ES/react-here-maps, however, this project has since deviated significantly from the original project after several rewrites to support newer HERE APIs and React versions.
Credit is due to the original creator and contributors.
The original fork can be found here.