diff options
| author | Harry Cutts <eternal.linux@gmail.com> | 2012-12-02 13:10:28 +0000 |
|---|---|---|
| committer | Harry Cutts <eternal.linux@gmail.com> | 2012-12-02 13:10:28 +0000 |
| commit | 06d385b749663fd389d862eaec42b6d33dd65e43 (patch) | |
| tree | 7e91db8de3962ddb17cac6884502edc011210bd1 | |
| parent | 40f11f8748cc704fe6f0c5e89cd56d9a37ba2aa4 (diff) | |
| parent | aebdba9aeb439074c7ad555a3d16f7047fe44a91 (diff) | |
| download | health-map-06d385b749663fd389d862eaec42b6d33dd65e43.tar health-map-06d385b749663fd389d862eaec42b6d33dd65e43.tar.gz | |
Merge branch 'master' of https://github.com/filbertkm/hospital-map
| -rw-r--r-- | index.html | 1 | ||||
| -rw-r--r-- | resources/map.js | 82 |
2 files changed, 29 insertions, 54 deletions
@@ -16,7 +16,6 @@ </head> <body> <div id="map"></div> - <div class="filterbox"</div> <script src="resources/map.js"></script> </body> </html> diff --git a/resources/map.js b/resources/map.js index 35ea6ef..0c43591 100644 --- a/resources/map.js +++ b/resources/map.js @@ -27,9 +27,26 @@ $(document).ready(function() { GlobalMap = map; function addHospitalLayer(){ - L.control.layers(null, { + 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') } @@ -41,7 +58,6 @@ $(document).ready(function() { } map.on('hospitalsfetched', addHospitalLayer); - map.on('hospitalsfetched', initFilters); map.on('locationfound', onLocationFound); map.on('locationerror', onLocationError); @@ -69,21 +85,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); } }); @@ -101,43 +122,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('<div><form> <% _.each(attributes, function (attr) { %> \ - <label><input type="checkbox" name=<%=attr %> value=<%= attr %>> <%= attr %> </label> \ - <% }); %> \ - </form></div>'); - 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); - $(el).dblclick(dontZoom); - }); - } - - 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', { @@ -156,12 +140,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) - // } }); |