mapbox-gl-compare
Version:
Swipe and sync between two maps
43 lines (42 loc) • 1.06 kB
HTML
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />
<link href='style.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; 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%;
}
.controls {
position:absolute;
top:0;
right:0;
}
</style>
</head>
<body>
<div id='wrapper'>
<div id='before' class='map'></div>
<div id='after' class='map'></div>
<div class="controls">
<button id="close-button">X</button>
</div>
</div>
<script src='example/bundle.js'></script>
</body>
</html>