nrenner · December 26, 2019 23:20
diff --git a/index.html b/index.html
 <!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>
	<!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>