Instantly share code, notes, and snippets.
Created
June 20, 2019 19:50
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save LorenzoStucchi/81da954bfb08359f07e7f43640f14e3d to your computer and use it in GitHub Desktop.
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> | |
| <!-- | |
| READ THIS: | |
| This is a part of a university project that can be found at this link | |
| [ https://github.com/LorenzoStucchi/bike4share ] | |
| For run this file you need also the file for the calculator of the distances | |
| - leaflet-knn.js | |
| that can be downloaded from [ https://github.com/mapbox/leaflet-knn ] | |
| The second file needed is the file with the position of the station: | |
| - stalls_free.geojson | |
| that can be found into the bike4share repository or into the gist | |
| [ https://gist.github.com/LorenzoStucchi/92c8920cc6452d389ff4d8e3647a63f5 ] | |
| The other files needed are just images: | |
| - bike.png | |
| - logo.png | |
| the 2 picture can be founded into the bike4share repository into the folder code/static/ | |
| [ https://github.com/LorenzoStucchi/bike4share/tree/master/code/static ] | |
| --> | |
| <html> | |
| <title>Bike4Share Map Premium + </title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="icon" href="logo.png" type="image/png"> | |
| </section style="margin-left: auto; margin-right: auto;"><br><br></section> | |
| <nav class="topnav"> | |
| <h1><a href="/map_nav.html"><img style="position: absolute; width:130px; height: 110px; margin-top: -50px; margin-bottom: -20px;" class="resize" src="logo.png" /></a></h1> | |
| </nav> | |
| <br> | |
| <br> | |
| <body> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" | |
| integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" | |
| crossorigin=""/> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.css" /> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" /> | |
| <style type="text/css"> | |
| html { font-family: sans-serif;} | |
| body { background-color: #56baed; } | |
| nav { background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; } | |
| .content > header { display: flex; align-items: flex-end; } | |
| .content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; } | |
| .post > header { display: flex; align-items: flex-end; font-size: 0.85em; } | |
| .post > header > div:first-of-type { flex: auto; } | |
| .post > header h1 { font-size: 1.5em; margin-bottom: 0; } | |
| .content form { margin: 1em 0; display: flex; flex-direction: column; } | |
| .content label { font-weight: bold; margin-bottom: 0.5em; } | |
| .content input, .content textarea { margin-bottom: 1em; } | |
| .content textarea { min-height: 12em; resize: vertical; } | |
| input[type=submit] { align-self: start; min-width: 10em; } | |
| .topnav {overflow: hidden; background-image: linear-gradient(#fff,#eee);} | |
| * {box-sizing: border-box;} | |
| #map_premium { height: 500px;width: 100%;} | |
| .leaflet-routing-alt{max-height: 220px} | |
| </style> | |
| <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" | |
| integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" | |
| crossorigin=""></script> | |
| <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script> | |
| <script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script> | |
| <section> | |
| <div id="map_premium"></div> | |
| </section> | |
| </body> | |
| <script src="stalls_free.geojson" type="text/javascript"></script> | |
| <script src="leaflet-knn.js" type="text/javascript"></script> | |
| <script type="text/javascript"> | |
| var layer_mapbox_streets = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { | |
| attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,' + | |
| ' <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | |
| 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', | |
| maxZoom: 18, | |
| id: 'mapbox.streets', | |
| accessToken: 'pk.eyJ1IjoibG9yZW56b3N0dWNjaGkiLCJhIjoiY2poOHkxbDV3MDZ6YjMwbzM2M2R1MjYxeiJ9._wsXJw4kbG-02Bhh9EXNQg' | |
| }); | |
| var layer_mapbox_satellite = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { | |
| attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,' + | |
| ' <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | |
| 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', | |
| maxZoom: 18, | |
| id: 'mapbox.satellite', | |
| accessToken: 'pk.eyJ1IjoibG9yZW56b3N0dWNjaGkiLCJhIjoiY2poOHkxbDV3MDZ6YjMwbzM2M2R1MjYxeiJ9._wsXJw4kbG-02Bhh9EXNQg' | |
| }); | |
| var layer_OSMStandard = L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png',{ | |
| attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,' + | |
| ' <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | |
| 'Imagery © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors', | |
| }); | |
| var bike_ic = new L.icon({ | |
| iconUrl: 'bike.png', | |
| iconSize: [50, 50], | |
| iconAnchor: [25, 50], | |
| popupAnchor: [0, -53] | |
| }); | |
| function onEachFeature(feature, layer) { | |
| if (feature.properties.FREE == 999) | |
| var popupContent = "<b>Id</b>: " + | |
| feature.properties.BIKE_SH + | |
| "<br><b>Number of stalls</b>: " + | |
| feature.properties.STALLI + | |
| "<br><b>Number of bike available</b>: " + | |
| "Realtime data not available" + | |
| "<br><b>Number of stalls free</b>: " + | |
| "Realtime data not available"; | |
| else | |
| var popupContent = "<b>Id</b>: " + | |
| feature.properties.BIKE_SH + | |
| "<br><b>Number of stalls</b>: " + | |
| feature.properties.STALLI + | |
| "<br><b>Number of bike available</b>: " + | |
| feature.properties.FREE + | |
| "<br><b>Number of stalls free</b>: " + | |
| feature.properties.AVAILABLE | |
| ; | |
| layer.bindPopup(popupContent) | |
| } | |
| var stat = L.geoJSON(stalls_free,{ | |
| pointToLayer: function(feature,latlng){ | |
| return L.marker(latlng,{icon: bike_ic}) | |
| }, | |
| onEachFeature: onEachFeature | |
| }); | |
| var mymap = L.map('map_premium',{ | |
| center: [45.47, 9.19], | |
| zoom: 13, | |
| layers: [layer_mapbox_streets, stat] | |
| }); | |
| var baseLayers = { | |
| "OpenStreetMap": layer_OSMStandard, | |
| "Streets": layer_mapbox_streets, | |
| "Satellite": layer_mapbox_satellite | |
| }; | |
| var overlays = { | |
| "stations": stat | |
| }; | |
| L.control.layers(baseLayers, overlays).addTo(mymap); | |
| L.Control.geocoder({ | |
| collapsed: true, | |
| position: 'topleft', | |
| text: 'Search', | |
| title: 'Testing' | |
| }).addTo(mymap); | |
| mymap.locate({setView: true, maxZoom: 16}); | |
| function onLocationFound(e) { | |
| var rad = e.accuracy / 2; | |
| var position = L.circle(e.latlng,{ | |
| color: 'blue', | |
| fillColor:'blue', | |
| radius: 1 | |
| }).addTo(mymap); | |
| L.circle(e.latlng, rad).addTo(mymap); | |
| routing.spliceWaypoints(0, 1, e.latlng); | |
| var near_start = leafletKnn(stat).nearest(e.latlng, 1); | |
| routing.spliceWaypoints(1, 1, near_start[0].layer._latlng) | |
| } | |
| mymap.on('locationfound', onLocationFound); | |
| function onLocationError(e) { | |
| alert(e.message); | |
| $('#nearest_stalls').html( | |
| "<p>"+ "<b>List of nearest stations</b>: <br><br>" + | |
| "You need to allow position to see the nearest stations" + | |
| "</p>" | |
| ) | |
| } | |
| mymap.on('locationerror', onLocationError); | |
| function createButton(label, container) { | |
| var btn = L.DomUtil.create('button', '', container); | |
| btn.setAttribute('type', 'button'); | |
| btn.innerHTML = label; | |
| return btn; | |
| } | |
| mymap.on('click', function(e) { | |
| var container = L.DomUtil.create('div'), | |
| destBtn = createButton('Go to this location', container); | |
| var removeContainer = L.DomUtil.create('div'), | |
| removeBtn = createButton('Remove waypoint',removeContainer); | |
| L.popup() | |
| .setContent(container) | |
| .setLatLng(e.latlng) | |
| .openOn(mymap); | |
| L.DomEvent.on(destBtn, 'click', function() { | |
| var near = leafletKnn(stat).nearest(e.latlng, 1); | |
| routing.spliceWaypoints(routing.getWaypoints().length, 1, near[0].layer._latlng); | |
| routing.spliceWaypoints(routing.getWaypoints().length, 1, e.latlng); | |
| mymap.closePopup(); | |
| }); | |
| }); | |
| var routing = L.Routing.control({ | |
| routeWhileDragging: true, | |
| reverseWaypoints: true, | |
| showAlternatives: true, | |
| geocoder: L.Control.Geocoder.nominatim() | |
| }).addTo(mymap); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment