Last active
August 29, 2015 14:05
-
-
Save ryanj/8c02d673cf8ead66f0f1 to your computer and use it in GitHub Desktop.
PARKS index.html
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 lang="en"> | |
<head> | |
<title>Map of Parks and Historic Sites</title> | |
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" /> | |
<!--[if lte IE 8]> | |
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" /> | |
<![endif]--> | |
<script src="//code.jquery.com/jquery-2.0.0.min.js"></script> | |
<link href='//fonts.googleapis.com/css?family=Milonga' rel='stylesheet' type='text/css'> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <style type="text/css"> | |
body { | |
padding: 0; | |
margin: 0; | |
} | |
html, body, #map { | |
height: 100%; | |
font-family: 'Milonga', cursive; | |
} | |
.leaflet-container .leaflet-control-zoom { | |
margin-left: 13px; | |
margin-top: 70px; | |
} | |
#map { z-index: 1;} | |
#title { z-index: 2; position: absolute; left: 10px; } | |
</style> | |
</head> | |
<body> | |
<h1 id="title">National Parks and Historic Sites</h1> | |
<div id="map"></div> | |
<script src="//cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script> | |
<script> | |
var map = L.map('map').setView([37.8, -122.3], 10); | |
var markerLayerGroup = L.layerGroup().addTo(map); | |
L.tileLayer('http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png', { | |
maxZoom: 18, | |
minZoom: 5, | |
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.' | |
}).addTo(map); | |
function getPins(e){ | |
bounds = map.getBounds(); | |
url = "api/Parks/within?lat1=" + bounds.getSouthWest().lat + "&lon1=" + bounds.getSouthWest().lng + "&lat2=" + bounds.getNorthEast().lat + "&lon2=" + bounds.getNorthEast().lng; | |
$.get(url, pinTheMap, "json") | |
} | |
function pinTheMap(data){ | |
//clear the current pins | |
map.removeLayer(markerLayerGroup); | |
//add the new pins | |
var markerArray = new Array(data.length) | |
for (var i = 0; i < data.length; i++){ | |
park = data[i]; | |
markerArray[i] = L.marker([park.pos.lat, park.pos.lng]).bindPopup(park.Name); | |
} | |
markerLayerGroup = L.layerGroup(markerArray).addTo(map); | |
} | |
map.on('dragend', getPins); | |
map.on('zoomend', getPins); | |
map.whenReady(getPins) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment