Created
April 28, 2014 15:48
-
-
Save cjdd3b/11376031 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Leaflet Example</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<!-- Import Leaflet assets --> | |
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" /> | |
<script src="http://leafletjs.com/dist/leaflet.js"></script> | |
<!-- Import jQuery --> | |
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> | |
</head> | |
<body> | |
<!-- Create container for map --> | |
<div id="map" style="width: 800px; height: 800px;"></div> | |
<script> | |
// Initialize map | |
var map = L.map('map').setView([38.9483, -92.333], 12); | |
// Load tiles | |
var mapquestLayer = new L.TileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', { | |
maxZoom: 18, | |
attribution: 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>,<a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors.', | |
subdomains: ['otile1','otile2','otile3','otile4'] | |
}); | |
map.addLayer(mapquestLayer); | |
// Add a single point | |
// L.marker([38.9483, -92.333]) | |
// .addTo(map) | |
// .bindPopup('This is a point in Columbia!'); | |
// Add a bunch of points via JSON | |
$.ajax({ | |
url: 'incidents.json', | |
success: function (incidents) { | |
for (var i in incidents) { | |
var incident = incidents[i]; | |
L.marker([incident.YCoord, incident.XCoord]).addTo(map) | |
} | |
}, | |
error: function(xhr, error) { | |
console.log(error); | |
} | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment