@toyamarodrigo/react-here-maps

React HERE Maps

This package provides React hooks, components and examples for HERE Maps API for JavaScript.

Demo: https://react-here-maps.vercel.app/

Installation

npm install @toyamarodrigo/react-here-maps

# or
yarn add @toyamarodrigo/react-here-maps

# or
pnpm add @toyamarodrigo/react-here-maps

Usage

To 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/

Example

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.6083,
            lng: -58.3712,
          },
          zoom: 12,
        }}
        layerOptions={{
          style: "normal",
          ppi: 72,
        }}
      >
      {/* Markers, Polylines and stuff */}
      </HereMap>
    </div>
  );
};

TODO

• Components

  • [x] Map
  • [x] Marker
  • [x] DOM Marker
  • [ ] Polygons
  • [x] Polyline
  • [ ] Circles
  • [ ] InfoWindows
  • [ ] Directions

• Hooks

  • [x] Map Instance - useHereMaps
  • [x] Routing - useRoutingService
  • [ ] Geocoding & Search - useGeocodingService
  • [ ] Isoline - useIsolineService
  • [ ] Waypoints - useWaypointsService
  • [ ] Matrix - useMatrixService

HERE Maps API Docs

https://developer.here.com/documentation/maps/3.1.38.0/dev_guide/index.html