Created
October 4, 2013 08:28
-
-
Save matael/6822735 to your computer and use it in GitHub Desktop.
This file contains hidden or 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> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>index</title> | |
| <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> | |
| <!-- Leaflet CDN --> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" /> | |
| <!--[if lte IE 8]> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" /> | |
| <![endif]--> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script> | |
| <style> | |
| /* Define height for map section */ | |
| #map { | |
| margin-top: 40px; | |
| height: 600px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="form"> | |
| <select id="ligne" name="ligne"> | |
| </select> | |
| </div> | |
| <div id="map"></div> | |
| <script type="text/javascript"> | |
| // initialize the map... | |
| var map = L.map('map',{center:[48.01, 0.20],zoom:13}); | |
| // ... load tile layer ... | |
| L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
| }).addTo(map); | |
| var base_url = "http://timeoapi.haum.org/v1"; | |
| function addToMap(stations) { | |
| for (n in stations) { | |
| var s = stations[n]; | |
| if (s['coords'].length != 0) { | |
| stations[n]['marker'] = L.marker(s['coords']).addTo(map).bindPopup('<h4>'+s['name']+'</h4>'); | |
| } | |
| } | |
| } | |
| function updateAll(stations, ligne) { | |
| $.getJSON(base_url+"/lines/"+ligne+"/stops?callback=?", null, function(a){ | |
| stops = a.stops | |
| for (code in stops) { | |
| if (stations[code].marker) { | |
| var next_stop = stops[code][0]; | |
| var opacity; | |
| (next_stop.substring(0, 2) <= 3) ? opacity = 1 : opacity = 0.5; | |
| stations[code].marker.unbindPopup(); | |
| stations[code].marker | |
| .bindPopup('<h4>'+stations[code].name+'</h4><p>Prochain passage :'+next_stop+'</p>') | |
| .openPopup().closePopup(); | |
| stations[code]['marker'].setOpacity(opacity); //mise en évidence de certains arrêts | |
| } | |
| } | |
| setTimeout(function() { updateAll(stations, ligne)}, 150000); // attente : 2'30" | |
| }); | |
| } | |
| function getLine(ligne) { | |
| var stations; | |
| var url = base_url+"/lines/"+ligne; | |
| $.getJSON(url + "?callback=?", null, function(a) { | |
| stations = a['stations']; | |
| addToMap(stations); | |
| updateAll(stations, ligne); | |
| return; | |
| }); | |
| } | |
| var state = ""; | |
| $(document).ready(function(){ | |
| // get list of lines | |
| $.getJSON(base_url+"/lines"+"?callback=?", null, function(a) { | |
| lines = a['lines']; | |
| for (name in lines) { | |
| $('#form select').html(function (idx, oldhtml) { | |
| return oldhtml+'<option value="'+lines[name]+'">'+name+'</option>'; | |
| }); | |
| } | |
| }); | |
| $('#ligne').change(function (){ | |
| getLine($(this).val()); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment