mapbox-gl-compare/API.md

Swipe and sync between two maps

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

### Table of Contents

-   [Compare][1]
    -   [Parameters][2]
    -   [Examples][3]
    -   [setSlider][4]
        -   [Parameters][5]
    -   [on][6]
        -   [Parameters][7]
    -   [fire][8]
        -   [Parameters][9]
    -   [off][10]
        -   [Parameters][11]

## Compare

-   **See: [Swipe between maps][12]**

### Parameters

-   `a` **[Object][13]** The first Mapbox GL Map
-   `b` **[Object][13]** The second Mapbox GL Map
-   `container` **([string][14] \| [HTMLElement][15])** An HTML Element, or an element selector string for the compare container. It should be a wrapper around the two map Elements.
-   `options` **[Object][13]** 
    -   `options.orientation` **[string][14]** 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][16]** If `true` the compare slider will move with the cursor, otherwise the slider will need to be dragged to move. (optional, default `false`)

### Examples

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

### setSlider

Set the position of the slider.

#### Parameters

-   `x` **[number][17]** Slider position in pixels from left/top.

### on

Adds a listener for events of a specified type.

#### Parameters

-   `type` **[string][14]** The event type to listen for; one of `slideend`.
-   `fn`  
-   `listener` **[Function][18]** The function to be called when the event is fired.

Returns **[Compare][19]** `this`

### fire

Fire an event of a specified type.

#### Parameters

-   `type` **[string][14]** The event type to fire; one of `slideend`.
-   `data` **[Object][13]** Data passed to the event listener.

Returns **[Compare][19]** `this`

### off

Removes an event listener previously added with `Compare#on`.

#### Parameters

-   `type` **[string][14]** The event type previously used to install the listener.
-   `fn`  
-   `listener` **[Function][18]** The function previously installed as a listener.

Returns **[Compare][19]** `this`

[1]: #compare

[2]: #parameters

[3]: #examples

[4]: #setslider

[5]: #parameters-1

[6]: #on

[7]: #parameters-2

[8]: #fire

[9]: #parameters-3

[10]: #off

[11]: #parameters-4

[12]: https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-compare/

[13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

[15]: https://developer.mozilla.org/docs/Web/HTML/Element

[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean

[17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number

[18]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function

[19]: #compare