Skip to content

Instantly share code, notes, and snippets.

@maptastik

maptastik/index.html

Created April 27, 2015 17:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maptastik/53f92a7c01e3179ffb39 to your computer and use it in GitHub Desktop.
Save maptastik/53f92a7c01e3179ffb39 to your computer and use it in GitHub Desktop.
Download ZIP
Zoom to location on link click
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Zoom to location on link click</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<style id="jsbin-css">
#map { height: 180px; }
</style>
</head>
<body>
<div id='map'></div>
<div class='map-navigation'>
<div>
<h1>Government Buildings</h1>
<p><a href='' data-zoom='18' data-position='38.210133, -84.559359'>County Courthouse</a></p>
<p><a href='' data-zoom='18' data-position='38.209501, -84.557031'>GSCPC</a></p>
</div>
<div>
<h1>Schools</h1>
<p><a href='' data-zoom='18' data-position='38.205853, -84.559008'>Garth</a></p>
<p><a href='' data-zoom='18' data-position='38.207860, -84.554646'>Georgetown College</a></p>
</p>
</div>
</div>
<script id="jsbin-javascript">
var map = L.map('map', {
maxZoom: 21,
minZoom: 16
});
map.setView([38.209985, -84.559826], 16);
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
document.querySelector('.map-navigation').onclick = function(abc) {
var pos = abc.target.getAttribute('data-position');
var zoom = abc.target.getAttribute('data-zoom');
if (pos && zoom) {
var locat = pos.split(',');
var zoo = parseInt(zoom);
map.setView(locat, zoo, {animation: true});
return false;
}
};
</script>
<script id="jsbin-source-css" type="text/css">#map { height: 180px; }</script>
<script id="jsbin-source-javascript" type="text/javascript"> var map = L.map('map', {
maxZoom: 21,
minZoom: 16
});
map.setView([38.209985, -84.559826], 16);
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
document.querySelector('.map-navigation').onclick = function(abc) {
var pos = abc.target.getAttribute('data-position');
var zoom = abc.target.getAttribute('data-zoom');
if (pos && zoom) {
var locat = pos.split(',');
var zoo = parseInt(zoom);
map.setView(locat, zoo, {animation: true});
return false;
}
};</script></body>
</html>
Raw
jsbin.fupaho.css
#map { height: 180px; }
Raw
jsbin.fupaho.js
var map = L.map('map', {
maxZoom: 21,
minZoom: 16
});
map.setView([38.209985, -84.559826], 16);
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
document.querySelector('.map-navigation').onclick = function(abc) {
var pos = abc.target.getAttribute('data-position');
var zoom = abc.target.getAttribute('data-zoom');
if (pos && zoom) {
var locat = pos.split(',');
var zoo = parseInt(zoom);
map.setView(locat, zoo, {animation: true});
return false;
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment