Skip to content

Instantly share code, notes, and snippets.

@ThomasG77
Last active Sep 10, 2021
Embed
What would you like to do?
Make OpenLayers GL JS sample for IGN plan. Live demo at https://bl.ocks.org/ThomasG77/3047b6072f0411d11d23cfed1fdb2c5c
<!DOCTYPE html>
<html>
<head>
<title>Tuiles vecteur OpenLayers</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<!-- Openlayers -->
<link rel="stylesheet" href="https://openlayers.org/en/v6.3.1/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/v6.3.1/build/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
<script type="text/javascript" src="https://unpkg.com/ol-mapbox-style@3.1.0/dist/olms.js"></script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
/* configure the size of the map */
width: 100%;
height: 100%;
}
</style>
</head>
<body >
<!-- DIV pour la carte -->
<div id="map"></div>
<script>
var map = new ol.Map({
target: 'map',
view: new ol.View ({
zoom: 5,
center: ol.proj.fromLonLat([3.389162, 46.852644])
}),
interactions: ol.interaction.defaults()
});
const url_style = "https://wxs.ign.fr/essentiels/static/vectorTiles/styles/PLAN.IGN/standard.json";
fetch(url_style).then(res => res.json()).then(style => {
// Patching or not below line is ignored on OpenLayers side. Always considered xyz
// style.sources.plan_ign.scheme = 'xyz';
const attribution = 'Données cartographiques : © IGN'
style.sources.plan_ign.attribution = attribution;
const url_pbf = style.sources.plan_ign.tiles[0];
var vlayer = new ol.layer.VectorTile({
title: "Plan IGN vecteur",
renderMode: 'hybrid',
source: new ol.source.VectorTile({
tilePixelRatio: 1,
tileGrid: ol.tilegrid.createXYZ({ maxZoom: 19 }),
format: new ol.format.MVT(),
projection: new ol.proj.Projection({code:"EPSG:3857"}),
url : url_pbf,
attributions: attribution,
}),
declutter: true
});
map.addLayer(vlayer);
olms.applyStyle(vlayer, style, 'plan_ign').then(function () {});
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment