diff --git a/css/leaflet.draw.css b/css/leaflet.draw.css index 9d3b5b8..7e390f3 100644 --- a/css/leaflet.draw.css +++ b/css/leaflet.draw.css @@ -96,8 +96,7 @@ color: #FFF; /* Trying different fonts font: 11px/19px "Helvetica Neue", Arial, Helvetica, sans-serif; */ - font: 11px/19px "Times New Roman", Times New Roman, Times New Roman, serif; - line-height: 28px; + font: 11px/19px "Times New Roman", Times New Roman, Times New Roman, serif; line-height: 28px; text-decoration: none; padding-left: 10px; padding-right: 10px; @@ -231,8 +230,7 @@ color: #fff; /* Trying different fonts font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif; */ - font: 12px/18px "Times New Roman", Times New Roman, Times New Roman, serif; - margin-left: 20px; + font: 12px/18px "Times New Roman", Times New Roman, Times New Roman, serif; margin-left: 20px; margin-top: -21px; padding: 4px 8px; position: absolute; @@ -347,4 +345,4 @@ .leaflet-oldie .leaflet-draw-actions-top.leaflet-draw-actions-bottom a { height: 27px; line-height: 27px; -} \ No newline at end of file +} diff --git a/css/styles.css b/css/styles.css index 822e520..fc54531 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,4 +1,15 @@ #map { - width: 1024px; - height: 768px; + width: 100%; + height: 100%; +} +#slider-timestamp { + margin-top: 50px; + font-size: 15px; + line-height: 20px; + width: 180px; + padding-left: 20px; + } + .paramTitle { + color: red; + font-weight: bold; } diff --git a/index.html b/index.html index e74c704..dc12165 100644 --- a/index.html +++ b/index.html @@ -9,10 +9,10 @@ + - -
+
diff --git a/js/SliderControl.js b/js/SliderControl.js index 86dcbea..29be9b8 100644 --- a/js/SliderControl.js +++ b/js/SliderControl.js @@ -34,9 +34,7 @@ L.Control.SliderControl = L.Control.extend({ // Create a control sliderContainer with a jquery ui slider var sliderContainer = L.DomUtil.create('div', 'slider', this._container); - - $(sliderContainer).append('
'); - + $(sliderContainer).append('
'); //Prevent map panning/zooming while using the slider $(sliderContainer).mousedown(function () { map.dragging.disable(); @@ -45,6 +43,7 @@ L.Control.SliderControl = L.Control.extend({ map.dragging.enable(); //Only show the slider timestamp while using the slider $('#slider-timestamp').html(''); + $('#slider-timestamp').css('border',''); }); var options = this.options; @@ -88,16 +87,16 @@ L.Control.SliderControl = L.Control.extend({ //If there is no startTime property, this line has to be removed (or exchanged with a different property) var PrettyDate = new Date(options.markers[ui.value].feature.properties.startTime); - - //PrettyDate.getMinutes() += '0' + PgetMinutes; + + //PrettyDate.getMinutes() += '0' + PgetMinutes; var PrettyString = ""; PrettyString += PrettyDate.getHours() + ":"; PrettyString += (PrettyDate.getMinutes() < 10) ? ("0" + PrettyDate.getMinutes()) : PrettyDate.getMinutes(); - + if(options.markers[ui.value].feature.properties.startTime){ - if(options.markers[ui.value]) $('#slider-timestamp').html(PrettyString); + if(options.markers[ui.value]) $('#slider-timestamp').html('

Street Name:

' + options.markers[ui.value].feature.properties.streetName + '

Closure Extent:

' + options.markers[ui.value].feature.properties.closureExtent + '

Start Time:

' + PrettyString + '

End Time:

' + options.markers[ui.value].feature.properties.endTime.substr(0, 19) + '

' ); + $('#slider-timestamp').css('border','solid black'); } - console.log(options.range) if(options.range){ for (var i = ui.values[0]; i< ui.values[1]; i++){ if(options.markers[i]) map.addLayer(options.markers[i]); @@ -111,6 +110,12 @@ L.Control.SliderControl = L.Control.extend({ }else{ for (var i = options.minValue; i < ui.value ; i++) { if(options.markers[i]) map.addLayer(options.markers[i]); + if(options.markers[i]) { + if(options.markers[i].feature.properties.endTime < options.markers[ui.value].feature.properties.startTime) { + if(options.markers[i - 1]) map.removeLayer(options.markers[i - 1]); + if(options.markers[31].feature.properties.endTime < options.markers[ui.value].feature.properties.startTime) map.removeLayer(options.markers[31]); + } + } } for (var i = ui.value; i <= options.maxValue; i++) { if(options.markers[i]) map.removeLayer(options.markers[i]); diff --git a/js/app.js b/js/app.js index e77dca7..7422818 100644 --- a/js/app.js +++ b/js/app.js @@ -3,18 +3,16 @@ var map = L.map('map').setView([38.878432, -77.109218], 15); app.load = function() { - L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', { attribution: 'Map data © OpenStreetMap contributors', maxZoom: 18 }).addTo(map); $.getJSON("map.geojson", function(json) { - console.dir(json); - for( var i = 0; i < json.features.length; i++) - { - json.features[i]; - } - - + console.dir(json); + for( var i = 0; i < json.features.length; i++) + { + json.features[i]; + } var testlayer = L.geoJson(json); var sliderControl = L.control.sliderControl({ position: "topright", diff --git a/map.geojson b/map.geojson index d13bd04..6362f15 100644 --- a/map.geojson +++ b/map.geojson @@ -642,8 +642,8 @@ "properties": { "streetName": "19th Street North", "closureExtent": "from Lynn Street to North Nash Street", - "startTime": "2013-10-27T08:00:00.000Z", - "endTime": "2013-10-27T21:30:00.000Z" + "startTime": "2013-10-28T08:00:00.000Z", + "endTime": "2013-10-29T21:30:00.000Z" }, "geometry": { "type": "LineString", @@ -676,4 +676,4 @@ } } ] -} \ No newline at end of file +}