API.md

Table of Contents

• Compare
  • Parameters
  • Examples
  • setSlider
    • Parameters
  • on
    • Parameters
  • fire
    • Parameters
  • off
    • Parameters
  • remove

Compare

• See: Swipe between maps

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.