Tuiles vecteur OpenLayers

100%

Tuiles vecteur OpenLayers

✓ Published0🌍 Public

Last edited Apr 6, 2024

Created on Sep 10, 2021

A web map displays IGN’s PLAN.IGN vector tiles using OpenLayers and the ol-mapbox-style library. The OpenLayers map starts at a zoom level of 5 over France, then fetches the plan’s JSON style from data.geopf.fr and applies it to a hybrid-rendered VectorTile layer. The layer loads Mapbox Vector Tiles from a URL in the style’s source, with attribution added. A brief loading animation occurs while the style is fetched and applied before the map renders.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 89bf9a577b15f0a68bb59055eeb415a1

A map of the Paris region displays IGN-F/Geoportail basemap tiles using Leaflet 1.9.2. The code constructs a `L.tileLayer` that requests WMTS tiles from the `wxs.ign.fr` service, specifying the `GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2` layer with a 256-pixel tile size and zoom levels 0–18. Tile coordinates are inserted into the URL via `{z}`, `{y}`, and `{x}` placeholders. The map is centered on coordinates [48.845, 2.424] at zoom 10 using `L.map().setView`.

TThomasG77

74% match

Loading thumbnail…

Display a map

This example displays an interactive map of France using the Maplibre GL JS library. Two map styles are showcased: a standard topographic map from the IGN PLAN.IGN vector tiles, and an isohypse (contour line) style with an orange monochrome rendering, centered on the Alps. The code fetches style definitions as JSON and applies them to the map, adjusting the tile scheme for compatibility. Attribution is provided to the IGN data source.

TThomasG77

71% match

Loading thumbnail…

Display cadastre on Maplibre

This interactive map displays the French land registry, or cadastre, within the Maplibre GL rendering engine. It shows administrative boundaries—from regions down to individual communes—along with detailed cadastral sections, parcels, and buildings. Using the WebGL-driven Maplibre GL API, it loads vector tile sources from `openmaptiles.geo.data.gouv.fr`, with parcel lines appearing at zoom level 16 and property numbers labeled for identification. The styling, defined in a JSON style sheet, uses fill and line layers with conditional opacity to highlight parcels.

TThomasG77

66% match

Loading thumbnail…

Leaflet WMS

This example shows a map centered on a region in France, displaying both urban areas from a French government WMS layer alongside a French statistical data layer, with a scale bar. Built with the Leaflet JavaScript library, it combines OpenStreetMap tiles with two Web Map Service (WMS) layers. The first WMS source, accessed via a proxy from `data.europa.eu`, uses `L.WMS.source` and `source.getLayer("Tache_urbaine_1980_R43")`, while the second uses `L.tileLayer.wms` to load INSEE income data from an IGN endpoint.

TThomasG77

65% match

Loading thumbnail…

Recette génération tuiles monde OpenMaptiles

This example demonstrates how to generate global vector tile sets using OpenMapTiles and Planetiler, processing the entire OpenStreetMap planet file. The code runs Planetiler through Docker with 40GB of Java heap memory, using sparse array node mapping and memory-mapped storage to handle the large dataset efficiently. After generating the output MBTiles file, the script updates its metadata with SQLite commands to set proper attribution, center coordinates, and description for the tiles. The workflow relies on Docker, Planetiler, and sqlite3, with optional pre-downloading of the planet PBF file from OpenStreetMap.

TThomasG77

64% match

Loading thumbnail…

Add a WMS source untiled

This example shows a MapLibre GL map displaying a French urban-area layer from a WMS service, overlaid on OpenStreetMap raster tiles. The map fetches a WMS GetMap request for the current viewport, using the SphericalMercator library to convert map bounds into EPSG:3857 coordinates for the request. When the user pans or zooms, the `moveend` event triggers removal and re-addition of the image source and raster layer, refreshing the WMS overlay. The code uses `map.addSource` and `map.addLayer` to manage the dynamic image layer.

TThomasG77

63% match

Loading thumbnail…

Add a WMS source untiled

This example shows a map centered on a region in France, displaying a WMS layer of urban areas from 1980 over a basemap. The map uses the maplibre-gl library to render the WebGL map. A raster data source is added via a proxied WMS URL, with the GetMap request specifying the layer, coordinate system, and bounding box. The WMS tiles are integrated using the `map.addSource` and `map.addLayer` APIs.

TThomasG77

63% match

Loading thumbnail…

Suivi avancement LIDAR copie de https://macarte.ign.fr/carte/322ea69dab4c7e5afabc6ec7043b5994/acquisitionslidarhd

This choropleth map displays the progress of LIDAR HD acquisitions across the French national territory, with each polygon representing a survey block and its color indicating the completion percentage. Built with Vue, the visualization fetches GeoJSON data from an IGN web service, converts it from EPSG:3857 to EPSG:4326 using ogr2ogr, and renders the polygons with varying fill intensities to encode the "pourcentag" attribute. The underlying geospatial processing involves jq to parse nested JSON structures, while the frontend directly visualizes the FeatureCollection without additional map libraries.

TThomasG77

63% match