Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maplibre/maplibre-gl-compare
Swipe and sync between two maps
https://github.com/maplibre/maplibre-gl-compare
Last synced: 2 months ago
JSON representation
Swipe and sync between two maps
- Host: GitHub
- URL: https://github.com/maplibre/maplibre-gl-compare
- Owner: maplibre
- License: isc
- Created: 2021-06-06T14:57:54.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-07T22:43:25.000Z (about 2 years ago)
- Last Synced: 2024-04-14T05:45:27.800Z (9 months ago)
- Language: JavaScript
- Size: 1.77 MB
- Stars: 27
- Watchers: 6
- Forks: 6
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome-maplibre - maplibre-gl-compare - Enables users to compare two maps by swiping left and right. (User Interface Plugins / JavaScript)
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
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
body {
overflow: hidden;
}
body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
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, {
// Set this to enable comparing two maps by mouse movement:
// m ousemove: true
});
```
#### Full Example with the need of a token
```js
Swipe between maps
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
body {
overflow: hidden;
}
body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
var beforeMap = new maplibregl.Map({
container: "before",
style:
"https://api.maptiler.com/maps/hybrid/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL",
center: [7.221275, 50.326111],
zoom: 15,
});
var afterMap = new maplibregl.Map({
container: "after",
style:
"https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL",
center: [7.221275, 50.326111],
zoom: 15,
});
// A selector or reference to HTML element
var container = "#comparison-container";
var map = new maplibregl.Compare(beforeMap, afterMap, container, {
// Set this to enable comparing two maps by mouse movement:
// m ousemove: true
});
```
### 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)