Taking a crack at Ivan Sánchez Ortega's nifty shim for LeafletJS.
Built with blockbuilder.org
license: mit |
Taking a crack at Ivan Sánchez Ortega's nifty shim for LeafletJS.
Built with blockbuilder.org
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset=utf-8 /> | |
<title>Apple basemap swipe attempt</title> | |
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script> | |
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> | |
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> | |
<script src='https://unpkg.com/leaflet.mapkitmutant@latest/Leaflet.MapkitMutant.js'></script> | |
<style> | |
body { margin:0; padding:0; } | |
#map { position:absolute; top:0; bottom:0; width:100%; } | |
</style> | |
</head> | |
<body> | |
<style> | |
.range { | |
position:absolute; | |
width:100%; | |
} | |
.leaflet-top .leaflet-control-zoom { | |
top:20px; | |
} | |
</style> | |
<div id='map'></div> | |
<input id='range' class='range' type='range' min='0' max='1.0' step='any' /> | |
<script> | |
accessToken = 'pk.eyJ1IjoibGFuZHBsYW5uZXIiLCJhIjoiY2pmYmpmZmJrM3JjeTMzcGRvYnBjd3B6byJ9.qr2gSWrXpUhZ8vHv-cSK0w'; | |
var map = L.map('map',{minZoom:4}).setView([44.434,-72.272], 9); | |
// start with a mapbox layer | |
L.tileLayer( | |
'https://api.mapbox.com/styles/v1/mapbox/streets-v8/tiles/{z}/{x}/{y}?access_token=' + accessToken, { | |
tileSize: 512, | |
zoomOffset: -1, | |
attribution: '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' | |
}).addTo(map); | |
// add an apple layer | |
var overlay = L.mapkitMutant({ | |
type: 'hybrid', // valid values are 'default', 'satellite' and 'hybrid' | |
authorizationCallback: function(done) { | |
//TODO: get a token | |
done("eyJhbGciOiJFUzI1NiIsImFsZyI6IkVTMjU2Iiwia2lkIjoiREJMQ0JQRlBMNiJ9.eyJpc3MiOiI2M05HRDc0R040IiwiaWF0IjoxNTI4NzUxNjg1LCJleHAiOjE1NjAyODc2ODV9.wr1vqwjkc43-x6D-go1LLgUHBz6S5HpZeyFjalrRfSwg0yCRTb1tAEGkY4hh-ORiCOmu2PYREAxgrKHcwOdRAw") | |
}, | |
language: 'en' | |
}).addTo(map); | |
var range = document.getElementById('range'); | |
function clip() { | |
var nw = map.containerPointToLayerPoint([0, 0]), | |
se = map.containerPointToLayerPoint(map.getSize()), | |
clipX = nw.x + (se.x - nw.x) * range.value; | |
overlay.getContainer().style.clip = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)'; | |
} | |
range['oninput' in range ? 'oninput' : 'onchange'] = clip; | |
map.on('move', clip); | |
clip(); | |
</script> | |
</body> | |
</html> |