Skip to content

Instantly share code, notes, and snippets.

@jhnklly
Created October 15, 2015 19:33
Show Gist options
  • Save jhnklly/403267ca5da55e8372a4 to your computer and use it in GitHub Desktop.
Save jhnklly/403267ca5da55e8372a4 to your computer and use it in GitHub Desktop.
leaflet + esri tiles
<!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="http://leafletjs.com/dist/leaflet.js" charset="utf-8"></script>
<script src="http://mlevans.github.io/leaflet-hash/javascripts/leaflet-hash.js" charset="utf-8"></script>
<link type="text/css" href="http://leafletjs.com/dist/leaflet.css" rel="stylesheet"/>
<style>
/* Sets the map to be full screen with no margin */
body, html, #myMap{
height: 100%;
width: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="myMap"></div>
<script>
var map = L.map('myMap').setView([37.75, -122.5], 9);
var baselayer = L.tileLayer('http://server.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}.png', {
maxZoom: 18,
attribution: 'Map tiles by <a target="_blank" href="http://www.esri.com">esri</a>.'
}).addTo(map);
var hash = new L.Hash(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment