Introduction

Modern React components and hooks for HERE Maps Platform

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