path: root/resources/map.js

function displayMap(self, map) {

	function createQueryData(bbox) {
		return "data=[out:json];(" +
				"(node[amenity=hospital]("+ bbox +");way[amenity=hospital]("+ bbox +");node(w););" +
				"(node[amenity=doctors]("+ bbox +");way[amenity=doctors]("+ bbox +");node(w););" +
				"(node[amenity=dentist]("+ bbox +");way[amenity=dentist]("+ bbox +");node(w););" +
                "(node(" + bbox + ");relation[type=boundary][boundary=catchment_area];way(r);node(w););" +
				");out;";
	}

    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.1
        });

        if (!L.Browser.ie && !L.Browser.opera) {
            layer.bringToFront();
        }
    }

    function resetHighlight(e) {
        self.catchmentAreaLayer.resetStyle(e.target);
    }

    var hospitalIcon = L.icon({
        iconUrl: 'resources/img/hospital.png',

        iconSize:     [18, 18],
        iconAnchor:   [9, 9], // point on the icon corresponding to marker's location
        popupAnchor:  [2, -9] // point to open the popup from relative to iconAnchor
    });

	var zoom = map.getZoom();
	if (zoom < 10) {
		return;
	}

	// Make the bounding box string
	var bounds = map.getBounds();
	var sw = bounds.getSouthWest();
	var ne = bounds.getNorthEast();
	bbox = [sw.lat, sw.lng, ne.lat, ne.lng].join(',');

    self.converter = new op2geojson();
	var markers = {};

    function createCatchmentAreaLayer(data) {
	    return L.geoJson(data, {
            style: function(feature) {
                return {fillColor: 'green',
                        weight: 2,
                        opacity: 1,
                        color: 'black',
                        dashArray: '3',
                        fillOpacity: 0.1};
            },
            onEachFeature: function(feature, layer) {
                layer.on({
                    mouseover: highlightFeature,
                    mouseout: resetHighlight,
                    click: function() {
                        markers[feature.properties.subject].openPopup();
                    }
                });
            },
            filter: function(feature, layer) {
                return _.contains(_.values(feature.properties), "catchment_area");
            }
        });
    }

    function createAmenityLayer(data, amenity) {
        return L.geoJson(data, {
            style: function(feature) {
                return {color: 'red',
                        fillColor: 'red',
                        fillOpacity: 0.2,
                        weight: 10};
            },
            onEachFeature: function(feature, layer) {
                var center;
                if (feature.geometry.type === "Point") {
                    layer.options.icon = hospitalIcon;
                    center = feature.geometry.coordinates;
                } else {
                    center = feature.geometry.coordinates[0];
                }

                var catchmentArea = self.catchmentAreas[feature.id];
                var settlements = catchmentArea.settlements;

                var format = new OpenLayers.Format.GeoJSON;
                var openLayersGeo = format.parseGeometry(catchmentArea.geometry);

                var areaInSquareMeters = openLayersGeo.getGeodesicArea();
                var areaString = areaInSquareMeters.toFixed(2) + "m" + "2".sup();
                if (areaInSquareMeters > 1000000) {
                    areaString = (areaInSquareMeters / 1000000).toFixed(2) + "km" + "2".sup();
                }

                var areaProperties;
                if (typeof settlements == "undefined") {
                    areaProperties = { area: areaString,
                                       number_of_settlements: "Unknown",
                                       population: "Unknown",
                                       greatest_settlement_dist: "Unknown",
                                       average_settlement_dist: "Unknown" 
                                     }
                } else {
                    var population = 0;
                    var numberOfSettlementsWithoutPopulation = 0;

                    _.each(settlements, function(settlement) {
                        if (typeof settlement.properties.population != "undefined") {
                            console.log(settlement.properties.population);
                            population += parseInt(settlement.properties.population);
                        } else {
                            numberOfSettlementsWithoutPopulation++;
                        }});

                    if (numberOfSettlementsWithoutPopulation != 0) {
                        if (numberOfSettlementsWithoutPopulation == 1) {
                            population = population + " (but " + numberOfSettlementsWithoutPopulation + " settlement has no population set)";
                        } else {
                            population = population + " (but " + numberOfSettlementsWithoutPopulation + " settlements have no population set)";
                        }
                    }

                    areaProperties = { area: areaString,
                                       number_of_settlements: settlements.length,
                                       population: population,
                                       greatest_settlement_dist: "Unknown",
                                       average_settlement_dist: "Unknown" 
                                     }
                }

                layer.bindPopup(self.popupTemplate({ properties: $.extend(feature.properties, areaProperties), coordinate: center }));

                markers[feature.id] = layer;
            },
            filter: function(feature, layer) {
				// TODO: Fix and make more efficient
                return _.contains(_.values(feature.properties), amenity);
            }
        });
    }

    function createCatchmentAreaVillageLayer(catchmentArea) {
        var poly = "";
        _.each(catchmentArea.geometry.coordinates[0], function(coordinatePair) {
            poly += coordinatePair[1] + " " + coordinatePair[0] + " ";
        });
        poly = poly.slice(0, -1);

        var query = 'data=[out:json];(node(poly:"' + poly + '");<;node(w););out;';

        // Convert the data to GeoJSON
		// TODO: Don't refetch villages on every map move
        self.converter.fetch("http://overpass-api.de/api/interpreter", query, zoom, function(data) {
            data.features = _.filter(data.features, function(feature) {
                                    return _.contains(_.keys(feature.properties), "place") ||
                                       feature.properties["landuse"] == "residential";
                                });
            catchmentArea.settlements = data.features;
			self.villageLayer.addData(data);
        });
    }

	var query = createQueryData(bbox);

	// Convert the data to GeoJSON
	self.converter.fetch("http://overpass-api.de/api/interpreter", query, zoom, function(data) {
		if (jQuery.isEmptyObject(self.amenityLayers)) {

			self.villageLayer = L.geoJson(data, {
				style: function(feature) {
					return {fillColor: 'green',
							weight: 2,
							opacity: 1,
							color: 'black',
							dashArray: '3',
							fillOpacity: 0.1};
				},
                onEachFeature: function(feature, layer) {
                    var center;
                    if (feature.geometry.type === "Point") {
                        center = feature.geometry.coordinates;
                    } else {
                        center = feature.geometry.coordinates[0];
                    }

                    var displayProperties = { name: feature.properties["name"], population: feature.properties["population"] };
                    if (typeof displayProperties["name"] == "undefined")
                        displayProperties["name"] = "Unknown";
                    if (typeof displayProperties["population"] == "undefined")
                        displayProperties["population"] = "Unknown";

                    layer.bindPopup(self.settlementPopupTemplate({ properties: feature.properties, coordinate: center }));
                },
			});
			map.addLayer(self.villageLayer);
			self.layersControl.addOverlay(self.villageLayer, "Settlements");
			self.villageLayer.clearLayers();
            // For each catchment area polygon
			_.each(
				_.filter(data.features,
					function(feature) {
						return _.contains(_.values(feature.properties), "catchment_area");
					}),
				function(catchmentArea) {
                    // Add it to the associative array
					self.catchmentAreas[catchmentArea.properties["subject"]] = catchmentArea;

                    // Create a village layer
                    createCatchmentAreaVillageLayer(catchmentArea);
				}
            );

			// Now deal with the catchment areas
            self.catchmentAreaLayer = createCatchmentAreaLayer(data);

			_.each(self.amenities, function(amenity, i) {
				self.amenityLayers[amenity] = createAmenityLayer(data, amenity);

				map.addLayer(self.amenityLayers[amenity]);
				self.layersControl.addOverlay(self.amenityLayers[amenity],
					self.amenities[i].charAt(0).toUpperCase() + self.amenities[i].slice(1));
			});

			map.addLayer(self.catchmentAreaLayer);
			self.layersControl.addOverlay(self.catchmentAreaLayer, "Catchment Areas");
		} else {
			self.catchmentAreaLayer.clearLayers();
			self.catchmentAreaLayer.addData(data);

			_.each(self.amenities, function(amenity, i) {
				// Update the data for each amenity layer
				self.amenityLayers[amenity].clearLayers();
				self.amenityLayers[amenity].addData(data);
			});

			_.each(self.catchmentAreas, function(catchmentArea, i) {
				// Update the data for each CatchmentAreaVillageLayer
                createCatchmentAreaVillageLayer(catchmentArea);
			});
		}
	});
}

$(document).ready(function() {

	var self = this;  // the HTMLDocument

	self.popupTemplate = _.template('<a href="http://www.openstreetmap.org/edit?editor=potlatch2&lat=<%= coordinate[1] %>&lon=<%= coordinate[0] %>&zoom=18">\
<img src="resources/img/potlatch.png"></a>\
<a href="http://www.openstreetmap.org/edit?editor=remote&lat=<%= coordinate[1] %>&lon=<%= coordinate[0] %>&zoom=18">\
<img src="resources/img/josm.png"></a>\
<h2>Hospital</h2>\
<table width="100%">\
<tr><td>Name</td><td align="right"><%= properties["name"] %></td></tr>\
<tr><td>Emergency</td><td align="right" style="text-transform:capitalize;"><%= properties["emergency"] %></td></tr>\
</table>\
<h2>Catchment Area</h2>\
<table>\
<tr><td>Surface Area</td><td align="right"><%= properties["area"] %></td></tr>\
<tr><td>Number of Settlements</td><td align="right"><%= properties["number_of_settlements"] %></td></tr>\
<tr><td>Population</td><td align="right"><%= properties["population"] %></td></tr>\
<tr><td>Furthest distance from settlement to health structure</td><td align="right"><%= properties["greatest_settlement_dist"] %></td></tr>\
<tr><td>Average distance of all settlements from health structure</td><td align="right"><%= properties["average_settlement_dist"] %></td></tr>\
</table>');

	self.settlementPopupTemplate = _.template('<a href="http://www.openstreetmap.org/edit?editor=potlatch2&lat=<%= coordinate[1] %>&lon=<%= coordinate[0] %>&zoom=18">\
<img src="resources/img/potlatch.png"></a>\
<a href="http://www.openstreetmap.org/edit?editor=remote&lat=<%= coordinate[1] %>&lon=<%= coordinate[0] %>&zoom=18">\
<img src="resources/img/josm.png"></a>\
<h3>Settlement</h3>\
<table width="100%">\
<tr><td>Name</td><td align="right"><%= properties["name"] %></td></tr>\
<tr><td>Population</td><td align="right"><%= properties["population"] %></td></tr>\
</table>');

	self.tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
	});

	var map = L.map( 'map', {
		zoom: 12,
		layers: [self.tileLayer],
	}).setView([12.4822, -11.9463], 11);
    // TODO: Not sure why the above call to setView is needed

	self.amenities = ["hospital", "doctors", "dentist"];
    // This contains the layers for each of the above amenities
    self.amenityLayers = {};
    self.catchmentAreas = {};
    self.villageLayers = {};

	self.layersControl = L.control.layers().addTo(map);

	L.control.locate().addTo(map);

    var legend = L.control({position: 'bottomright'});
    legend.onAdd = function (map) {
        var div = L.DomUtil.create('div', 'info legend');
        div.innerHTML += '<img src="resources/img/hospital.png"> Hospital<br>';
        return div;
    };
    legend.addTo(map);

	map.on('moveend', function(e) {
		displayMap(self, map);
	})

	function onLocationFound(e) {
		self.currentLocation = e.latlng;
		var radius = e.accuracy / 2;
		L.marker(e.latlng).addTo(map)
			.bindPopup("You are within " + radius + " meters of this point.").openPopup();
	}

	function onLocationError(e) {
		alert(e.message);
	}

	map.on('locationfound', onLocationFound);
	map.on('locationerror', onLocationError);

	map.locate({setView: true, maxZoom: 12});
	displayMap(self, map);
});