Skip to content

Instantly share code, notes, and snippets.

@maptastik maptastik/index.html
Created Apr 27, 2015

Embed
What would you like to do?
Zoom to location on link click
<!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>
#map { height: 180px; }
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
You can’t perform that action at this time.