<html>
<head>
<script type="text/javascript">var NREUMQ=NREUMQ||[];NREUMQ.push(["mark","firstbyte",new Date().getTime()]);</script>
<title>Leaflet map</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
</head>
<body>
<h1>Leaflet Map</h1>
<div id="map" style="height:1000px"></div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script type="text/javascript" charset="utf-8">
"use strict";
// Let's do this the right way and encapsulate the geolocation drawing in its own object
// This is just a lot cleaner and doesn't pollute the global namespace.
// Polluting the global namespace (window) is just lazy and can only lead to problems
// further down the road (when you accidentally reuse the same variable for example)
var Geolocation, geolocation,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
Geolocation = (function() {
// Constructor
function Geolocation(element) {
// Bind all functions to the Geolocation function
this.plotServerData = __bind(this.plotServerData, this);
this.getServerData = __bind(this.getServerData, this);
this.onLocationError = __bind(this.onLocationError, this);
this.onLocationFound = __bind(this.onLocationFound, this);
// Tiles generator
var myTiles;
myTiles = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
});
this.map = L.map(element);
myTiles.addTo(this.map);
// Event callbacks
this.map.on('locationfound', this.onLocationFound);
this.map.on('locationerror', this.onLocationError);
// Draw the map
this.map.locate({
setView: true,
maxZoom: 16
});
}
// When location is found, draw a popup with the current location and show how accurate it is.
// Then get the server data.
Geolocation.prototype.onLocationFound = function(e) {
var radius;
radius = e.accuracy / 2;
L.marker(e.latlng).addTo(this.map).bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(this.map);
return this.getServerData(e);
};
// When something goes wrong getting location data, just show an error message
Geolocation.prototype.onLocationError = function(e) {
return alert(e.message);
};
// Fetch remote geojson data and pass it to the plotting function
Geolocation.prototype.getServerData = function(e) {
var latlng;
latlng = e.latlng;
return $.getJSON("http://www.mijndomein.com/geoloc-json+" + latlng.lat + "+" + latlng.lng, this.plotServerData);
};
// Plot the server geojson data on the map
Geolocation.prototype.plotServerData = function(data) {
var geojson;
geojson = L.geoJson(data, {
onEachFeature: function(feature, layer) {
return layer.bindPopup(feature.properties.name);
}
});
return geojson.addTo(this.map);
};
return Geolocation;
})();
// Instantiate the function
geolocation = new Geolocation('map');
</script>
<script type="text/javascript">if(!NREUMQ.f){NREUMQ.f=function(){NREUMQ.push(["load",new Date().getTime()]);var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://js-agent.newrelic.com/nr-100.js";document.body.appendChild(e);if(NREUMQ.a)NREUMQ.a();};NREUMQ.a=window.onload;window.onload=NREUMQ.f;};NREUMQ.push(["nrf2","beacon-1.newrelic.com","d294042fdc","727136","NAFbYBBVCBZVAEFaWA1LbEYLG0w=",0,107,new Date().getTime()]);</script>
</body>
</html>
