Skip to content

Instantly share code, notes, and snippets.

@wknowles
Last active December 9, 2015 20:02
Show Gist options
  • Save wknowles/9fb04e056db44fb3e6f5 to your computer and use it in GitHub Desktop.
Save wknowles/9fb04e056db44fb3e6f5 to your computer and use it in GitHub Desktop.
boilerplate for quick and dirty leaflet mapping
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0"/>
<title>Leaflet template</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
html, body { height: 100% }
#map { min-height: 100%; }
body {
margin: 0;
font-family: Helvetica, Arial, sans-serif; font-size: 12px;
overflow: hidden;
background-color: #f00;
}
</style>
</head><body>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map');
map.setView([48.420395, -123.393588], 08);
var Esri_OceanBasemap = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri',
maxZoom: 13
});
Esri_OceanBasemap.addTo(map);
</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment