Skip to main content
100%

TileJSON.io - test

✓ Published0🌍 Public
Aandrewbt
Last edited Dec 20, 2020
Created on Dec 20, 2020

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.

AI-generated description

Similar vizzes

Loading thumbnail…

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.

Aandrewbt
93% match
Loading thumbnail…

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.

Aandrewbt
92% match
Loading thumbnail…

TileJSON.io - test

This example demonstrates a tile-based map comparison interface that layers two different tile sources over a base map, with adjustable opacity to blend between them. The visualization uses a WebGL-enabled map library to render Esri World Imagery as the base layer and Azavea’s NLCD land cover tiles as an overlaid layer, controlled by a slider. The code initializes a TileJSON 2.2.0 configuration, sets a default center and zoom level, and enables sharing the setup via a gist. It does not show any custom data processing or interaction beyond the basic tile loading and opacity control.

Aandrewbt
89% match
Loading thumbnail…

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

This example demonstrates a basic interactive map using Leaflet, with a full-screen OpenStreetMap tile layer centered on the world. The code initializes a Leaflet map with `L.map` and adds a tile layer via `L.tileLayer`, pulling raster tiles from `http://{s}.tile.osm.org`. The page loads Leaflet and D3 from CDNs, but only Leaflet’s API is used for rendering. No additional data or custom layers are present; the visualization simply shows how to set up a zoomable, pannable base map.

AAlan McConchie
71% match
Loading thumbnail…

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.

Aandrewbt
71% match
Loading thumbnail…

Gist 734eccf8853aef50f07b

This example shows a Leaflet map centered at the equator with zoom level 2, overlaid with a CartoDB layer. It uses Stamen’s toner tile layer as the base map, then creates a CartoDB layer via `cartodb.createLayer` and adds it to the map. The code includes callbacks for the layer’s `done` and `error` events, though no specific layer styling or data processing is shown.

Aandrewxhill
70% match
Loading thumbnail…

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

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
70% match