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, HMapPolyLine } 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
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
includeUI
includePlaces
>
<HMap
style={{
height: "400px",
width: "800px",
}}
mapOptions={{ center: { lat: 52.5321472, lng: 13.3935785 }, zoom: 10 }}
>
<HMapPolyLine points={points} />
</HMap>
</HPlatform>,
document.getElementById("app")
);
Docs
The default export from this library instantiates the Here Maps platform, which is required before initialization of other libraries of the Here Map Javascript SDK.
The platform is expected to be a direct parent of all other supported components.
Interesting components are also exported, they can be customized using supported props.
Components
- HPlatform - Platform initializer. All major components should be its direct child.
- HMap - Default export from this module, should be used as a parent for other components
- HMapPolyLine - Draws a polyline on the map. A direct child of the map
- HMapPolygon - Draws a polygon on the map. A direct child of the map
- HMapMarker - Puts a marker on the map. A direct child of the map
- HMapCircle - Draws a circle on the map. A direct child of the map
- HMapRectangle - Draws a rectangle on the map. A direct child of the map
- Event Handling - Handling of user evens with
HMap
and it objects child of the map - HMapGeoCode - Turns a physical address to a point on the map
- HMapRoute - Defines a route to locate two points. A direct child of the map
- HMapLayer - Adds additional informational layer on the map. A direct child of the map
Usage in details
HPlatform
A container for all of the components in this library. Generates a platform that are injected into all of its direct children.
import HPlatform, { HMap, HMapPolyLine } from "react-here-map";
<HPlatform
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
includeUI
includePlaces
>
{/*Children come in here*/}
</HPlatform>;
All direct children of HPlatform
component receives:
- platform A reference to H.service.platform Docs
- options A reference to the options used to bootstrap the scripts. See here:
props
Props were determined by the options required for initializing a platform.
- version PropTypes.string - One of the supported version. Defaults to
'v3/3.0'
- app_id PropTypes.string.isRequired - Application ID from account dashboard
- app_code PropTypes.string.isRequired - Application Code from account dashboard
- app_code PropTypes.string.isRequired - API KEY for usage with version 3.1Code from account dashboard
- mapType PropTypes.string - One of the above types accessed as a dot prop.
Default
'normal.map'
- interactive PropTypes.bool - Makes the map react to events. Needed for event handling
- includeUI PropTypes.bool - Add the UI controls
- includePlaces PropTypes.bool - Add the module for working with places
- useCIT PropTypes.boolean - Default to
true
- useHTTPS PropTypes.boolean - Load the library using HTTPS. Default to
true
HMap
Displays a Map for the types passed as props or default normal.map
Map types
{
normal: ["map", "traffic", "panorama", "transit", "base", "xbase", "labels"],
satellite: ["xbase", "base", "map", "traffic", "panorama", "labels"],
terrain: ["xbase", "base", "map", "traffic", "panorama", "labels"],
incidents: true
}
All direct children of HMap
component receives:
- map A reference to the map object used to create the visual map. Docs
- platform A reference to H.service.platform Docs
- ui A reference to the ui object that does inclusion of ui elements. Docs
- __options A reference to the options merged with writable defaults used in bootsrapping the map and its items
In any case you wish to render a supported component of this library outside the context of the map, make sure to render in a place where the above props can be passed explicitly to avoid nasty, unfriendly errors.
In some cases as we will soon see, there is an option for passing a custom component with more enhancements (defined by the programmer), these props are received as first class directly from the containing parent and not from HMap, but still holds same object's reference
props
- mapEvents PropTypes.object - officially supported events
- mapOptions PropTypes.object - officially supported options
import HPlatform, { HMap, HMapPolyLine } from "react-here-map";
<HPlatform
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
includeUI
includePlaces
>
<HMap
style={{
height: "400px",
width: "800px",
}}
mapOptions={{ center: { lat: 52.5321472, lng: 13.3935785 } }}
/>
</HPlatform>;
HMapPolyLine
Draws a polyline on the map
Props
- points: PropTypes.array.isRequired - Array of objects containing lat and lng
- options: PropTypes.object - Officially supported options
- setViewBounds: PropTypes.bool - Makes the line centered in the container.
Default
true
Usage
import HPlatform, { HMap, HMapPolyLine } 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 },
];
<HPlatform
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
includeUI
includePlaces
>
<HMap
style={{
height: "400px",
width: "800px",
}}
mapOptions={{ center: { lat: 52.5321472, lng: 13.3935785 } }}
>
<HMapPolyLine points={points} />
</HMap>
</HPlatform>;
HMapPolygon
Draws a polygon on the map
Props
- points: PropTypes.array.isRequired - Array containing points or an array of lat,lng string separated by comma.
- options: PropTypes.object - options for the polygon. Docs
Usage
import HPlatform, { HMap, HMapPolygon } from "react-here-map";
const polygonPoints = [52, 13, 100, 48, 2, 100, 48, 16, 100, 52, 13, 100];
const polygonOptions = {
style: {
fillColor: "#FFFFCC",
strokeColor: "#829",
lineWidth: 8,
},
};
<HPlatform
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
includeUI
includePlaces
>
<HMap
style={{
height: "400px",
width: "800px",
}}
mapOptions={{ center: { lat: 52.5321472, lng: 13.3935785 } }}
>
<HMapPolygon
points={polygonPoints}
options={polygonOptions}
setViewBounds="true"
/>
</HMap>
</HPlatform>;
HMapMarker
Puts a marker on the map
Props
- coords: PropTypes.object.isRequired Object with lat and lng for the marker
- icon: PropTypes.any.isRequired Icon for the marker
- options PropTypes.object Officially documented Options
- type: PropTypes.string One of
undefined
|DOM
. Defaultundefined
- setViewBounds: PropTypes.bool Centers the map with the marker. Default
true
Usage
import HPlatform, { HMap, HMapMarker } from "react-here-map";
const coords = { lat: 52.5309825, lng: 13.3845921 };
const icon =
'<svg width="24" height="24" ' +
'xmlns="http://www.w3.org/2000/svg">' +
'<rect stroke="white" fill="#1b468d" x="1" y="1" width="22" ' +
'height="22" /><text x="12" y="18" font-size="12pt" ' +
'font-family="Arial" font-weight="bold" text-anchor="middle" ' +
'fill="white">H</text></svg>';
<HPlatform
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
includeUI
includePlaces
>
<HMap
style={{
height: "400px",
width: "800px",
}}
mapOptions={{ center: { lat: 52.5321472, lng: 13.3935785 } }}
>
<HMapMarker coords={coords} icon={icon} />
</HMap>
</HPlatform>;
HMapCircle
Puts a circle on the map
Props
- coords: PropTypes.object.isRequired - Object with lat and lng for the circle center point on the map
- options: PropTypes.object - Options for the circle. Docs
- radius: PropTypes.number - How large should one edge of the circle to the center point
- setViewBounds: PropTypes.bool - Centers the map with the circle. Default
true
Usage
import HPlatform, { HMap, HMapCircle } from "react-here-map";
const circleCoords = { lat: 52.5309825, lng: 13.3845921 };
const circleOptions = {
style: {
strokeColor: "rgba(55, 85, 170, 0.6)", // Color of the perimeter
lineWidth: 2,
fillColor: "rgba(0, 128, 0, 0.7)", // Color of the circle
},
};
<HPlatform
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
includeUI
includePlaces
>
<HMap
style={{
height: "400px",
width: "800px",
}}
mapOptions={{ center: { lat: 52.5321472, lng: 13.3935785 } }}
>
<HMapCircle coords={circleCoords} radius={10000} options={circleOptions} />
</HMap>
</HPlatform>;
HMapRectangle
Puts a rectangle on the map
Props
- points: PropTypes.array.isRequired - Four element array of point defining the boundaries of the rectangle
- options: PropTypes.object - Options for the rectangle. Docs
- setViewBounds: PropTypes.bool - Centers the map with the circle. Default
true
Usage
import HPlatform, { HMap, HMapRectangle } from "react-here-map";
const points = [53.1, 13.1, 43.1, 40.1];
const rectangleOptions = {
style: {
fillColor: "#FFFFCC",
strokeColor: "#E8FA75",
lineWidth: 8,
},
};
<HPlatform
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
includeUI
includePlaces
>
<HMap
style={{
height: "400px",
width: "800px",
}}
mapOptions={{ center: { lat: 52.5321472, lng: 13.3935785 } }}
>
<HMapRectangle points={points} options={rectangleOptions} />
</HMap>
</HPlatform>;
Event Handling
This section demonstrates how to use an event with either HMap
component or a
map object.
HMap Event Handling
No additional prop is required aside from those requiredby HMap
. Below is a
working code for a pointerup
event:
To use an event, you have to pass interactive to the HPlatform
and pass in
useEvents
and mapEvents
props to the HMap
like this:
import HPlatform, { HMap, HMapPolyLine } from "react-here-map";
<HPlatform
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
interactive // Required for events
includeUI
includePlaces
>
<HMap
style={{
height: "400px",
width: "800px",
}}
mapOptions={{ center: { lat: 52.5321472, lng: 13.3935785 } }}
useEvents // Required for events
mapEvents={{ pointerdown: (e) => console.log("Map Pointer Down", e) }} // event handlers
/>
</HPlatform>;
Map Object event handling
All map object handles events the same way. Since all map objects are direct
children of HMap
and receives HPlatform
information, useEvents
props in
the HMap
tells the map objects to initialize events. So, a single useEvents
props is sufficient for all the children. In case that only a map object is
expected to handle events, useEvents
can be passed to the object which will
initialize events defined for that object and not on the rest of the other
sibling objects of the same HMap
parent.
Usage
import HPlatform, {
HMap,
HMapCircle,
HMapMarker,
HMapPolygon,
HMapPolyLine,
HMapRectangle,
} from "react-here-map";
const rectanglePoints = [51.5072, 0, 48.8567, 2.3508];
const rectangleOptions = {
style: {
fillColor: "#FFFFCC",
strokeColor: "#E8FA75",
lineWidth: 8,
},
};
const circleCoords = { lat: 52.3667, lng: 4.9 };
const circleOptions = {
style: {
strokeColor: "rgba(55, 85, 170, 0.6)", // Color of the perimeter
lineWidth: 2,
fillColor: "rgba(0, 128, 0, 0.7)", // Color of the circle
},
};
const polyLinePoints = [
{ lat: 52.5167, lng: 13.3833 },
{ lat: 50.0833, lng: 14.4167 },
{ lat: 52.2333, lng: 21.0167 },
];
const polygonPoints = [45.4667, 9.1833, 0, 48.1333, 11.566, 0, 50.08, 8.24, 0];
const polygonOptions = {
style: {
fillColor: "#FFFFCC",
strokeColor: "#829",
lineWidth: 8,
},
};
const markerCoords = { lat: 48.2, lng: 16.3667 };
const markerIcon =
'<svg width="24" height="24" ' +
'xmlns="http://www.w3.org/2000/svg">' +
'<rect stroke="white" fill="#1b468d" x="1" y="1" width="22" ' +
'height="22" /><text x="12" y="18" font-size="12pt" ' +
'font-family="Arial" font-weight="bold" text-anchor="middle" ' +
'fill="white">H</text></svg>';
<HPlatform
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
includeUI
interactive // Required for events
includePlaces
>
<HMap
style={{
height: "400px",
width: "800px",
}}
useEvents // Required for events
mapEvents={{ pointerdown: (e) => console.log("Map Pointer Down", e) }} // event handlers
mapOptions={{
center: { lat: 51, lng: 7 },
zoom: 5,
pixelRatio: window.devicePixelRatio || 1,
}}
>
<HMapCircle
coords={circleCoords}
radius={198000}
options={circleOptions}
objectEvents={{
pointerdown: (e) => console.log("Circle Pointer Down", e),
}}
/>
<HMapRectangle
points={rectanglePoints}
options={rectangleOptions}
objectEvents={{
pointerdown: (e) => console.log("Rectangle Pointer Down", e),
}}
/>
<HMapPolyLine
points={polyLinePoints}
objectEvents={{
pointerdown: (e) => console.log("Polyline Pointer Down", e),
}}
/>
<HMapPolygon
points={polygonPoints}
options={polygonOptions}
objectEvents={{
pointerdown: (e) => console.log("Polygon Pointer Down", e),
}}
/>
<HMapMarker
coords={markerCoords}
icon={markerIcon}
objectEvents={{
pointerdown: (e) => console.log("Marker Pointer Down", e),
}}
/>
</HMap>
</HPlatform>;
HMapGeoCode
This uses React Hooks. Ensure that your react installation supports The Hooks API
Props
- geoCodeParams: PropTypes.object - Depends on the type being used. Default params to be used when reverse and landmark are falsy, reverse params to be used when reverse is set to true, landmark params to be used when landmark is set to true
- children: PropTypes.element.isRequired - React Element that receives
map, platform, lat, lng
as props - reverse: PropTypes.bool - Should implement reverse geo coding
- landmark: PropTypes.bool - Should implement landmark geo coding
Usage
Address to positions
Converts an address to a position on the map
import HPlatform, { HMap, HMapGeoCode, HMapMarker } from "react-here-map";
const geoCodeParams = {
searchText: "200 S Mathilda Ave, Sunnyvale, CA",
};
const icon =
'<svg width="24" height="24" ' +
'xmlns="http://www.w3.org/2000/svg">' +
'<rect stroke="white" fill="#1b468d" x="1" y="1" width="22" ' +
'height="22" /><text x="12" y="18" font-size="12pt" ' +
'font-family="Arial" font-weight="bold" text-anchor="middle" ' +
'fill="white">H</text></svg>';
// Can render any map element, make sure to pass map and platform as props to the children to avoid unwarranted behavior
const GeoMarker = ({ map, platform, ui, lat, lng, key }) => (
<HMapMarker
coords={{ lat, lng }}
map={map}
platform={platform}
key={key}
icon={icon}
/>
);
// Child of HMapGeoCode receives same params as above.
<HPlatform
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
includeUI
includePlaces
>
<HMap
style={{
height: "400px",
width: "800px",
}}
mapOptions={{ center: { lat: 52.5321472, lng: 13.3935785 } }}
>
<HMapGeoCode geoCodeParams={geoCodeParams}>
<GeoMarker />
</HMapGeoCode>
</HMap>
</HPlatform>;
Position to address(es)
Converts a position to address(es) on the map
import HPlatform, { HMap, HMapGeoCode } from "react-here-map";
// Create the parameters for the reverse geocoding request:
const reverseGeoCodingParameters = {
prox: "52.5309,13.3847,150",
mode: "retrieveAddresses",
maxresults: 1,
};
// Can render any map element, make sure to pass map and platform as props to the children to avoid unwarranted behavior
const ReverseGeoMarker = ({ map, platform, ui, lat, lng, location, key }) => {
ui.addBubble(
new H.ui.InfoBubble(
{ lat, lng },
{ content: location.Location.Address.Label }
)
);
return null;
};
// Child of HMapGeoCode receives same params as above.
<HPlatform
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
includeUI
includePlaces
>
<HMap
style={{
height: "400px",
width: "800px",
}}
mapOptions={{ center: { lat: 52.5321472, lng: 13.3935785 } }}
>
<HMapGeoCode geoCodeParams={reverseGeoCodingParameters} reverse>
<ReverseGeoMarker />
</HMapGeoCode>
</HMap>
</HPlatform>;
Landmark Point
Locate landmark positions on the map
import HPlatform, { HMap, HMapGeoCode } from "react-here-map";
const LandmarkGeoMarker = ({
map,
platform,
ui,
lat,
lng,
location,
key,
_location,
}) => {
ui.addBubble(new H.ui.InfoBubble({ lat, lng }, { content: _location.Name }));
return null;
};
// Create the parameters for the landmark search request:
const landmarkSearchParameters = {
searchText: "TXL",
};
// Child of HMapGeoCode receives same params as above.
<HPlatform
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
includeUI
includePlaces
>
<HMap
style={{
height: "400px",
width: "800px",
}}
mapOptions={{ center: { lat: 52.5321472, lng: 13.3935785 } }}
>
<HMapGeoCode geoCodeParams={landmarkSearchParameters} landmark>
<LandmarkGeoMarker />
</HMapGeoCode>
</HMap>
</HPlatform>;
HMapRoute
This uses React Hooks. Ensure that your react installation supports Hooks API
Displaying route on the Map Using normal line
Shows path to between two points based on params
Props
- routeParams: PropTypes.object - Officially documented route params
- lineOptions: PropTypes.object - Officially supported poly line options
- icon: PropTypes.any - Icon to be used for the marker
- markerOptions: PropTypes.object - Officially supported marker Options
- children: PropTypes.element - React element that receives
map, platform, ui, route, key, routeShape
as props - renderDefaultLine: PropTypes.bool - Should use default renderer instead of a custom renderer as children
- isoLine: PropTypes.bool - Use IsoLine instead of a Polyline
Usages
Using the default renderer
import HPlatform, {
HMap,
HMapRoute,
HMapMarker,
HMapPolyLine,
} from "react-here-map";
// Create the parameters for the routing request:
var routeParams = {
// The routing mode:
mode: "fastest;car",
// The start point of the route:
waypoint0: "geo!50.1120423728813,8.68340740740811",
// The end point of the route:
waypoint1: "geo!52.5309916298853,13.3846220493377",
// To retrieve the shape of the route we choose the route
// representation mode 'display'
representation: "display",
};
const routeLineOptions = {
style: { strokeColor: "blue", lineWidth: 10 },
arrows: { fillColor: "white", frequency: 2, width: 0.8, length: 0.7 },
};
const icon =
'<svg width="24" height="24" ' +
'xmlns="http://www.w3.org/2000/svg">' +
'<rect stroke="white" fill="#1b468d" x="1" y="1" width="22" ' +
'height="22" /><text x="12" y="18" font-size="12pt" ' +
'font-family="Arial" font-weight="bold" text-anchor="middle" ' +
'fill="white">H</text></svg>';
// Handles manipulation of the path between the two points
const RouteMarker = ({ map, platform, ui, route, key, routeShape }) => {
// Retrieve the mapped positions of the requested waypoints:
const startPoint = route.waypoint[0].mappedPosition;
const endPoint = route.waypoint[1].mappedPosition;
// Create a marker for the start point:
const startMarker = { lat: startPoint.latitude, lng: startPoint.longitude };
// Create a marker for the end point:
const endMarker = { lat: endPoint.latitude, lng: endPoint.longitude };
return (
<React.Fragment>
<HMapPolyLine points={routeShape} map={map} setViewBounds />
<HMapMarker
coords={startMarker}
map={map}
platform={platform}
icon={icon}
setViewBounds
/>
<HMapMarker
coords={endMarker}
map={map}
platform={platform}
icon={icon}
setViewBounds={false}
/>
</React.Fragment>
);
};
<HPlatform
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
includeUI
includePlaces
>
<HMap
style={{
height: "400px",
width: "800px",
}}
mapOptions={{ center: { lat: 52.5321472, lng: 13.3935785 } }}
>
<HMapRoute
routeParams={routeParams}
icon={icon}
defaultDisplay
lineOptions={routeLineOptions}
/>
</HMap>
</HPlatform>;
Using a custom renderer
import HPlatform, {
HMap,
HMapRoute,
HMapMarker,
HMapPolyLine,
} from "react-here-map";
// Create the parameters for the routing request:
var routeParams = {
// The routing mode:
mode: "fastest;car",
// The start point of the route:
waypoint0: "geo!50.1120423728813,8.68340740740811",
// The end point of the route:
waypoint1: "geo!52.5309916298853,13.3846220493377",
// To retrieve the shape of the route we choose the route
// representation mode 'display'
representation: "display",
};
const routeLineOptions = {
style: { strokeColor: "blue", lineWidth: 10 },
arrows: { fillColor: "white", frequency: 2, width: 0.8, length: 0.7 },
};
const icon =
'<svg width="24" height="24" ' +
'xmlns="http://www.w3.org/2000/svg">' +
'<rect stroke="white" fill="#1b468d" x="1" y="1" width="22" ' +
'height="22" /><text x="12" y="18" font-size="12pt" ' +
'font-family="Arial" font-weight="bold" text-anchor="middle" ' +
'fill="white">H</text></svg>';
// Handles manipulation of the path between the two points
const RouteMarker = ({ map, platform, ui, route, key, routeShape }) => {
// Retrieve the mapped positions of the requested waypoints:
const startPoint = route.waypoint[0].mappedPosition;
const endPoint = route.waypoint[1].mappedPosition;
// Create a marker for the start point:
const startMarker = { lat: startPoint.latitude, lng: startPoint.longitude };
// Create a marker for the end point:
const endMarker = { lat: endPoint.latitude, lng: endPoint.longitude };
return (
<React.Fragment>
<HMapPolyLine points={routeShape} map={map} setViewBounds />
<HMapMarker
coords={startMarker}
map={map}
platform={platform}
icon={icon}
setViewBounds
/>
<HMapMarker
coords={endMarker}
map={map}
platform={platform}
icon={icon}
setViewBounds
/>
</React.Fragment>
);
};
<HPlatform
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
includeUI
includePlaces
>
<HMap
style={{
height: "400px",
width: "800px",
}}
mapOptions={{ center: { lat: 52.5321472, lng: 13.3935785 } }}
>
<HMapRoute
routeParams={routeParams}
icon={icon}
defaultDisplay
lineOptions={routeLineOptions}
>
<RouteMarker />
</HMapRoute>
</HMap>
</HPlatform>;
Displaying route on the Map Using iso line
Using the default renderer
import HPlatform, { HMap, HMapPolygon, HMapRoute } from "react-here-map";
// Create the parameters for the reverse geocoding request:
const isoRoutingParams = {
mode: "fastest;car;",
start: "geo!52.5,13.4",
range: "900",
rangetype: "time",
};
const routeLineOptions = {
style: { strokeColor: "blue", lineWidth: 10 },
arrows: { fillColor: "white", frequency: 2, width: 0.8, length: 0.7 },
};
const icon =
'<svg width="24" height="24" ' +
'xmlns="http://www.w3.org/2000/svg">' +
'<rect stroke="white" fill="#1b468d" x="1" y="1" width="22" ' +
'height="22" /><text x="12" y="18" font-size="12pt" ' +
'font-family="Arial" font-weight="bold" text-anchor="middle" ' +
'fill="white">H</text></svg>';
const RouteMarkerIso = ({
map,
platform,
ui,
route,
routeShape,
center,
component,
}) => {
return (
<React.Fragment>
<Polygon
points={routeShape}
options={polygonOptions}
setViewBounds
map={map}
platform={platform}
/>
<Marker
coords={center}
map={map}
platform={platform}
icon={icon}
options={markerOptions}
setViewBounds={false}
/>
</React.Fragment>
);
};
<HPlatform
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
includeUI
includePlaces
>
<HMap
style={{
height: "400px",
width: "800px",
}}
mapOptions={{ center: { lat: 52.5321472, lng: 13.3935785 } }}
interactive
includeUI
>
<HMapRoute
routeParams={isoRoutingParams}
icon={icon}
isoLine
defaultDisplay
lineOptions={routeLineOptions}
/>
</HMap>
</HPlatform>;
Using a custom renderer
import HPlatform, { HMap, HMapPolygon, HMapRoute } from "react-here-map";
// Create the parameters for the reverse geocoding request:
const isoRoutingParams = {
mode: "fastest;car;",
start: "geo!52.5,13.4",
range: "900",
rangetype: "time",
};
const routeLineOptions = {
style: { strokeColor: "blue", lineWidth: 10 },
arrows: { fillColor: "white", frequency: 2, width: 0.8, length: 0.7 },
};
const icon =
'<svg width="24" height="24" ' +
'xmlns="http://www.w3.org/2000/svg">' +
'<rect stroke="white" fill="#1b468d" x="1" y="1" width="22" ' +
'height="22" /><text x="12" y="18" font-size="12pt" ' +
'font-family="Arial" font-weight="bold" text-anchor="middle" ' +
'fill="white">H</text></svg>';
const RouteMarkerIso = ({
map,
platform,
ui,
route,
routeShape,
center,
component,
}) => {
return (
<React.Fragment>
<Polygon
points={routeShape}
options={polygonOptions}
setViewBounds
map={map}
platform={platform}
/>
<Marker
coords={center}
map={map}
platform={platform}
icon={icon}
options={markerOptions}
setViewBounds={false}
/>
</React.Fragment>
);
};
<HPlatform
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
includeUI
includePlaces
>
<HMap
style={{
height: "400px",
width: "800px",
}}
mapOptions={{ center: { lat: 52.5321472, lng: 13.3935785 } }}
interactive
includeUI
>
<HMapRoute
routeParams={isoRoutingParams}
icon={icon}
defaultDisplay={false}
isoLine
lineOptions={routeLineOptions}
>
<RouteMarkerIso />
</HMapRoute>
</HMap>
</HPlatform>;
HMapLayer
Adds a layer to the map.
Individual layer holds different information
props
mapLayerType: PropTypes.string.isRequired In a dot prop form e.g
mapLayerType="incidents", mapLayerType="normal.traffic"
{
normal: [
"xbase",
"xbasenight",
"base",
"basenight",
"map",
"mapnight",
"traffic",
"trafficnight",
"transit",
"panorama",
"panoramanight",
"labels",
"metaInfo"
],
satellite: ["xbase", "base", "map", "traffic", "panorama", "labels"],
terrain: ["xbase", "base", "map", "traffic", "panorama", "labels"],
incidents: true
}
Usage
import HPlatform, { HMap, HMapLayer } from "react-here-map";
// Child of HMapGeoCode receives same params as above.
<HPlatform
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
includeUI
includePlaces
>
<HMap
style={{
height: "400px",
width: "800px",
}}
mapOptions={{ center: { lat: 52.5321472, lng: 13.3935785 } }}
>
<HMapLayer mapLayerType="normal.trafficnight" />
</HMap>
</HPlatform>;
HMapPlaces
Search for places on the map
Props
library: PropTypes.string.isRequired One of the places library supported by here maps for the requests
query: PropTypes.string Passing the query externally to initiate the request on load after getting the location of the user
category: PropTypes.string Result category
placeClassName: PropTypes.string Class for the container
inputClassName: PropTypes.string Class for the Input field
containerStyle: PropTypes.object Styles for the container
inputStyle: PropTypes.object Styles for the input
itemContainerClass: PropTypes.string Result Items container class
itemClass: PropTypes.string Result Items class
iconClass: PropTypes.string Icon marker class name
inputStyle: PropTypes.object Styles for the input
getItem: PropTypes.function Callback when an item is clicked in the result
markerOptions: PropTypes.object Options for the marker
markerIcon: PropTypes.element Icon for the marker
markerType: PropTypes.string Type of marker icon
- multiMarker: PropTypes.boolean allow for many markers
Usage
import HPlatform, { HMap, HMapPlaces } from "react-here-map";
<HPlatform
app_id="YOUR_APP_ID"
app_code="YOUR_APP_CODE"
apikey={"YOUR_API_KEY_FOR_V3.1"}
useCIT
useHTTPS
includePlaces
interactive
>
<HMapPlaces library="search" />
</HPlatform>;
CHANGES
06/05/2020
- Includes support for V3.1 API_KEY
Contributions
See the TODO.MD
Licence
MIT