Skip to content

Instantly share code, notes, and snippets.

@cjdd3b
Created April 28, 2014 15:48
Show Gist options
  • Save cjdd3b/11376031 to your computer and use it in GitHub Desktop.
Save cjdd3b/11376031 to your computer and use it in GitHub Desktop.
<!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