Last active
April 2, 2019 09:11
-
-
Save jbelien/043c678a0d857d4d3f37c78aee48588a to your computer and use it in GitHub Desktop.
Use https://tile.openstreetmap.be/ with Leaflet (https://leafletjs.com/)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Leaflet example</title> | |
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" | |
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" | |
crossorigin=""/> | |
<style> | |
#map { height: 350px; } | |
</style> | |
</head> | |
<body> | |
<h1>Hello world!</h1> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est mi, auctor vitae pellentesque quis, porta nec augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non lacus eu mi aliquet fringilla. Pellentesque eget nisi nec augue blandit dictum. In volutpat turpis est, sed convallis arcu finibus at. Mauris eu vulputate tortor. Maecenas dignissim auctor efficitur. Sed hendrerit ipsum eu arcu gravida, sed laoreet mauris luctus. Nam id metus ipsum. Sed nec facilisis sem.</p> | |
<div id="map"></div> | |
<p>Sed facilisis mattis metus. In id sem a lectus sodales pellentesque. Vestibulum nec porta ipsum, quis consequat eros. Nam fringilla nibh ligula, eget sollicitudin urna vulputate eu. Nam orci odio, blandit sed felis eu, maximus placerat nibh. Pellentesque ornare urna quis venenatis tincidunt. Nunc dapibus tristique ultrices. In mattis, dolor id mollis porta, diam nibh hendrerit quam, quis mollis turpis ante at erat. Suspendisse vel lorem velit. In luctus, elit et dignissim sagittis, neque tellus tincidunt est, ut consequat nisi purus id eros. Nulla eget sem elit. Morbi vel metus feugiat, condimentum felis eget, faucibus erat. Suspendisse ac nulla a leo varius vulputate vitae eget metus. Nunc ipsum purus, fermentum in libero vel, semper pharetra dui. Nullam pulvinar diam a nunc luctus, a iaculis dui ultrices. </p> | |
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" | |
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" | |
crossorigin=""></script> | |
<script> | |
var mymap = L.map('map').setView([0, 0], 2); | |
// Use `osmbe-fr` or `osmbe-nl` instead of `osmbe` if you want unilingual version of the baselayer. | |
L.tileLayer("https://tile.openstreetmap.be/osmbe/{z}/{x}/{y}.png", { | |
attribution: "© <a href=\"http://openstreetmap.org\">OpenStreetMap</a> contributors, Tiles courtesy of <a href=\"https://geo6.be/\">GEO-6</a>", | |
maxZoom: 18, | |
}).addTo(mymap); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment