Skip to main content

​
Welcome to React HERE Maps

React HERE Maps is a modern, type-safe library that provides React components and hooks for integrating the HERE Maps Platform into your applications.

Quick Start

Get up and running in under 5 minutes

​
Features

Type-Safe

Built with TypeScript and Zod for runtime validation

Hook-Based

Modern React hooks for map functionality

Tree-Shakeable

Optimized bundle size with Rolldown

Context System

Clean API using React Context

​
Components

The library provides a comprehensive set of components for building map applications:
  • HereMap - Main map container with context provider
  • Marker - Map markers with drag support
  • Polyline - Draw lines on the map
  • Polygon - Draw polygons with holes support
  • MapSettings - Map configuration controls
  • ZoomControl - Zoom in/out controls
  • ScaleBar - Distance scale indicator

​
Installation

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

​
Basic Usage

import { HereMap, Marker } from '@rodrito/react-here-maps';

function App() {
  const apiKey = 'YOUR_HERE_API_KEY';

  return (
    <HereMap
      apiKey={apiKey}
      center={{ lat: 40.7128, lng: -74.0060 }}
      zoom={12}
    >
      <Marker lat={40.7128} lng={-74.0060} />
    </HereMap>
  );
}

​
Requirements

  • React 18+
  • HERE Maps API key (Get one here)
  • HERE Maps CSS (included automatically)

​
Next Steps

Quickstart

Build your first map application

Components

Explore available components

Guides

Learn core concepts

Examples

View interactive examples