Gist 89bf9a577b15f0a68bb59055eeb415a1

100%

Gist 89bf9a577b15f0a68bb59055eeb415a1

✓ Published0🌍 Public

Last edited Oct 18, 2022

Created on Oct 18, 2022

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`.

AI-generated description

Similar vizzes

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

77% match

Loading thumbnail…

Leaflet starter MM2

This example displays a close-up terrain map of Paris, centered on coordinates [48.8566, 2.3522] at zoom level 15. It uses the Leaflet JavaScript library (v0.7.7) to create a map instance and add a tile layer from Stamen’s terrain tiles, with attribution to OpenStreetMap contributors. The page is styled with a fixed full-screen layout, and the map fills the entire viewport. The code loads Leaflet’s CSS and JS from a CDN and then calls `L.map` and `L.tileLayer` to render the map.

CCartophile

75% match

Loading thumbnail…

Leaflet styling source to black&white/grayscale on client side

This example displays an interactive Leaflet map centered on a location near Paris, using the IGN-F/Géoportail WMTS tile service as its basemap. The map shows the “GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2” layer, yet a CSS class applied to the tile layer renders those tiles in black and white. The styling is achieved via the Leaflet `L.tileLayer` API, passing a `className: "bw"`, which triggers a CSS filter of `grayscale(100%) opacity(80%)` on the tile container. The map is created with `L.map("viewerDiv").setView([48.845,2.424],10)`.

TThomasG77

74% match

Loading thumbnail…

Tuiles vecteur OpenLayers

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.

TThomasG77

74% match

Loading thumbnail…

Leaflet map

This example shows a full-screen interactive map of France centered on Paris, using satellite imagery tiles from ArcGIS Online. It employs the Leaflet JavaScript library to create the map and set an initial view. The map is rendered via a tile layer that fetches World_Imagery tiles, allowing users to pan and zoom up to level 20. The page uses simple HTML and CSS for layout, with the map container taking up the entire viewport height.

Iismael-IT-dev

73% match

Loading thumbnail…

Gist f1a627d4af91444f3fcaea66c62c8319

A Leaflet map centered on France displays a circular buffer polygon around a point at coordinates (2.18, 46). The example uses proj4js and the reproject library to convert the point from WGS84 to EPSG:3857, then applies jsts.io.GeoJSONReader to read the geometry and create a 40,000-meter buffer via the jsts buffer method. After writing the buffered geometry back to GeoJSON, it reprojects to WGS84 and renders the result as a Leaflet GeoJSON layer on OpenStreetMap tiles, with a scale control and a marker at (0,0).

TThomasG77

72% 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

72% 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

69% match