Commit 99909821 authored by Boris Mericskay's avatar Boris Mericskay
Browse files

Upload New File

parent 6f4618aa
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MapLibreGL / Swipe maps</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.js"></script>
<link href="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.css" rel="stylesheet" />
<style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
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>
</head>
<body>
<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>
// Map1 Configuration
var beforeMap = new mapboxgl.Map({
container: 'before',
style: 'https://geoserveis.icgc.cat/contextmaps/icgc.json',
zoom: 14,
center: [-1.68, 48.1272],
});
// Map2 Configuration
var afterMap = new mapboxgl.Map({
container: 'after',
style: 'https://geoserveis.icgc.cat/contextmaps/positron.json',
zoom: 14,
center: [-1.68, 48.1272],
});
// 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>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment