updated map data and added feature counter

pnoll1 · Apr 4, 2018 · 0884976 · 0884976
1 parent a5fb42f
commit 0884976
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 13 deletions.
diff --git a/css/starter-template.css b/css/starter-template.css
@@ -29,4 +29,13 @@ body {
     float: left;
     margin-right: 8px;
     opacity: 0.7;
+}
+.counter{
+    padding: 6px 8px;
+    font: 14px/16px Arial, Helvetica, sans-serif;
+    background: white;
+    background: rgba(255,255,255,0.8);
+    box-shadow: 0 0 15px rgba(0,0,0,0.2);
+    border-radius: 5px;
+    color: #555;
 }
diff --git a/edits.geojson b/edits.geojson
diff --git a/js/map.js b/js/map.js
@@ -1,5 +1,4 @@
-var baselayers, ways, nodes, controls_layers, mymap, overlays, mapbox;
-//var mymap = L.map('map').setView([47.810, -122.384], 9); 
+var baselayers, ways, nodes, controls_layers, mymap, overlays, mapbox, featureCount;
 
 var mapbox = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
@@ -29,7 +28,7 @@ $.getJSON('edits.geojson',function (data) {
     });
     var nodes = L.geoJSON(data,{
     style: function (feature) {
-        return {stroke:false};
+        return {stroke:false,fill:false};
     }
     });
     ways.addTo(mymap);
@@ -38,21 +37,23 @@ $.getJSON('edits.geojson',function (data) {
     "nodes": nodes,
     "ways": ways
     };
-
+    featureCount = data.features.length.toString();
     var controls_layers = L.control.layers(baselayers, overlays);
     controls_layers.addTo(mymap);
+    counter.addTo(mymap);
 });
+/*
 var legend = L.control({position: 'bottomright'});
 legend.onAdd = function (mymap) {
-
     var div = L.DomUtil.create('div', 'legend');
-    div.innerHTML = 'OSM Edits'
-        //items = ['Markers', 'Ways'],
-        //labels = [<i style='background'>L.marker()</i>, 'Areas, Buildings, Streets'];
-
-
+    div.innerHTML = 'OSM Edits';
     return div;
 };
-
 legend.addTo(mymap);
-
+*/
+var counter = L.control({position: 'bottomright'});
+counter.onAdd = function(mymap) {
+    var divCounter = L.DomUtil.create('div', 'counter');
+    divCounter.innerHTML = 'Features: '+featureCount;
+    return divCounter;
+};
diff --git a/map.html b/map.html
@@ -60,6 +60,7 @@
 
        <div class="container">
         <div class="starter-template">
+            <div><h3>OSM Edits</h3></div>
             <div id="map"></div>
         </div>
        </div>