Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
TThomasG77
Last edited Nov 8, 2024
Created on Nov 8, 2024

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

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…

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
70% 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
69% 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
66% match
Loading thumbnail…

Leaflet - MapTiles

This example shows a full-screen interactive map that allows the viewer to switch between dozens of different tile layers, ranging from satellite imagery and street maps to terrain, watercolor, and dark matter styles. The code uses the Leaflet library to render the map and manage layer switching, while pulling tile URLs and attribution strings from the viz.js `viz.leaflet.tiles` API. It includes base layers from providers such as OpenStreetMap, Thunderforest, Stamen, Esri, and CartoDB, demonstrating how to assemble a multi-provider tile switcher in a single HTML page.

NNPashaP
66% 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
65% match
Loading thumbnail…

Leaflet WFS

This example shows a map of water areas rendered as a blue outline over an OpenStreetMap tile layer, with the view centered on coordinates near Cambridge, Ontario. It uses the Leaflet mapping library with the Leaflet-WFST plugin to load features from a GeoServer Web Feature Service endpoint, specifically the `osm:water_areas` layer. The code employs a bounding-box filter defined by the current map extent and sets the coordinate reference system to EPSG:3857 using proj4leaflet and proj4js. The visible style is a simple blue color with a weight of two pixels for the geographic features.

TThomasG77
64% match
Loading thumbnail…

Leaflet - default

This example displays a full-screen interactive map of the United States, centered on the country with an initial zoom level of five. It uses the Leaflet JavaScript library to create the map view and a tile layer from Esri’s NatGeoWorldMap, providing detailed geographic and political boundaries. The map relies on the `L.map` and `L.tileLayer` APIs, with tile URLs and attribution sourced from the vizjs.org helper library. The page sets the map container to occupy the entire viewport, allowing users to pan and zoom freely across the rendered tiles.

NNPashaP
63% match