Skip to main content

​
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 mapOptions:
  • '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
  • Bottom Left
  • Top Right
<ScaleBar alignment="bottom-right" />
Best for most layouts (default)

​
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