@halilbrhmtrn/react-here-map
Advanced tools
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.
Using NPM:
npm i --save react-here-map
Using Yarn:
yarn add react-here-map
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")
);
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.
HMap and it objects
child of the mapA 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:
Props were determined by the options required for initializing a platform.
'v3/3.0''normal.map'truetrueDisplays 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:
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
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>;
Draws a polyline on the map
trueimport 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>;
Draws a polygon on the map
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>;
Puts a marker on the map
undefined | DOM. Default undefinedtrueimport 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>;
Puts a circle on the map
trueimport 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>;
Puts a rectangle on the map
trueimport 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>;
This section demonstrates how to use an event with either HMap component or a
map object.
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>;
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.
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>;
This uses React Hooks. Ensure that your react installation supports The Hooks API
map, platform, lat, lng as propsConverts 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>;
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>;
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>;
This uses React Hooks. Ensure that your react installation supports Hooks API
Shows path to between two points based on params
map, platform, ui, route, key, routeShape as propsimport 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>;
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>;
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>;
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>;
Adds a layer to the map.
Individual layer holds different information
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
}
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>;
Search for places on the map
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
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>;
06/05/2020
See the TODO.MD
MIT
FAQs
React components for working with Here Maps API
We found that @halilbrhmtrn/react-here-map demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.