API.md

December 2, 2025 ยท View on GitHub

Table of Contents

Compare

Parameters

  • a Object The first Mapbox GL Map
  • b Object The second Mapbox GL Map
  • container (string | HTMLElement) An HTML Element, or an element selector string for the compare container. It should be a wrapper around the two map Elements.
  • options Object
    • options.orientation string The orientation of the compare slider. vertical creates a vertical slider bar to compare one map on the left (map A) with another map on the right (map B). horizontal creates a horizontal slider bar to compare on mop on the top (map A) and another map on the bottom (map B). (optional, default vertical)
    • options.mousemove boolean If true the compare slider will move with the cursor, otherwise the slider will need to be dragged to move. (optional, default false)

Examples

var compare = new mapboxgl.Compare(beforeMap, afterMap, '#wrapper', {
  orientation: 'vertical',
  mousemove: true
});

setSlider

Set the position of the slider.

Parameters

  • x number Slider position in pixels from left/top.

on

Adds a listener for events of a specified type.

Parameters

  • type string The event type to listen for; one of slideend.
  • fn
  • listener Function The function to be called when the event is fired.

Returns Compare this

fire

Fire an event of a specified type.

Parameters

  • type string The event type to fire; one of slideend.
  • data Object Data passed to the event listener.

Returns Compare this

off

Removes an event listener previously added with Compare#on.

Parameters

  • type string The event type previously used to install the listener.
  • fn
  • listener Function The function previously installed as a listener.

Returns Compare this

remove

Removes the control from the DOM and stop synchronizing the two maps.