ScaleBar

Display distance scale indicator on the map

ScaleBar

The ScaleBar component displays a visual scale showing map distances in metric and/or imperial units.

Props

alignment · string

Position of the scale bar on the map

Options:

• 'left-top'
• 'left-middle'
• 'left-bottom'
• 'right-top'
• 'right-middle'
• 'right-bottom'
• 'top-left'
• 'top-center'
• 'top-right'
• 'bottom-left'
• 'bottom-center'
• 'bottom-right' (default)

disabled · boolean · default: false

Disable the scale bar

visibility · boolean · default: true

Control visibility of the scale bar

Basic Usage

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

function MapWithScale() {
  return (
    <HereMap
      apikey="YOUR_API_KEY"
      options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}
    >
      <ScaleBar />
    </HereMap>
  );
}

Custom Position

<HereMap apikey="YOUR_API_KEY" options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}>
  <ScaleBar alignment="bottom-left" />
</HereMap>

With Other Controls

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

<HereMap apikey="YOUR_API_KEY" options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}>
  <ZoomControl alignment="right-top" />
  <ScaleBar alignment="bottom-right" />
</HereMap>

Dynamic Behavior

The scale bar automatically updates:

• When the map zoom level changes
• When the map is panned to different latitudes (scale varies by latitude)
• Shows appropriate units based on zoom level

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

function DynamicScale() {
  const [center, setCenter] = useState({ lat: 40.7128, lng: -74.0060 });

  return (
    <HereMap
      apikey="YOUR_API_KEY"
      options={{ center, zoom: 12 }}
    >
      <ScaleBar />
      <Marker position={center} />
    </HereMap>
  );
}

Units Display

The scale bar shows:

• Metric (meters/kilometers)
• Imperial (feet/miles)
• Both units simultaneously

The displayed unit automatically switches based on the appropriate scale:

• At high zoom: meters/feet
• At low zoom: kilometers/miles

Positioning Examples

Bottom Right

<ScaleBar alignment="bottom-right" />

Best for most layouts (default)

Bottom Left

<ScaleBar alignment="bottom-left" />

Good when right side has other controls

Top Right

<ScaleBar alignment="top-right" />

Alternative placement

Conditional Visibility

import { useState } from 'react';

function ToggleableScale() {
  const [showScale, setShowScale] = useState(true);

  return (
    <>
      <button onClick={() => setShowScale(!showScale)}>
        Toggle Scale Bar
      </button>

      <HereMap apikey="YOUR_API_KEY" options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}>
        <ScaleBar visibility={showScale} />
      </HereMap>
    </>
  );
}

Full Controls Layout

import { HereMap, ZoomControl, ScaleBar, MapSettings } from '@rodrito/react-here-maps';

<HereMap
  apikey="YOUR_API_KEY"
  options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}
>
  <ZoomControl alignment="right-top" />
  <MapSettings alignment="right-bottom" />
  <ScaleBar alignment="bottom-right" />
</HereMap>

Use Cases

Distance Reference

Help users understand real-world distances on the map

Planning

Useful for route planning and measuring areas

Navigation

Essential for navigation applications

Context

Provides geographic context at different zoom levels

Accessibility

The scale bar provides visual reference for:

• Screen magnification users
• Print versions of the map
• Screenshots and documentation

See Also

ZoomControl

Zoom controls

MapSettings

Map configuration

HereMap

Main map component