Skip to main content

​
Installation

​
Package Manager

npm install @rodrito/react-here-maps @here/maps-api-for-javascript

​
TypeScript Support

Install type definitions for HERE Maps: 
npm install --save-dev @types/heremaps
The library is built with TypeScript and includes type definitions out of the box.

​
Peer Dependencies

React HERE Maps requires the following peer dependencies:
  • React ^18.0.0 - For React 18+ features
  • React DOM ^18.0.0 - For rendering
  • @here/maps-api-for-javascript ^1.50.0 - HERE Maps JavaScript API

​
Environment Setup

​
Get HERE API Key

  1. Visit developer.here.com
  2. Sign up for a free account
  3. Create a new project
  4. Generate an API key
  5. Enable the following services:
    • Maps API
    • Geocoding & Search
    • Routing

​
Configure Environment Variables

  • Vite
  • Next.js
  • Create React App
.env.local
VITE_HERE_API_KEY=your_api_key_here
Usage:
const apiKey = import.meta.env.VITE_HERE_API_KEY;
Never commit your API keys to version control. Add .env.local to your .gitignore file.

​
CSS Requirements

The library automatically loads the required HERE Maps CSS. No manual CSS imports are needed. If you prefer to load it manually: 
<link
  rel="stylesheet"
  href="https://js.api.here.com/v3/3.1/mapsjs-ui.css"
/>

​
Verify Installation

Create a test component to verify everything is working: 
import { HereMap } from '@rodrito/react-here-maps';

export function TestMap() {
  return (
    <div style={{ height: '400px', width: '100%' }}>
      <HereMap
        apiKey="YOUR_API_KEY"
        center={{ lat: 0, lng: 0 }}
        zoom={2}
      />
    </div>
  );
}
If you see a map, you’re all set!

​
Next Steps

Quickstart

Build your first application

Components

Explore available components