Skip to main content
100%

TileJSON.io - test

✓ Published0🌍 Public
Aandrewbt
Last edited Mar 8, 2019
Created on Mar 8, 2019

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.

AI-generated description

Similar vizzes

Loading thumbnail…

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.

Aandrewbt
92% match
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
91% 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
86% 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
74% match
Loading thumbnail…

Zoomable Map Tiles

This interactive map shows a zoomable view of OpenStreetMap tiles that smoothly pans and zooms across geographic regions. It uses the `d3.geo.tile` plugin to calculate which 256x256 tile images are visible in the viewport based on current scale and translate values, while `d3.behavior.zoom` handles user panning and zooming interactions. The tiles are rendered as `img` elements positioned absolutely, and a `d3.geo.mercator` projection inverts mouse coordinates to display the latitude and longitude at the cursor.

Mmbostock
71% 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
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…

world colormap

The example displays a world map using a tile-based raster layer, centered on the globe with an initial zoom level of two. It shows geographic geography-class tiles from Mapbox, rendered through the OpenLayers 3 library’s `ol.layer.Tile` and `ol.source.TileJSON` APIs. The map uses a Canvas renderer and a 2D view (`ol.View2D`), with the page styling the map container via CSS. The visualization demonstrates basic map setup and tile loading from a remote JSON endpoint.

Aaaizemberg
69% match