TileJSON.io - test

TileJSON.io - test

This example displays an interactive web map with three overlaid tile layers, including an OpenStreetMap basemap, an Azavea NLCD layer, and a CARTO Voyager basemap. The visualization uses TileJSON 2.2.0 metadata to define tile sources and layer properties such as opacity and visibility, which are rendered in a browser-based map client. A JSON configuration file controls the map’s center point, zoom level, and shareable Gist settings, while the tile layers are fetched from remote servers via standard XYZ tile scheme URLs. The code relies on TileJSON and map rendering APIs to composite and display the geographic data.

90% match

TileJSON.io - test

This example displays a tiled web map centered on a specific location, with an overlaid raster layer showing land cover data from the Azavea NLCD tiles. The visualization uses TileJSON 2.2.0 to define both the OpenStreetMap base layer and the additional data layer, which is rendered with adjustable opacity. The map view is configured with a precise center coordinate and zoom level, while the interface supports toggling layer visibility and sharing the current map state via a GitHub gist. The code references the TileJSON specification for tile URL patterns and layer properties.

89% match

TileJSON.io - test

This example shows a zoomable map with an overlaid raster layer, centered on a region and displaying a custom data tile set. The base layer uses OpenStreetMap tiles from `https://a.tile.openstreetmap.org/{z}/{x}/{y}.png`, while the overlay pulls tiles from a TileJSON endpoint (`https://a.tiles.azavea.com/nlcd/{z}/{x}/{y}.png`) via the TileJSON 2.2.0 specification. The code relies on the TileJSON.io tool, which parses the `info.json` and `tile.json` files to set the map’s center, zoom level, and layer visibility, using standard XYZ tile scheme for rendering.

86% match

Tile Viewer

This example shows a zoomable map interface where the user can pan and zoom across geographic tiles. It displays each tile as a numbered 256-by-256-pixel square with a red border and its coordinates as text, updating the visible grid as the viewport changes. The code uses d3.geo.tile, d3.geo.mercator, and d3.behavior.zoom, applying a CSS 3D matrix transform to reposition tiles during zoom events. It relies on a gist by mbostock and the d3.v3 library, with tile positions computed from the current zoom scale and translation.

Mmbostock

72% match

Vector Tiles - fixed

This example renders interactive vector tile maps using Mapzen vector tiles, displayed as SVG paths over a dark background. It uses d3.tile to manage tile loading and d3.zoom for pan and zoom interactions, with a d3.geoMercator projection and d3.geoPath to draw geographic features. The visualization shows roads, water, buildings, parks, and other land-use layers, each styled with distinct colors and stroke widths. Tile data is fetched as GeoJSON from Mapzen’s tile server and rendered dynamically, with a coordinate readout displayed at the bottom.

Aamortka

Tile layers examples

This example demonstrates three different ways to render plus-code grid tiles on interactive maps. The first map uses OpenLayers with vector WMS tiles, fetching GeoJSON data and displaying clickable cells that reveal the global plus code. The second map also uses OpenLayers but with image TMS tiles, applying red line and label styling options. The third map uses Leaflet with image TMS tiles over OpenStreetMap. All examples use the plus.codes grid server and showcase tile-layer integration with different JavaScript mapping libraries.

TThomasG77

Gist 2869abf438288423d49f56f8047b3ca9

This example builds a custom interactive map by layering a scanned historical campus map from MapWarper between two CARTO Voyager basemap tilesets: one without labels and one with labels only. The code constructs a JSON mapconfig specifying three HTTP tile layers and uses the requests library to post it to Carto’s map API. The result visually sandwiches the old map beneath modern road and label layers, preserving geographic context while overlaying contemporary annotations.

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