- See: Swipe between maps
-
a
Object The first MapLibre GL Map -
b
Object The second MapLibre 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
Objectoptions.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, defaultvertical
)options.mousemove
boolean Iftrue
the compare slider will move with the cursor, otherwise the slider will need to be dragged to move. (optional, defaultfalse
)
var compare = new maplibregl.Compare(beforeMap, afterMap, '#wrapper', {
orientation: 'vertical',
mousemove: true
});
Set the position of the slider.
x
number Slider position in pixels from left/top.
Adds a listener for events of a specified type.
type
string The event type to listen for; one ofslideend
.fn
listener
Function The function to be called when the event is fired.
Returns Compare this
Fire an event of a specified type.
Returns Compare this
Removes an event listener previously added with Compare#on
.
type
string The event type previously used to install the listener.fn
listener
Function The function previously installed as a listener.
Returns Compare this