> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt)
# Swipe between maps
Use the [mapbox-gl-compare](https://github.com/mapbox/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.
> **Note (warning): 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.
> Example code:
**JavaScript**
```html
Swipe between maps
```
**React**
```jsx
import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import mapboxglCompare from 'mapbox-gl-compare';
import 'mapbox-gl/dist/mapbox-gl.css';
import 'mapbox-gl-compare/dist/mapbox-gl-compare.css';
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;
const beforeMap = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
container: beforeMapContainerRef.current,
style: 'mapbox://styles/mapbox/standard',
config: {
basemap: {
theme: 'monochrome'
}
},
center: [0, 0],
zoom: 0
});
const afterMap = new mapboxgl.Map({
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
container: afterMapContainerRef.current,
style: 'mapbox://styles/mapbox/standard',
config: {
basemap: {
theme: 'monochrome',
lightPreset: 'night'
}
},
center: [0, 0],
zoom: 0
});
mapRef.current = new mapboxglCompare(
beforeMap,
afterMap,
comparisonContainerRef.current
);
}, []);
return (