From d9e20235bb4840e4346b164f39292780ce67cbc9 Mon Sep 17 00:00:00 2001 From: Willi Date: Sun, 2 Dec 2012 13:15:14 +0100 Subject: checkboxes only for boolean attributes --- resources/map.js | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/resources/map.js b/resources/map.js index 50fdd87..52962f3 100644 --- a/resources/map.js +++ b/resources/map.js @@ -27,7 +27,7 @@ $(document).ready(function() { GlobalMap = map; function addHospitalLayer(){ - L.control.layers(null, { + self.layers = L.control.layers(null, { "Hospitals" : self.hospitalLayer }).addTo(map); // display layer @@ -63,21 +63,26 @@ $(document).ready(function() { function buildLayer(data) { return L.geoJson(data, { - onEachFeature: function(feature, layer) { - storeAllAttributeKeys(feature); - layer.bindPopup(self.popupTemplate({ properties: feature.properties })); - } + onEachFeature: function(feature, layer) { + storeBooleanAttributeKeys(feature); + layer.bindPopup(self.popupTemplate({ properties: feature.properties })); + }, }); } - function storeAllAttributeKeys(feature) { + function storeBooleanAttributeKeys(feature) { var isHierarchical = new RegExp('\:'); + + function isBoolean (val) { + return val === 'yes' || val === 'no'; + } + var keys = _.keys(feature.properties); _.each(feature.properties, function(val, key) { if (isHierarchical.exec(key)) { key = key.split(':')[1]; } - if (!_.contains(self.hospitalAttributes, key)) { + if (!_.contains(self.hospitalAttributes, key) && isBoolean(val)) { self.hospitalAttributes.push(key); } }); @@ -116,15 +121,13 @@ $(document).ready(function() { $('.filter-box').html(t); _.each($('.filter-box input'), function(el) { //first check them all - el.click(); + // el.click(); // attach click handler $(el).click(checkedFilterBox); - $(el).dblclick(dontZoom); }); } function checkedFilterBox(event) { - _(self.currentFilter).without(event.currentTarget.value); var prev = self.hospitalLayer; // L.control.layers(null, { // "Hospitals" : TODO qgitnew Layer -- cgit v1.2.3 From aebdba9aeb439074c7ad555a3d16f7047fe44a91 Mon Sep 17 00:00:00 2001 From: Willi Date: Sun, 2 Dec 2012 13:59:21 +0100 Subject: filtering boolean attributes works --- index.html | 1 - resources/map.js | 61 ++++++++++++++++---------------------------------------- 2 files changed, 17 insertions(+), 45 deletions(-) diff --git a/index.html b/index.html index 3d7f08d..cd5d881 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,6 @@
-
diff --git a/resources/map.js b/resources/map.js index 52962f3..592eae1 100644 --- a/resources/map.js +++ b/resources/map.js @@ -27,15 +27,31 @@ $(document).ready(function() { GlobalMap = map; function addHospitalLayer(){ + var filteredLayers = _.map(self.hospitalAttributes, function (attr) { + return L.geoJson(self.hospitals, { + onEachFeature: function(feature, layer) { + layer.bindPopup(self.popupTemplate({ properties: feature.properties })); + }, + filter: function(feature, layer) { + return _.contains(_.keys(feature.properties), attr); + } + }); + }); + self.layers = L.control.layers(null, { "Hospitals" : self.hospitalLayer }).addTo(map); + + debugger; + _.each(filteredLayers, function(layer, i) { + self.layers.addOverlay(layer, self.hospitalAttributes[i]); + }); + // display layer $('.leaflet-control-layers-selector').first().trigger('click') } map.on('hospitalsfetched', addHospitalLayer); - map.on('hospitalsfetched', initFilters); map.on('locationfound', onLocationFound); map.on('locationerror', onLocationError); @@ -100,41 +116,6 @@ $(document).ready(function() { }); } - function initFilters() { - var FilterControl = L.Control.extend({ - options: { - position: 'topright' - }, - onAdd: function (map) { - // create the control container with a particular class name - var container = L.DomUtil.create('div', 'filter-box'); - return container; - } - }); - var template = _.template('
<% _.each(attributes, function (attr) { %> \ - \ - <% }); %> \ -
'); - var t = template({ attributes: self.hospitalAttributes }); - - map.addControl(new FilterControl()); - $('.filter-box').html(t); - _.each($('.filter-box input'), function(el) { - //first check them all - // el.click(); - // attach click handler - $(el).click(checkedFilterBox); - }); - } - - function checkedFilterBox(event) { - var prev = self.hospitalLayer; - // L.control.layers(null, { - // "Hospitals" : TODO qgitnew Layer - // }).addTo(map); - // var filteredHospitals = L.layer - } - function fetchLayers() { geojsonLayer(); self.tileLayer = L.tileLayer('http://{s}.www.toolserver.org/tiles/osm-no-labels/{z}/{x}/{y}.png', { @@ -153,12 +134,4 @@ $(document).ready(function() { function onLocationError(e) { alert(e.message); } - - // function renderHospitalIcon(feature, latlng) { - // var hospitalIcon = L.icon({ - // iconUrl: 'resources/img/hospital.png' - // }); - // debugger; - // L.marker(latlng, {icon: hospitalIcon}).addTo(map) - // } }); -- cgit v1.2.3