Marker

Display markers on the map with drag support

Marker

The Marker component displays markers (pins) on the map at specific coordinates. Supports custom icons, labels, and drag behavior.

Props

position · { lat: number; lng: number } · required

Marker position coordinates

label · string

Text label to display on the marker

draggable · boolean · default: false

Enable drag behavior for the marker

icon · string

URL to custom icon image

iconSize · { w: number; h: number }

Custom icon size in pixels

iconAnchor · { x: number; y: number }

Icon anchor point (where the icon points to on the map)

onDragEnd · (event: H.mapevents.Event) => void

Callback fired when marker drag ends

Basic Usage

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

function MapWithMarker() {
  return (
    <HereMap
      apikey="YOUR_API_KEY"
      options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}
    >
      <Marker
        position={{ lat: 40.7128, lng: -74.0060 }}
        label="New York City"
      />
    </HereMap>
  );
}

Multiple Markers

const cities = [
  { id: 1, lat: 40.7128, lng: -74.0060, name: 'New York' },
  { id: 2, lat: 34.0522, lng: -118.2437, name: 'Los Angeles' },
  { id: 3, lat: 41.8781, lng: -87.6298, name: 'Chicago' },
];

<HereMap
  apikey="YOUR_API_KEY"
  options={{ center: { lat: 39.8283, lng: -98.5795 }, zoom: 4 }}
>
  {cities.map((city) => (
    <Marker
      key={city.id}
      position={{ lat: city.lat, lng: city.lng }}
      label={city.name}
    />
  ))}
</HereMap>

Draggable Marker

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

function DraggableMarkerExample() {
  const [position, setPosition] = useState({ lat: 40.7128, lng: -74.0060 });

  return (
    <>
      <HereMap
        apikey="YOUR_API_KEY"
        options={{ center: position, zoom: 12 }}
      >
        <Marker
          position={position}
          draggable
          onDragEnd={(event) => {
            const coord = event.target.getGeometry();
            setPosition({ lat: coord.lat, lng: coord.lng });
          }}
        />
      </HereMap>

      <div>
        <p>Latitude: {position.lat.toFixed(4)}</p>
        <p>Longitude: {position.lng.toFixed(4)}</p>
      </div>
    </>
  );
}

Custom Icon

<Marker
  position={{ lat: 48.8566, lng: 2.3522 }}
  label="Paris"
  icon="https://example.com/custom-marker.png"
  iconSize={{ w: 32, h: 32 }}
  iconAnchor={{ x: 16, y: 32 }}
/>

The iconAnchor determines which point of the icon image corresponds to the marker’s geographical position. For a pin-shaped icon, set it to the bottom center (e.g., { x: width/2, y: height }).

Interactive Markers

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

function InteractiveMarkers() {
  const [selected, setSelected] = useState<number | null>(null);

  const locations = [
    { id: 1, lat: 40.7128, lng: -74.0060, name: 'NYC' },
    { id: 2, lat: 34.0522, lng: -118.2437, name: 'LA' },
  ];

  return (
    <HereMap
      apikey="YOUR_API_KEY"
      options={{ center: { lat: 39.8283, lng: -98.5795 }, zoom: 4 }}
    >
      {locations.map((loc) => (
        <Marker
          key={loc.id}
          position={{ lat: loc.lat, lng: loc.lng }}
          label={loc.name}
          onClick={() => setSelected(loc.id)}
          icon={selected === loc.id ? '/selected-marker.png' : '/marker.png'}
        />
      ))}
    </HereMap>
  );
}

TypeScript Types

import type { MarkerProps } from '@rodrito/react-here-maps';

const markerConfig: MarkerProps = {
  position: { lat: 40.7128, lng: -74.0060 },
  label: 'New York',
  draggable: true,
};

Performance Tips

Large number of markers

For 100+ markers, consider using marker clustering or virtualization techniques. Render only markers in the visible viewport.

Custom icons

Optimize icon images for web (WebP format, appropriate size). Preload icons that will be used frequently.

Drag performance

Avoid heavy computations in onDragEnd. Use debouncing for API calls triggered by marker position changes.

See Also

HereMap

Map container component

Polyline

Draw lines between markers

Examples

Interactive marker examples