Skip to content

Instantly share code, notes, and snippets.

@nrenner
Last active December 26, 2019 23:20
Show Gist options
  • Save nrenner/8a7952687c5fddc84730 to your computer and use it in GitHub Desktop.
Save nrenner/8a7952687c5fddc84730 to your computer and use it in GitHub Desktop.
BRouter estimated_traffic_class
<!DOCTYPE html>
<html lang="en">
<head>
<title>BRouter estimated_traffic_class</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<style type="text/css">
body {
margin: 0;
}
html, body, #map {
width: 100%;
height: 100%;
}
#map {
cursor: pointer;
}
#slider_container {
background-color: #fff;
}
</style>
</head>
<body>
<div id="map">
<div id=slider_container class=leaflet-bar>
<input id=slider type=range min=0 max=100 value=60>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="http://mlevans.github.io/leaflet-hash/javascripts/leaflet-hash.js"></script>
<script>
(function () {
var picBounds = L.latLngBounds([[45, 5], [55, 15]]);
var map = new L.Map('map', {
crs: L.CRS.EPSG4326,
maxZoom: 14,
minZoom: 5
});
map.fitBounds(picBounds);
var hash = new L.Hash(map);
L.rectangle(picBounds, {
clickable: false,
color: 'black',
fillColor: 'none',
weight: 1
}).addTo(map);
// http://ows.terrestris.de/dienste.html#wms
var attribution = '© <a target="_blank" href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+ ', © <a target="_blank" href="http://openstreetmapdata.com">OpenStreetMap Data</a>'
+ ', © <a target="_blank" href="http://www.naturalearthdata.com">Natural Earth Data</a>'
+ ', WMS by <a target="_blank" href="http://ows.terrestris.de/dienste.html#wms">terrestris</a>'
+ ' using <a target="_blank" href="http://mapproxy.org/">MapProxy</a>';
var wmsGray = L.tileLayer.wms("http://ows.terrestris.de/osm-gray/service?", {
layers: 'OSM-WMS',
format: 'image/png',
attribution: attribution
}).addTo(map);
var wms = L.tileLayer.wms("http://ows.terrestris.de/osm/service?", {
layers: 'OSM-WMS',
format: 'image/png',
attribution: attribution
});
var layers = L.control.layers({
'terrestris OSM WMS gray': wmsGray,
'terrestris OSM WMS': wms
}, {});
var imageOverlays = L.layerGroup().addTo(map);
var imageOpacity = 0.6;
map.on('click', function(e) {
var urlTemplate = 'http://brouter.de/brouter_bin/traffic_pics/{we}{lng}_{sn}{lat}.png',
lat = Math.abs(Math.floor(e.latlng.lat)),
lng = Math.abs(Math.floor(e.latlng.lng)),
opts = {
lat: lat,
lng: lng,
we: e.latlng.lng < 0 ? 'W' : 'E',
sn: e.latlng.lat < 0 ? 'S' : 'N'
},
url = L.Util.template(urlTemplate, opts),
bounds = [[lat, lng], [lat + 1, lng + 1]];
imageOverlays.addLayer(L.imageOverlay(url, bounds, { opacity: imageOpacity }));
});
/*
var imageUrl = 'http://brouter.de/brouter_bin/traffic_pics/E8_N50.png', // south-west corner, 1*1 degree
imageBounds = [[50, 8], [51, 9]]; // southWest, northEast (latLng)
L.imageOverlay(imageUrl, imageBounds, { opacity: 0.5 }).addTo(map);
*/
L.OpacitySlider = L.Control.extend({
options: {
position: 'topright',
callback: function(opacity) {}
},
onAdd: function (map) {
var container = document.getElementById('slider_container'),
input = document.getElementById('slider');
var stop = L.DomEvent.stopPropagation;
L.DomEvent
.on(container, 'click', stop)
.on(container, 'mousedown', stop)
.on(container, 'dblclick', stop)
.on(container, 'mousewheel', stop)
.on(container, 'MozMousePixelScroll', stop);
container.setAttribute('title', 'Set transparency of overlay image');
input.oninput = L.bind(function(evt) {
var ele = evt.target || evt.srcElement;
this.options.callback(ele.value / 100);
}, this);
return container;
}
});
var slider = new L.OpacitySlider();
slider.options.callback = function(opacity) {
imageOverlays.eachLayer(function (layer) {
layer.setOpacity(opacity);
});
imageOpacity = opacity;
}
slider.addTo(map);
layers.addTo(map);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment