Skip to main content

​
MapSettings

The MapSettings component provides interactive controls for changing map layers and settings.

​
Props

​
alignment
string
Position of the settings control on the mapOptions:
  • 'left-top'
  • 'left-middle'
  • 'left-bottom'
  • 'right-top'
  • 'right-middle'
  • 'right-bottom' (default)
  • 'top-left'
  • 'top-center'
  • 'top-right'
  • 'bottom-left'
  • 'bottom-center'
  • 'bottom-right'
​
disabled
boolean
default:false
Disable the settings control
​
visibility
boolean
default:true
Control visibility of the settings control

​
Basic Usage

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

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

​
Custom Position

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

​
With Other Controls

Create a complete control layout: 
import { HereMap, MapSettings, ZoomControl, ScaleBar } 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>

​
Available Settings

The settings control typically allows users to:
  • Switch between map layers (normal, satellite, terrain)
  • Toggle traffic layer
  • Enable/disable POIs (Points of Interest)
  • Switch between day/night mode
  • Configure map behavior

​
Controlled Settings

import { useState } from 'react';

function ControlledSettings() {
  const [settingsOpen, setSettingsOpen] = useState(false);

  return (
    <HereMap
      apikey="YOUR_API_KEY"
      options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}
    >
      <MapSettings
        alignment="right-bottom"
        visibility={settingsOpen}
      />

      <button
        onClick={() => setSettingsOpen(!settingsOpen)}
        style={{ position: 'absolute', top: 10, right: 10, zIndex: 1 }}
      >
        {settingsOpen ? 'Hide' : 'Show'} Settings
      </button>
    </HereMap>
  );
}

​
Responsive Layout

Adjust control positions based on screen size: 
import { HereMap, MapSettings, ZoomControl } from '@rodrito/react-here-maps';
import { useState, useEffect } from 'react';

function ResponsiveControls() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => setIsMobile(window.innerWidth < 768);
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  return (
    <HereMap
      apikey="YOUR_API_KEY"
      options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}
    >
      <ZoomControl alignment={isMobile ? 'left-top' : 'right-top'} />
      <MapSettings alignment={isMobile ? 'left-bottom' : 'right-bottom'} />
    </HereMap>
  );
}

​
Programmatic Layer Switching

While MapSettings provides UI controls, you can also switch layers programmatically: 
import { HereMap, MapSettings } from '@rodrito/react-here-maps';
import { useState } from 'react';

function LayerSwitcher() {
  const [mapStyle, setMapStyle] = useState('vector.normal.map');

  return (
    <>
      <div style={{ marginBottom: '1rem' }}>
        <button onClick={() => setMapStyle('vector.normal.map')}>
          Normal
        </button>
        <button onClick={() => setMapStyle('raster.satellite.map')}>
          Satellite
        </button>
        <button onClick={() => setMapStyle('raster.terrain.map')}>
          Terrain
        </button>
      </div>

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

​
Disabled State

<HereMap apikey="YOUR_API_KEY" options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}>
  <MapSettings disabled />
</HereMap>

​
Control Positioning Guide

Right Side (Default)

  • right-top: ZoomControl
  • right-bottom: MapSettings
  • Keeps left side clear for mobile gestures

Left Side

  • left-top: Alternative placement
  • left-bottom: Good for RTL layouts
  • More accessible on some devices

​
Use Cases

Layer Selection

Let users choose map visualization style

Feature Toggles

Enable/disable map features like traffic

User Preferences

Save and restore user map preferences

Context Switching

Switch between different map contexts

​
Best Practices

Keep controls in predictable locations across your app. Users expect zoom controls on the right.
On mobile, avoid placing controls where they might interfere with touch gestures or cover important content.
Ensure controls are keyboard accessible and have proper focus states.

​
See Also

ZoomControl

Zoom controls

ScaleBar

Distance scale

HereMap

Main map component