From 2768b45c18009129c31b8b65851479f0a259b90c Mon Sep 17 00:00:00 2001 From: cmhedrick Date: Tue, 29 Apr 2014 14:00:18 -0400 Subject: [PATCH 1/2] map -> black white, detail box --- css/styles.css | 15 +++++++++++++-- index.html | 3 ++- js/SliderControl.js | 13 ++++++++++--- js/app.js | 2 +- map.geojson | 6 +++--- 5 files changed, 29 insertions(+), 10 deletions(-) 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 ae20a96..dc12165 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,10 @@ + -
+
diff --git a/js/SliderControl.js b/js/SliderControl.js index 6f2ac2c..ee1997d 100644 --- a/js/SliderControl.js +++ b/js/SliderControl.js @@ -34,7 +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(); @@ -43,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; @@ -85,9 +86,9 @@ L.Control.SliderControl = L.Control.extend({ if(!!options.markers[ui.value]) { //If there is no startTime property, this line has to be removed (or exchanged with a different property) if(options.markers[ui.value].feature.properties.startTime){ - if(options.markers[ui.value]) $('#slider-timestamp').html(options.markers[ui.value].feature.properties.startTime.substr(0, 19)); + 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:

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

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]); @@ -101,6 +102,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 36ef557..df6ecf3 100644 --- a/js/app.js +++ b/js/app.js @@ -3,7 +3,7 @@ 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); 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 +} From f69f627dfac314e46b83bfa6c98c8f6113f5cad6 Mon Sep 17 00:00:00 2001 From: cmhedrick Date: Tue, 29 Apr 2014 14:51:58 -0400 Subject: [PATCH 2/2] manually added new changes from sarl hackerspace branch --- css/leaflet.draw.css | 12 +++++++----- js/SliderControl.js | 10 +++++++++- js/app.js | 5 +++++ 3 files changed, 21 insertions(+), 6 deletions(-) diff --git a/css/leaflet.draw.css b/css/leaflet.draw.css index 58b0973..7e390f3 100644 --- a/css/leaflet.draw.css +++ b/css/leaflet.draw.css @@ -94,8 +94,9 @@ background-color: #919187; border-left: 1px solid #AAA; color: #FFF; - font: 11px/19px "Helvetica Neue", Arial, Helvetica, sans-serif; - line-height: 28px; +/* 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; text-decoration: none; padding-left: 10px; padding-right: 10px; @@ -227,8 +228,9 @@ -webkit-border-radius: 4px; border-radius: 4px; color: #fff; - font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif; - margin-left: 20px; +/* 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; margin-top: -21px; padding: 4px 8px; position: absolute; @@ -343,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/js/SliderControl.js b/js/SliderControl.js index ee1997d..29be9b8 100644 --- a/js/SliderControl.js +++ b/js/SliderControl.js @@ -85,8 +85,16 @@ L.Control.SliderControl = L.Control.extend({ slide: function (e, ui) { if(!!options.markers[ui.value]) { //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; + 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('

Street Name:

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

Closure Extent:

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

Start Time:

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

End Time:

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

' ); + 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'); } if(options.range){ diff --git a/js/app.js b/js/app.js index df6ecf3..7422818 100644 --- a/js/app.js +++ b/js/app.js @@ -8,6 +8,11 @@ app.load = function() { maxZoom: 18 }).addTo(map); $.getJSON("map.geojson", function(json) { + 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",