Last active
December 26, 2019 23:20
-
-
Save nrenner/8a7952687c5fddc84730 to your computer and use it in GitHub Desktop.
BRouter estimated_traffic_class
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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