mapsense-examples · August 12, 2015 22:41
diff --git a/index.html b/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>
	<!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">−</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>