Swipe between maps

# maplibre-gl-compare **Repository Path**: libmaps/maplibre-gl-compare ## Basic Information - **Project Name**: maplibre-gl-compare - **Description**: No description available - **Primary Language**: Unknown - **License**: ISC - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-05-27 - **Last Updated**: 2024-05-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## MapLibre GL Compare Swipe and sync between two MapLibre maps. This plugin was originally developed for Mapbox (https://github.com/mapbox/mapbox-gl-compare) and was migrated to MapLibre after Mapbox changed its license. ## Code example ### Examples #### Full Example without the need of a token ```js Swipe between maps

``` #### Full Example with the need of a token ```js Swipe between maps

``` ### Usage ```js var beforeMap = new maplibregl.Map({ container: "before", style: "https://demotiles.maplibre.org/style.json", center: [7.221275, 50.326111], zoom: 5, }); var afterMap = new maplibregl.Map({ container: "after", style: "https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte.vt/style.json", center: [7.221275, 50.326111], zoom: 5, }); // A selector or reference to HTML element var container = '#comparison-container'; var map = new maplibregl.Compare(beforeMap, afterMap, container, { mousemove: true, // Optional. Set to true to enable swiping during cursor movement. orientation: 'vertical' // Optional. Sets the orientation of swiper to horizontal or vertical, defaults to vertical }); ``` ### Methods ```js compare = new maplibregl.Compare(beforeMap, afterMap, container, { mousemove: true, // Optional. Set to true to enable swiping during cursor movement. orientation: 'vertical' // Optional. Sets the orientation of swiper to horizontal or vertical, defaults to vertical }); // Get Current position - this will return the slider's current position, in pixels compare.currentPosition; // Set Position - this will set the slider at the specified (x) number of pixels from the left-edge or top-edge of viewport based on swiper orientation compare.setSlider(x); //Listen to slider movement - and return current position on each slideend compare.on('slideend', (e) => { console.log(e.currentPosition); }); //Remove - this will remove the compare control from the DOM and stop synchronizing the two maps. compare.remove(); ``` ## Live examples [Compare hybrid with streets](https://rawcdn.githack.com/astridx/astridx.github.io/a9d7297a4fe1e3a4d7ebeb1e4e662fd1339ef3b5/maplibreexamples/plugins/maplibre-gl-compare-swipe-between-maps.html) [Compare swisstopo with demotiles](https://rawcdn.githack.com/astridx/astridx.github.io/a9d7297a4fe1e3a4d7ebeb1e4e662fd1339ef3b5/maplibreexamples/plugins/maplibre-gl-compare-swipe-between-maps_.html) ## Installation ### Native Add tags referencing `maplibre-gl-compare` after adding `maplibre-gl` to your website: ```html ``` ### Node ## Motivation This project makes it possible to easily compare two maps. ## API Reference [API Reference](API.md) ## Bug Reports & Feature Requests Please use the [issue tracker](https://github.com/maplibre/maplibre-gl-compare/issues) to report any bugs or file feature requests. ## Licence ISC © [MapLibre](https://github.com/maplibre) © [Mapbox](https://github.com/mapbox)