Leaflet WFS

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.

73% match

[Working with spatial data](https://github.com/enjalot/wwsd)

This example displays a world map using Leaflet with an OpenStreetMap tile layer, overlaid with country boundaries from a GeoJSON file. The visualization begins by initializing a Leaflet map centered on coordinates [30, 0] at zoom level 2. The code then loads geographic data from a static GeoJSON URL hosted on GitHub and adds it to the map via `L.geoJson()`. The integration uses Leaflet 0.7.7 alongside D3 3.5.5 for fetching the remote JSON data, demonstrating a straightforward workflow for combining interactive map tiles with custom spatial datasets.

KKristinHenry

68% match

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

Simple Leaflet Map

This example shows an interactive Leaflet map centered on Wellington, New Zealand, with a layer control that lets the user switch between two base tile layers: OpenStreetMap and OpenTopoMap. Using the Leaflet 1.6.0 JavaScript API, it defines two `L.tileLayer` instances—one pulling raster tiles from `tile.openstreetmap.org` and the other from `tile.opentopomap.org`—and adds them as selectable base layers via `L.control.layers`. The map itself is initialized with `L.map`, set to a zoom level of 14, and displays only the OSM layer initially.

Dd3noob

Leaflet - geoJSON - Polygons

This example creates an interactive web map using the Leaflet library, displaying a custom GeoJSON MultiPolygon feature as a shaded area over OpenStreetMap tiles. The map is initialized with a center point and zoom level, then a tile layer provides the base map. A GeoJSON object defines two polygon shapes—one with a hole—which are added directly to the map via Leaflet’s `L.geoJSON` API. The map uses the VizJS library for tile configuration and fills the entire viewport.

NNPashaP

Leaflet starter

This example demonstrates a basic interactive map centered on Vancouver, Canada, using the Leaflet JavaScript library. It initializes a map view with coordinates [49, -123] at zoom level 10, then adds a tile layer from Thunderforest’s “spinal-map” style. The map renders OpenStreetMap data as background tiles, with the `L.map` and `L.tileLayer` APIs handling map creation and layer management. The page is styled to fill the entire viewport, and the map div occupies full height. No additional data or interactions are included beyond the base map display.

LLiddler

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

64% match

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.