This package provides React hooks, components and examples for HERE Maps API for JavaScript.
Demo: https://react-here-maps.vercel.app/
First, you need to include the HERE Maps API for JavaScript CSS in your HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body>
...
</body>
</html># After that, install the HERE Maps API for JavaScript with your favorite package manager
npm install --save-dev @here/maps-api-for-javascript --registry=https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/# Then install @toyamarodrigo/react-here-maps with your favorite package manager
npm install @toyamarodrigo/react-here-maps
# or
yarn add @toyamarodrigo/react-here-maps
# or
pnpm add @toyamarodrigo/react-here-mapsTo use @toyamarodrigo/react-here-maps, you will need to obtain an API key from HERE Maps. You can sign up for a free account and obtain an API key here.
https://developer.here.com/tutorials/getting-here-credentials/
import React from 'react';
import { HereMap } from '@toyamarodrigo/react-here-maps';
const App = () => {
return (
<div style={{ height: "100vh", width: "100vw" }}>
<HereMap
apiKey={"YOUR_API_KEY"}
mapOptions={{
center: { lat: -34.603722, lng: -58.401592 },
zoom: 12,
}}
>
{/* Markers, Polylines and stuff */}
</HereMap>
</div>
);
};-
Components
- Map
- Marker
- DOM Marker
- Polygons
- Polyline
- Circles
- InfoWindows
- Directions
-
Hooks
- Map Instance - useHereMaps
- Routing - useRoutingService v8
- Geocoding & Search - useGeocodingService
- Isoline - useIsolineService
- Waypoints - useWaypointsService
- Matrix - useMatrixService
https://developer.here.com/documentation/maps/3.1.38.0/dev_guide/index.html