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 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 = { area: areaString }

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

                markers[feature.id] = layer;
            },
            filter: function(feature, layer) {
                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

        self.converter.fetch("http://overpass-api.de/api/interpreter", query, zoom, function(data) {
            if (typeof self.villageLayers[catchmentArea.id] == 'undefined') {

                self.villageLayers[catchmentArea.id] = L.geoJson(data, {
                    style: function(feature) {
                        return {fillColor: 'green',
                                weight: 2,
                                opacity: 1,
                                color: 'black',
                                dashArray: '3',
                                fillOpacity: 0.1};
                    },
                    filter: function(feature, layer) {
                        return _.contains(_.keys(feature.properties), "place") ||
                               feature.properties["landuse"] == "residential";
                    }
                });

			    map.addLayer(self.villageLayers[catchmentArea.id]);
            } else {
                self.villageLayers[catchmentArea.id].clearLayers();
                self.villageLayers[catchmentArea.id].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)) {

            // 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><%= properties["area"] %></td></tr>\
<tr><td>Number of villages</td><td></td></tr>\
<tr><td>Population</td><td></td></tr>\
<tr><td>Furthest Village from health structure</td><td></td></tr>\
<tr><td>Average distance of all villages from health structure</td><td></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);
});