Skip to content

Instantly share code, notes, and snippets.

@hpfast

hpfast/index.html

Created February 6, 2018 15:51
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 hpfast/555359c331c5f72cdea49375abee11a2 to your computer and use it in GitHub Desktop.
Save hpfast/555359c331c5f72cdea49375abee11a2 to your computer and use it in GitHub Desktop.
Download ZIP
leaflet basemap example
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A basic map with Leaflet</title>
<!--add Leaflet CSS-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<!--our own style rules-->
<style type="text/css">
body, html {
height: 90%;
}
#map-container {
height: 100%;
}
</style>
</head>
<body>
<!--The div in which the map will be created-->
<div id="map-container"></div>
<!--load leaflet.js-->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<!--our own code to create the map-->
<script>
let map = L.map('map-container');
map.setView([52.268, 4.998], 7);
let bglayer_Positron = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
subdomains: 'abcd',
maxZoom: 19
});
bglayer_Positron.addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment