Last active
May 5, 2018 07:33
-
-
Save jbelien/73075d6f4583510e4d227921764dddc5 to your computer and use it in GitHub Desktop.
Use https://tile.openstreetmap.be/ with OpenLayers (https://openlayers.org/)
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>OpenLayers example</title> | |
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> | |
</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://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script> | |
<script> | |
var attribution = new ol.control.Attribution({ | |
collapsible: false | |
}); | |
var map = new ol.Map({ | |
controls: ol.control.defaults({attribution: false}).extend([attribution]), | |
layers: [ | |
new ol.layer.Tile({ | |
source: new ol.source.OSM({ | |
// Use `osmbe-fr` or `osmbe-nl` instead of `osmbe` if you want unilingual version of the baselayer. | |
url: "https://tile.openstreetmap.be/osmbe/{z}/{x}/{y}.png", | |
attributions: [ ol.source.OSM.ATTRIBUTION, "Tiles courtesy of <a href=\"https://geo6.be/\">GEO-6</a>" ], | |
maxZoom: 18 | |
}) | |
}) | |
], | |
target: "map", | |
view: new ol.View({ | |
center: [0, 0], | |
maxZoom: 18, | |
zoom: 2 | |
}) | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment