Installation

Installation guide for React HERE Maps

Installation

Package Manager

npm

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

.env.local

VITE_HERE_API_KEY=your_api_key_here

Usage:

const apiKey = import.meta.env.VITE_HERE_API_KEY;

Next.js

.env.local

NEXT_PUBLIC_HERE_API_KEY=your_api_key_here

Usage:

const apiKey = process.env.NEXT_PUBLIC_HERE_API_KEY;

Create React App

.env

REACT_APP_HERE_API_KEY=your_api_key_here

Usage:

const apiKey = process.env.REACT_APP_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