From 3e74e6f135496a3e8b756b9a4cab13854324c044 Mon Sep 17 00:00:00 2001 From: Willi Date: Sun, 2 Dec 2012 00:02:02 +0100 Subject: added checkboxes for filter data --- index.html | 1 + resources/map.js | 66 ++++++++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 56 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index cd5d881..3d7f08d 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,7 @@
+
diff --git a/resources/map.js b/resources/map.js index 9a07f3a..938e08a 100644 --- a/resources/map.js +++ b/resources/map.js @@ -15,6 +15,9 @@ $(document).ready(function() { <% }); %> \ '); + // to filter them later + self.hospitalAttributes = []; + self.currentFilter = []; fetchLayers(); var map = L.map( 'map', { @@ -31,6 +34,7 @@ $(document).ready(function() { } map.on('hospitalsfetched', addHospitalLayer); + map.on('hospitalsfetched', initFilters); map.on('locationfound', onLocationFound); map.on('locationerror', onLocationError); @@ -58,6 +62,15 @@ $(document).ready(function() { function buildLayer(data) { return L.geoJson(data, { onEachFeature: function(feature, layer) { + var isHierarchical = new RegExp('\:'); + _.each(feature.properties, function(val, key) { + if (isHierarchical.exec(isHierarchical)) { + key = key.split(':')[1]; + if (_.contains(self.hospitalAttributes), key) { + self.hospitalAttributes.push(key); + } + } + }); layer.bindPopup(self.popupTemplate({ properties: feature.properties })); } }); @@ -73,6 +86,41 @@ $(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) { %> \ + value=<%= attr %>> <%= 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(); + $(el).click(checkedFilterBox); + }); + } + + function checkedFilterBox(event) { + _(self.currentFilter).without(event.currentTarget.value); + 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', { @@ -92,15 +140,11 @@ $(document).ready(function() { alert(e.message); } - function renderHospitalIcon() { - var hospitalIcon = L.icon({ - iconUrl: 'resources/img/hospital.png' - }); - self.hospitalLayer.addTo(map); -// if (self.currentLocation) { -// L.marker([self.currentLocation.lat, self.currentLocation.lng], {icon: hospitalIcon}) -// .addTo(self.hospitalLayer) -// .bindPopup('Hospital 1'); -// } - } + // 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