Skip to content

Instantly share code, notes, and snippets.

@lxbarth

lxbarth/index.html

Created May 28, 2021 22:57
Show Gist options
  • Save lxbarth/aff81f189fd53dd087b9013faee48abb to your computer and use it in GitHub Desktop.
Save lxbarth/aff81f189fd53dd087b9013faee48abb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Swipe between maps</title>
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.3.0/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.3.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<style>
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%;
}
</style>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.js"></script>
<link
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.css"
type="text/css"
/>
<div id="comparison-container">
<div id="before" class="map"></div>
<div id="after" class="map"></div>
</div>
<script>
mapboxgl.accessToken =
"pk.eyJ1IjoibWFwYm94LW1hcC1kZXNpZ24iLCJhIjoiY2syeHpiaHlrMDJvODNidDR5azU5NWcwdiJ9.x0uSqSWGXdoFKuHZC5Eo_Q";
var beforeMap = new mapboxgl.Map({
container: "before",
style: "mapbox://styles/mapbox-map-design/ckp5lcrh51cnc17nyattlxkqz",
center: [0, 0],
zoom: 0
});
​
var afterMap = new mapboxgl.Map({
container: "after",
style:
"mapbox://styles/mapbox-map-design/ckp7549ep57hy18pel2h14vl3/draft",
center: [0, 0],
zoom: 0
});
​
// A selector or reference to HTML element
var container = "#comparison-container";
​
var map = new mapboxgl.Compare(beforeMap, afterMap, container, {
// Set this to enable comparing two maps by mouse movement:
// mousemove: true
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment