Skip to content

Instantly share code, notes, and snippets.

@ramhiser
Created April 21, 2015 18:08
Show Gist options
  • Save ramhiser/750fae43ceaf30e71a77 to your computer and use it in GitHub Desktop.
Save ramhiser/750fae43ceaf30e71a77 to your computer and use it in GitHub Desktop.
Basic Leaflet Example - Home Depot Stores in Austin Area
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Example -- Home Depot Stores</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>
<body>
<div id="map" style="width: 1200px; height: 800px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
var thd_stores = [
["Store Number: 509", 30.477300, -97.7988],
["Store Number: 6542", 30.222300, -97.7497],
["Store Number: 6553", 30.421800, -97.6690],
["Store Number: 6563", 30.168200, -97.7826],
["Store Number: 6839", 30.393100, -97.7313],
["Store Number: 6892", 30.307800, -97.7092],
["Store Number: 8418", 30.414500, -97.8507],
];
var map = L.map('map').setView([30.2500, -97.7500], 10);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
id: 'examples.map-i875mjb7'
}).addTo(map);
for (var i = 0; i < thd_stores.length; i++) {
marker = new L.marker([thd_stores[i][1], thd_stores[i][2]])
.bindPopup(thd_stores[i][0])
.addTo(map);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment