Skip to content

Instantly share code, notes, and snippets.

@kyletolle kyletolle/index.html
Last active Aug 29, 2015

Embed
What would you like to do?
Minimal Leaflet Page
<!DOCTYPE html>
<html>
<head>
<title>Minimal Leaflet Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style>
html, body, #map { margin: 0; height: 100%; width: 100%; }
</style>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map').setView([37.8, -96], 3);
<!-- http://switch2osm.org/using-tiles/getting-started-with-leaflet/ -->
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 2, maxZoom: 12, attribution: osmAttrib})
map.addLayer(osm);
</script>
</body>
</html>
@cbachich

This comment has been minimized.

Copy link

commented Jan 13, 2015

Please make this take up the full page.

body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}

@kyletolle

This comment has been minimized.

Copy link
Owner Author

commented Jan 14, 2015

Thanks @cbachich for the idea. I've updated the code above.

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.