e9eacae4cd4c75e61327 by ThomasG77

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>

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"
}