From facf5fb7a60be0364595a2a3813c553ee985a68e Mon Sep 17 00:00:00 2001 From: Katie Filbert Date: Sat, 1 Dec 2012 17:49:56 +0100 Subject: hospitals in the layer --- resources/map.js | 19 +++++++++++-------- resources/op2geojson.js | 32 ++++++++++++++++++-------------- 2 files changed, 29 insertions(+), 22 deletions(-) diff --git a/resources/map.js b/resources/map.js index e5c9b06..e6878ca 100644 --- a/resources/map.js +++ b/resources/map.js @@ -16,15 +16,18 @@ $(document).ready(function() { initLayerControl(); function geojsonLayer() { + url = "http://overpass-api.de/api/interpreter?data=[out:json];node[amenity=hospital](52.34,13.3,52.52,13.6);out;"; converter = new op2geojson(); - data = converter.geojson(); - var style = { - "color": "#ff7800", - "weight" : 5, - "opacity" : 0.65 - }; - layer = L.geoJson(data, style); - return layer; + converter.fetch(url, function(data) { + console.log(data); + var style = { + "color": "#ff7800", + "weight" : 5, + "opacity" : 0.65 + }; + layer = L.geoJson(data, style); + return layer; + }); } function fetchLayers() { diff --git a/resources/op2geojson.js b/resources/op2geojson.js index 8850fa9..1285fc1 100644 --- a/resources/op2geojson.js +++ b/resources/op2geojson.js @@ -5,42 +5,46 @@ op2geojson = function() { var instance = {}, geojson; - instance.fetch = function(url) { - $.getJSON("http://overpass-api.de/api/interpreter?data=[out:json];node[amenity=hospital](52.34,13.3,52.52,13.6);out;", { - format: "json" - }, + instance.fetch = function(url, callback) { + $.getJSON(url, { format: "json" }, function(data) { - $.each(data, function(i, item) { - console.log(item); + var features = []; + $.each(data.elements, function(i, item) { + if( item.type === 'node' ) { + features.push( instance.point(item) ); + } }); + geojson = instance.featureCollection(features); + callback(geojson); } ); }; - instance.feature = function() { + instance.point = function(node) { point = { + "type" : "Feature", "geometry" : { "type" : "Point", - "coordinates" : [13.3172386,52.480732] + "coordinates" : [node.lon,node.lat] }, - "type" : "Feature", "properties" : { "name" : "Sankt Gertrauden-Krankenhaus" }, }; return point; } - instance.featureCollection = function() { + instance.featureCollection = function(features) { collection = { "type" : "FeatureCollection", - "features" : [ - instance.feature(), - ] + "features" : features }; return collection; } instance.geojson = function() { - return instance.featureCollection(); + url = "http://overpass-api.de/api/interpreter?data=[out:json];node[amenity=hospital](52.34,13.3,52.52,13.6);out;"; + instance.fetch(url, function(data) { + return data; + }); } return instance; -- cgit v1.2.3 From 34026213a1d6aa2377b16aaa503fc12077980ce1 Mon Sep 17 00:00:00 2001 From: Katie Filbert Date: Sat, 1 Dec 2012 17:53:34 +0100 Subject: hospital layer has hospitals --- resources/map.js | 32 +++++++++++++++++--------------- resources/op2geojson.js | 32 ++++++++++++++++++-------------- 2 files changed, 35 insertions(+), 29 deletions(-) diff --git a/resources/map.js b/resources/map.js index 1b28a03..e14022a 100644 --- a/resources/map.js +++ b/resources/map.js @@ -16,22 +16,24 @@ $(document).ready(function() { initLayerControl(); function geojsonLayer() { - var converter = new op2geojson(); - var data = converter.geojson(); - var style = { - color: "red", - weight : 50, - opacity : 0.65 - }; - var layer = L.geoJson(data, { - style: function(feature) { - return style; - }, - onEachFeature: function(feature, layer) { - layer.bindPopup(feature.properties.name); - } + url = "http://overpass-api.de/api/interpreter?data=[out:json];node[amenity=hospital](52.34,13.3,52.52,13.6);out;"; + converter = new op2geojson(); + converter.fetch(url, function(data) { + var style = { + "color": "red", + "weight" : 50, + "opacity" : 0.65 + }; + layer = L.geoJson(data, { + style: function(feature) { + return style; + }, + onEachFeature: function(feature, layer) { + layer.bindPopup(feature.properties.name); + } + }); + return layer; }); - return layer; } function fetchLayers() { diff --git a/resources/op2geojson.js b/resources/op2geojson.js index 8850fa9..1285fc1 100644 --- a/resources/op2geojson.js +++ b/resources/op2geojson.js @@ -5,42 +5,46 @@ op2geojson = function() { var instance = {}, geojson; - instance.fetch = function(url) { - $.getJSON("http://overpass-api.de/api/interpreter?data=[out:json];node[amenity=hospital](52.34,13.3,52.52,13.6);out;", { - format: "json" - }, + instance.fetch = function(url, callback) { + $.getJSON(url, { format: "json" }, function(data) { - $.each(data, function(i, item) { - console.log(item); + var features = []; + $.each(data.elements, function(i, item) { + if( item.type === 'node' ) { + features.push( instance.point(item) ); + } }); + geojson = instance.featureCollection(features); + callback(geojson); } ); }; - instance.feature = function() { + instance.point = function(node) { point = { + "type" : "Feature", "geometry" : { "type" : "Point", - "coordinates" : [13.3172386,52.480732] + "coordinates" : [node.lon,node.lat] }, - "type" : "Feature", "properties" : { "name" : "Sankt Gertrauden-Krankenhaus" }, }; return point; } - instance.featureCollection = function() { + instance.featureCollection = function(features) { collection = { "type" : "FeatureCollection", - "features" : [ - instance.feature(), - ] + "features" : features }; return collection; } instance.geojson = function() { - return instance.featureCollection(); + url = "http://overpass-api.de/api/interpreter?data=[out:json];node[amenity=hospital](52.34,13.3,52.52,13.6);out;"; + instance.fetch(url, function(data) { + return data; + }); } return instance; -- cgit v1.2.3 From 3fef504fd23b6ac69fde72f242b50a33114c93f5 Mon Sep 17 00:00:00 2001 From: Katie Filbert Date: Sat, 1 Dec 2012 18:18:49 +0100 Subject: display hospital points --- resources/map.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/resources/map.js b/resources/map.js index e14022a..2a2d279 100644 --- a/resources/map.js +++ b/resources/map.js @@ -5,15 +5,20 @@ $(document).ready(function() { fetchLayers(); var map = L.map( 'map', { zoom: 12, - layers: [self.tileLayer, self.hospitalLayer] + layers: [self.tileLayer] }); - $('body').bind('hospitalsfetched', renderHospitalIcon); + function addHospitalLayer(){ + L.control.layers(null, { + "Hospitals" : self.hospitalLayer + }).addTo(map); + } + + $('body').bind('hospitalsfetched', addHospitalLayer); map.on('locationfound', onLocationFound); map.on('locationerror', onLocationError); map.locate({setView: true, maxZoom: 12}); - initLayerControl(); function geojsonLayer() { url = "http://overpass-api.de/api/interpreter?data=[out:json];node[amenity=hospital](52.34,13.3,52.52,13.6);out;"; @@ -32,12 +37,13 @@ $(document).ready(function() { layer.bindPopup(feature.properties.name); } }); - return layer; + self.hospitalLayer = layer; + $('body').trigger('hospitalsfetched'); }); } function fetchLayers() { - self.hospitalLayer = geojsonLayer(); + geojsonLayer(); self.tileLayer = L.tileLayer('http://{s}.www.toolserver.org/tiles/osm-no-labels/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © OpenStreetMap contributors' @@ -50,12 +56,6 @@ $(document).ready(function() { // }) } - function initLayerControl() { - L.control.layers(null, { - "Hospitals" : self.hospitalLayer - }).addTo(map); - } - function onLocationFound(e) { self.currentLocation = e.latlng; var radius = e.accuracy / 2; -- cgit v1.2.3