1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
$(document).ready(function() {
var self = this;
self.template = _.template('<dl> <% _.each(properties, function(val, key) { %>\
<% if (/\:/.exec(key)) { %> \
<dl> \
<% console.log(key.split(":")); %>\
<% console.log(val); %>\
<dt><%= key.split(":")[1] %> </dt> \
<dd><%= val %> </dd> \
</dl> \
<% } else {%> \
<dt><%= key %> </dt>\
<dd><%= val %> </dd>\
<% } %> \
<% }); %>\
</dl>');
fetchLayers();
var map = L.map( 'map', {
zoom: 12,
layers: [self.tileLayer],
});
function addHospitalLayer(){
L.control.layers(null, {
"Hospitals" : self.hospitalLayer
}).addTo(map);
// display layer
$('.leaflet-control-layers-selector').first().trigger('click')
}
$('body').bind('hospitalsfetched', addHospitalLayer);
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.on('moveend', function(e) {
var zoom = map.getZoom();
if (zoom < 10) {
return;
}
if (!self.hospitalLayer)
return;
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
bbox = [sw.lat, sw.lng, ne.lat, ne.lng].join(',');
var url = "http://overpass-api.de/api/interpreter?data=[out:json];node[amenity=hospital](" + bbox + ");out;";
converter = new op2geojson();
converter.fetch(url, function(data) {
console.log(data);
layer = L.geoJson(data, {
onEachFeature: function(feature, layer) {
debugger;
layer.bindPopup(self.template({ properties: feature.properties }));
}
});
self.hospitalLayer.addData(data);
});
})
map.locate({setView: true, maxZoom: 12});
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();
converter.fetch(url, function(data) {
layer = L.geoJson(data, {
onEachFeature: function(feature, layer) {
layer.bindPopup(self.template({ properties: feature.properties }));
}
});
self.hospitalLayer = layer;
$('body').trigger('hospitalsfetched');
});
}
function fetchLayers() {
geojsonLayer();
self.tileLayer = L.tileLayer('http://{s}.www.toolserver.org/tiles/osm-no-labels/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
});
}
function onLocationFound(e) {
self.currentLocation = e.latlng;
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
}
function onLocationError(e) {
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');
// }
}
});
|