Skip to content

Instantly share code, notes, and snippets.

@mapsense-examples

mapsense-examples/index.html

Created August 12, 2015 22:41
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 mapsense-examples/2942fd6679f793576988 to your computer and use it in GitHub Desktop.
Save mapsense-examples/2942fd6679f793576988 to your computer and use it in GitHub Desktop.
Download ZIP
zoom custom
Raw
index.html
<!doctype html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v1.min.js" charset="utf-8"></script>
<script src="https://developer.mapsense.co/mapsense.js" charset="utf-8"></script>
<link type="text/css" href="https://developer.mapsense.co/mapsense.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
/* Sets the map to be full screen with no margin */
body, html, #myMap{
height: 100%;
width: 100%;
margin: 0; padding: 0;
overflow: hidden;
}
.map-nav {
position: absolute;
top: 9px;
right: 9px;
}
a.btn-zoom {
display: block;
width: 20px;
height: 20px;
font-size: 20px;
line-height: 20px;
background: #eee;
color: #555;
/*margin: 3px;*/
text-decoration: none;
text-align: center;
border: 1px solid #999;
border-radius: 0px;
}
a.btn-zoom:hover {
color: black;
background: white;
transition: 0.5s;
}
</style>
</head>
<body>
<div id="myMap"></div>
<div class="map-nav">
<a class="btn-zoom" id="zoom-in" href="#" title="Zoom in">+</a>
<a class="btn-zoom" id="zoom-home" href="#" title="Zoom home">
<i class="fa fa-home"></i>
</a>
<a class="btn-zoom" id="zoom-out" href="#" title="Zoom out">&minus;</a>
</div>
<script>
var map = mapsense
.map("#myMap") // Select an element to add the map to
.add(mapsense.basemap().apiKey("key-2d5eacd8b924489c8ed5e8418bd883bc").style("sketch")) //add a basemap layer and append your API key
// Our home extent
var home_extent = [
{lon: -156, lat: 19.1},
{lon: -66.4, lat: 55.9}
];
// After the html elements load, connect the function to the buttons
document.addEventListener("DOMContentLoaded", function(event) {
d3.select('#zoom-in').on('click', function(){ zoomIn(map); });
d3.select('#zoom-home').on('click', function(){
zoomHome(map);
});
d3.select('#zoom-out').on('click', function(){ zoomOut(map); });
});
function zoomIn(map) { map.zoom(map.zoom()+1); }
function zoomOut(map) { map.zoom(map.zoom()-1); }
function zoomHome(map) {
map.extent(home_extent);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment