Dynamic tile clipping and more

100%

Dynamic tile clipping and more

✓ Published0🌍 Public

Last edited Aug 13, 2014

Created on Aug 13, 2014

This example demonstrates interactive map manipulation on a Leaflet map centered on Moscow. Users can draw polygons to dynamically clip OpenStreetMap tiles layered over a Stamen toner base map. The code uses D3.js to project drawn GeoJSON geometries via `d3.geo.path` and `d3.geo.transform`, applying the resulting path as an SVG `clipPath` to reveal the OSM overlay only within the drawn shapes. Additional SVG filters and patterns allow real-time effects like grayscale, hue rotation, and hatching on the map layers.

AI-generated description

Dynamic tiles clipping on Leaflet maps. There is no sync when zooming for now, but I hope to add it after Leafle 0.8 will be available. There are some bugs in webkit based browsers (blink of whole unclipped layer just after zoom) and no auto reclipping of layer when we recalculate clip-path.

Filters and patterns working great, no bugs detected.

Similar vizzes

Loading thumbnail…

Dynamic tile masking and more

This example demonstrates interactive masking of OpenStreetMap tiles over a stamen.com toner base map, controlled by user-drawn polygons. Using Leaflet’s draw control, users create shapes that act as SVG masks, revealing or hiding the underlying OSM tile layer. The visualization also applies SVG filters, such as grayscale, hue rotation, and sepia, to the map tiles, and offers a selection of hatch patterns for the mask fills. The code integrates D3.js (v3) for projecting GeoJSON geometries into Leaflet’s coordinate system and manipulates the SVG `defs` and mask elements directly.

KKoGor

87% match

Loading thumbnail…

Dynamic pattern animation

This example demonstrates interactive map-based drawing with dynamically animated SVG patterns. Users draw polygons or rectangles on a Leaflet map, selecting between none, diagonalHatch, or diagonalHash pattern fills via a dropdown control. The D3.js library animates the selected patterns—diagonalHatch drops and diagonalHash spins—while a separate toggle applies a blur filter to reveal hardware acceleration differences across browsers. Rendering uses Leaflet’s SVG overlay pane, with controls built through Leaflet’s L.Control extension API.

KKoGor

75% match

Loading thumbnail…

Leaflet.js × D3.js × geojson-vt.js - Redraw Canvas Tiles Map

This example shows a slippy map interface using Leaflet.js alongside D3.js to render geographic boundaries from a GeoJSON dataset. Canvas tiles are generated in the frontend, converting vector data into raster tiles on demand. The core function `addCanvasTile` leverages the `geojson-vt.js` `tileIndex.getTile` API to extract features for a given zoom level and coordinate. Drawing occurs directly on HTML5 canvas elements, and the code uses Canvas `getImageData` to enable click detection on rendered polygons, with D3 selection handling mouse events for property feature identification.

HHirosaji

73% match

Loading thumbnail…

Vector Tiles

This interactive map displays vector tiles of road networks from OpenStreetMap, rendered as SVG paths. It uses Mapzen’s vector tile API to load road data, and d3.geoMercator’s projection with a d3.tile-based tile system to fetch and display 256×256 tiles. The visualization supports pan and zoom via d3.zoom, with a matrix3d transform for scaling and translation. Mouse movement updates a location readout showing latitude and longitude, computed by inverting the projection.

Mmbostock

72% match

Loading thumbnail…

OpenStreetMap + d3 tiles + brush slider

This example combines an OpenStreetMap vector tile background with a brush slider to explore sensor data points in Boston. Interactive circles positioned via `d3.geo.mercator` and `d3.geo.path` display randomly generated force, angle, and quality values, with color encoding quality. A time-based `d3.svg.brush` slider filters the displayed bubbles, while the map tiles load from `d3.geo.tile` and OpenStreetMap’s vectiles JSON API.

SSaminu

71% match

Loading thumbnail…

Vector Tiles

This example displays vector-tiled map data, rendering both road networks and building footprints over San Francisco. The visualization loads GeoJSON tiles from an external OpenStreetMap vector-datasource service and projects them using `d3.geo.mercator` and `d3.geo.path`. It employs the custom `d3.geo.tile` helper to compute visible tile coordinates at the current zoom level, then asynchronously fetches and draws each tile’s features as SVG paths. Road types are distinguished by stroke colors, while buildings appear as solid black polygons.

Mmbostock

71% match

Loading thumbnail…

Clipped Map Tiles

This example clips MapBox Natural Earth II raster tiles to the outline of the United States, which is loaded as TopoJSON. Using the d3.geo.tile plug-in and a d3.geo.mercator projection, it generates a grid of image tiles and applies a clipPath referencing the land outline. The stroke class adds a black outline, and the code dynamically selects tile URLs from MapBox subdomains.

Mmbostock

70% match

Loading thumbnail…

Draw on Map

This interactive map allows users to draw and edit shapes directly on a geographic canvas, using the Leaflet mapping library and its Leaflet.draw plugin. The example demonstrates how to set up a drawing control with polygon draw enabled and a feature group for managing created shapes. A Mapbox tile layer provides the base map, and the map listens for the `draw:created` event to add newly drawn polygons to the feature group. The visualization also includes sample data files with city names and coordinates, though the current map focuses on the drawing functionality.

SSriyaI

70% match