Swipe between maps | Mapbox GL JS

Use the mapbox-gl-compare library to display two synchronized maps side-by-side with a draggable slider that reveals more or less of each map. This pattern is useful for highlighting a single visual difference — for example, comparing day and night styles or showing before-and-after map updates.

Billing on map load is doubled

When using this method, you will need to render two maps at the same time, which means you will be billed for each map load, so use caution when creating this functionality.

JavaScript

React

JavaScript

React


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Swipe between maps</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.17.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.17.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
    body {
        overflow: hidden;
    }

    body * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
</style>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.css" type="text/css">
<div id="comparison-container">
    <div id="before" class="map"></div>
    <div id="after" class="map"></div>
</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 beforeMap = new mapboxgl.Map({
        container: 'before',
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/standard',
        config: {
            basemap: {
                theme: 'monochrome'
            }
        },
        center: [0, 0],
        zoom: 0
    });

    const afterMap = new mapboxgl.Map({
        container: 'after',
        style: 'mapbox://styles/mapbox/standard',
        config: {
            basemap: {
                theme: 'monochrome',
                lightPreset: 'night'
            }
        },
        center: [0, 0],
        zoom: 0
    });

    // A selector or reference to HTML element
    const container = '#comparison-container';

    const map = new mapboxgl.Compare(beforeMap, afterMap, container, {
        // Set this to enable comparing two maps by mouse movement:
        // mousemove: true
    });
</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 } from 'react';
import mapboxgl from 'mapbox-gl';
import mapboxglCompare from 'mapbox-gl-compare';

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

// extend mapboxgl, adding the Compare class
mapboxgl.Compare = mapboxglCompare;

const MapboxExample = () => {
  const mapRef = useRef();
  const beforeMapContainerRef = useRef();
  const afterMapContainerRef = useRef();
  const comparisonContainerRef = useRef();

  const mapStyle = { position: 'absolute', top: 0, bottom: 0, width: '100%' };

  useEffect(() => {
    // some development servers will run this hook more than once
    // return if the map has already been initialized
    if (mapRef.current) return;

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

    const beforeMap = new mapboxgl.Map({
      container: beforeMapContainerRef.current,
      style: 'mapbox://styles/mapbox/standard',
      config: {
        basemap: {
          theme: 'monochrome'
        }
      },
      center: [0, 0],
      zoom: 0
    });

    const afterMap = new mapboxgl.Map({
      container: afterMapContainerRef.current,
      style: 'mapbox://styles/mapbox/standard',
      config: {
        basemap: {
          theme: 'monochrome',
          lightPreset: 'night'
        }
      },
      center: [0, 0],
      zoom: 0
    });

    mapRef.current = new mapboxgl.Compare(
      beforeMap,
      afterMap,
      comparisonContainerRef.current
    );
  }, []);

  return (
    <div
      id="comparison-container"
      ref={comparisonContainerRef}
      style={{ height: '100%', position: 'relative' }}
    >
      <div id="before" ref={beforeMapContainerRef} style={mapStyle}></div>
      <div id="after" ref={afterMapContainerRef} style={mapStyle}></div>
    </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?