MapSettings

Map configuration controls for layer switching

MapSettings

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

Props

alignment · string

Position of the settings control on the map

Options:

• '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

Consistent positioning

Keep controls in predictable locations across your app. Users expect zoom controls on the right.

Mobile considerations

On mobile, avoid placing controls where they might interfere with touch gestures or cover important content.

Accessibility

Ensure controls are keyboard accessible and have proper focus states.

See Also

ZoomControl

Zoom controls

ScaleBar

Distance scale

HereMap

Main map component