Toggle marker visibility | Mapbox GL JS

This example demonstrates how to show and hide Markers on a web map using checkboxes.

Because Markers are HTML elements that are positioned in front of the map, you can use JavaScript and CSS to manipulate their visibility as you would any other DOM element.

When a checkbox is unchecked, the code applies a hidden CSS class to the corresponding Marker elements using the getElement method. The CSS class uses display: none to hide the markers from view. When the checkbox is checked again, the hidden class is removed, making the markers visible again.

JavaScript

React

JavaScript

React


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Toggle marker visibility</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.19.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.19.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
    #menu {
        background: #fff;
        position: absolute;
        z-index: 1;
        top: 10px;
        left: 10px;
        border-radius: 3px;
        width: 150px;
        font-family: 'Open Sans', sans-serif;
        padding: 10px;
        border: none;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    #menu label {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #404040;
        margin-bottom: 8px;
        cursor: pointer;
    }

    #menu label:last-child {
        margin-bottom: 0;
    }

    #menu input[type='checkbox'] {
        margin-right: 8px;
        cursor: pointer;
    }

    .mapboxgl-marker.hidden {
        display: none;
    }
</style>

<div id="menu">
    <label>
        <input type="checkbox" id="red-checkbox" checked="">
        Red Marker
    </label>
    <label>
        <input type="checkbox" id="blue-checkbox" checked="">
        Blue Marker
    </label>
</div>
<div id="map"></div>

<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
        container: 'map',
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/standard',
        center: [-87.6298, 41.8781],
        zoom: 12,
        pitch: 55
    });

    // Create markers
    const redMarker = new mapboxgl.Marker({ color: '#e41a1c' })
        .setLngLat([-87.6298, 41.8781])
        .addTo(map);

    const blueMarker = new mapboxgl.Marker({ color: '#377eb8' })
        .setLngLat([-87.635, 41.865])
        .addTo(map);

    // Function to toggle marker visibility
    function toggleMarker(marker, show) {
        const element = marker.getElement();
        if (show) {
            element.classList.remove('hidden');
        } else {
            element.classList.add('hidden');
        }
    }

    // Add event listeners to checkboxes
    document.getElementById('red-checkbox').addEventListener('change', (e) => {
        toggleMarker(redMarker, e.target.checked);
    });

    document.getElementById('blue-checkbox').addEventListener('change', (e) => {
        toggleMarker(blueMarker, e.target.checked);
    });
</script>

</body>
</html>

This code snippet will not work as expected until you replace YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.

JavaScript

React


import React, { useEffect, useRef, useState } from 'react';
import mapboxgl from 'mapbox-gl';

import 'mapbox-gl/dist/mapbox-gl.css';

const menuStyle = {
  background: '#fff',
  position: 'absolute',
  zIndex: 1,
  top: 10,
  left: 10,
  borderRadius: 3,
  width: '150px',
  fontFamily: "'Open Sans', sans-serif",
  padding: '10px',
  border: 'none',
  boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)'
};

const labelStyle = {
  display: 'flex',
  alignItems: 'center',
  fontSize: '13px',
  color: '#404040',
  marginBottom: '8px',
  cursor: 'pointer'
};

const checkboxStyle = {
  marginRight: '8px',
  cursor: 'pointer'
};

const MapboxExample = () => {
  const mapContainerRef = useRef();
  const mapRef = useRef();
  const redMarkerRef = useRef();
  const blueMarkerRef = useRef();

  const [showRed, setShowRed] = useState(true);
  const [showBlue, setShowBlue] = useState(true);

  useEffect(() => {
    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

    mapRef.current = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/standard',
      center: [-87.6298, 41.8781],
      zoom: 12,
      pitch: 55
    });

    // Create markers
    redMarkerRef.current = new mapboxgl.Marker({ color: '#e41a1c' })
      .setLngLat([-87.6298, 41.8781])
      .addTo(mapRef.current);

    blueMarkerRef.current = new mapboxgl.Marker({ color: '#377eb8' })
      .setLngLat([-87.635, 41.865])
      .addTo(mapRef.current);

    return () => {
      // Clean up markers on unmount
      redMarkerRef.current?.remove();
      blueMarkerRef.current?.remove();
      mapRef.current.remove();
    };
  }, []);

  // Toggle marker visibility using CSS class
  const toggleMarker = (markerRef, show) => {
    if (markerRef.current) {
      const element = markerRef.current.getElement();
      if (show) {
        element.classList.remove('hidden');
      } else {
        element.classList.add('hidden');
      }
    }
  };

  useEffect(() => {
    toggleMarker(redMarkerRef, showRed);
  }, [showRed]);

  useEffect(() => {
    toggleMarker(blueMarkerRef, showBlue);
  }, [showBlue]);

  return (
    <>
      <style>
        {`
          .mapboxgl-marker.hidden {
            display: none;
          }
        `}
      </style>
      <div id="menu" style={menuStyle}>
        <label style={{ ...labelStyle, marginBottom: '8px' }}>
          <input
            type="checkbox"
            style={checkboxStyle}
            checked={showRed}
            onChange={(e) => setShowRed(e.target.checked)}
          />
          Red Marker
        </label>
        <label style={{ ...labelStyle, marginBottom: 0 }}>
          <input
            type="checkbox"
            style={checkboxStyle}
            checked={showBlue}
            onChange={(e) => setShowBlue(e.target.checked)}
          />
          Blue Marker
        </label>
      </div>
      <div id="map" ref={mapContainerRef} style={{ height: '100%' }}></div>
    </>
  );
};

export default MapboxExample;

This code snippet will not work as expected until you replace YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.

Was this example helpful?