Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/index.html

Last active November 8, 2021 22:23
Show Gist options
  • Save ThomasG77/e9eacae4cd4c75e61327944997cb82d4 to your computer and use it in GitHub Desktop.
Save ThomasG77/e9eacae4cd4c75e61327944997cb82d4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Display cadastre on Maplibre</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css">
<style type="text/css">
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Pas de garantie de la persistance des URLs dans le futur
const url_style = 'styles-communes-et-cadastre-only.json';
// Pour une vue ortho, commenter la ligne ci-dessus, décommenter la ligne ci-dessous
// const url_style = 'https://raw.githack.com/etalab/cadastre.data.gouv.fr/master/components/react-map-gl/styles/ortho.json';
// const url_style = 'https://raw.githack.com/etalab/cadastre.data.gouv.fr/master/components/react-map-gl/styles/vector.json';
const map = new maplibregl.Map({
container: 'map', // container id
style: url_style, // style URL
center: [2.6, 46], // starting position [lng, lat]
zoom: 5 // starting zoom
});
</script>
</body>
</html>
Raw
styles-communes-et-cadastre-only.json
{
"version": 8,
"name": "Communes et parcelles",
"metadata": {
"mapbox:autocomposite": false,
"mapbox:groups": {
"1444849242106.713": {"collapsed": false, "name": "Places"},
"1444849334699.1902": {"collapsed": true, "name": "Bridges"},
"1444849345966.4436": {"collapsed": false, "name": "Roads"},
"1444849354174.1904": {"collapsed": true, "name": "Tunnels"},
"1444849364238.8171": {"collapsed": false, "name": "Buildings"},
"1444849382550.77": {"collapsed": false, "name": "Water"},
"1444849388993.3071": {"collapsed": false, "name": "Land"}
},
"mapbox:type": "template",
"openmaptiles:mapbox:owner": "openmaptiles",
"openmaptiles:mapbox:source:url": "mapbox://openmaptiles.4qljc88t",
"openmaptiles:version": "3.x",
"maputnik:renderer": "mbgljs"
},
"center": [0, 0],
"zoom": 1,
"bearing": 0,
"pitch": 0,
"sources": {
"cadastre": {
"type": "vector",
"url": "https://openmaptiles.geo.data.gouv.fr/data/cadastre.json"
},
"decoupage-administratif": {
"type": "vector",
"url": "https://openmaptiles.geo.data.gouv.fr/data/decoupage-administratif.json"
}
},
"sprite": "https://openmaptiles.github.io/osm-bright-gl-style/sprite",
"glyphs": "https://openmaptiles.geo.data.gouv.fr/fonts/{fontstack}/{range}.pbf",
"layers": [{
"id": "background",
"type": "background",
"minzoom": 0,
"maxzoom": 24,
"layout": {
"visibility": "visible"
},
"paint": {
"background-color": "rgba(255, 246, 241, 1)"
}
},
{
"id": "parcelles",
"type": "line",
"source": "cadastre",
"source-layer": "parcelles",
"minzoom": 16,
"maxzoom": 24,
"layout": {
"visibility": "visible",
"line-cap": "butt"
},
"paint": {
"line-color": "#0053b3",
"line-opacity": 0.9,
"line-width": {
"stops": [
[
16,
1
],
[
17,
2
]
]
}
}
},
{
"id": "parcelles-fill",
"type": "fill",
"source": "cadastre",
"source-layer": "parcelles",
"layout": {
"visibility": "visible"
},
"paint": {
"fill-color": "rgba(129, 123, 0, 1)",
"fill-opacity": [
"case",
[
"boolean",
[
"feature-state",
"hover"
],
false
],
0.7,
0.1
]
}
},
{
"id": "batiments-fill",
"type": "fill",
"source": "cadastre",
"source-layer": "batiments",
"minzoom": 16,
"paint": {
"fill-opacity": 0.3
}
},
{
"id": "batiments-line",
"type": "line",
"source": "cadastre",
"source-layer": "batiments",
"minzoom": 16,
"maxzoom": 22,
"layout": {
"visibility": "visible"
},
"paint": {
"line-opacity": 1,
"line-color": "rgba(0, 0, 0, 1)"
}
},
{
"id": "parcelle-highlighted",
"type": "fill",
"source": "cadastre",
"source-layer": "parcelles",
"filter": [
"==",
"id",
""
],
"paint": {
"fill-color": "rgba(1, 129, 0, 1)",
"fill-opacity": 0.7
}
},
{
"id": "sections",
"type": "line",
"source": "cadastre",
"source-layer": "sections",
"minzoom": 12,
"maxzoom": 24,
"layout": {
"visibility": "visible"
},
"paint": {
"line-color": "rgba(116, 134, 241, 1)",
"line-opacity": 0.9,
"line-width": 2
}
},
{
"id": "communes",
"type": "line",
"source": "decoupage-administratif",
"source-layer": "communes",
"minzoom": 8,
"maxzoom": 24,
"layout": {
"visibility": "visible"
}
},
{
"id": "departements",
"type": "line",
"source": "decoupage-administratif",
"source-layer": "departements",
"layout": {
"visibility": "visible"
}
},
{
"id": "regions",
"type": "line",
"source": "decoupage-administratif",
"source-layer": "regions",
"layout": {
"visibility": "visible"
}
},
{
"id": "code-section",
"type": "symbol",
"source": "cadastre",
"source-layer": "sections",
"minzoom": 12.5,
"maxzoom": 16,
"layout": {
"text-field": "{code}",
"text-font": [
"Noto Sans Bold"
],
"visibility": "visible"
},
"paint": {
"text-halo-color": "rgba(255, 246, 241, 1)",
"text-halo-width": 1.5
}
},
{
"id": "code-parcelles",
"type": "symbol",
"source": "cadastre",
"source-layer": "parcelles",
"minzoom": 16,
"filter": [
"all"
],
"layout": {
"text-field": "{numero}",
"text-font": [
"Noto Sans Bold"
],
"text-allow-overlap": false,
"visibility": "visible",
"text-size": 16
},
"paint": {
"text-halo-color": "#fff6f1",
"text-halo-width": 1.5,
"text-translate-anchor": "map"
}
}],
"id": "communes-et-parcelles"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment