make a large png from map tiles

100%

make a large png from map tiles

✓ Published0🌍 Public

Last edited Dec 27, 2014

Created on Nov 26, 2014

This example stitches map tiles into a single large PNG image. It constructs a grid of tiles by fetching them from a specified tile server URL using `wget`, then assembles them with ImageMagick’s `montage` command, first creating vertical bands per column and then concatenating those bands horizontally. The code handles tile caching in a temporary directory, detects image formats with `identify`, and substitutes missing tiles with a placeholder. The process is driven by command-line arguments specifying zoom level and tile coordinates.

AI-generated description

Similar vizzes

Loading thumbnail…

Resize big images to the nearest power of two and cut them up into 256px tiles.

This Processing sketch demonstrates a tiling scheme for a 3x5400x2700 pixel world map image. It first resizes the image to the nearest power-of-two dimensions, then generates PNG tiles at multiple zoom levels by progressively downsampling the original and saving 256x256 crops. The code uses Processing's `loadImage()`, `resize()`, and `copy()` methods to extract the tiles, which are organized into folders by zoom level and column/row coordinates.

RRandomEtc

69% match

Loading thumbnail…

Node.js server for composing map tiles using modestmaps.js

This example demonstrates a Node.js server that dynamically composes map tiles into a single static image. The HTTP endpoint `/map` accepts zoom, latitude, longitude, width, and height parameters, then uses the modestmaps.js library to calculate which tiles are needed, fetches them via the `get` library, and draws them onto a Canvas using the `canvas` package. The OpenStreetMap tile provider is referenced directly, and the final composite is returned as a PNG.

RRandomEtc

63% match

Loading thumbnail…

Image Processing

This example demonstrates real-time image processing on map tiles using Polymaps and HTML5 Canvas. The map loads a static image from a URL and renders it through a custom canvas layer, where each tile’s pixel data is read with `getImageData` and halved in intensity before being written back via `putImageData`. The code uses `po.canvas()` to define the layer, `drawImage` to place the source, and `createImageData` to prepare the output. The result shows a visibly darkened version of the original image across the panning map.

Mmbostock

59% match

Loading thumbnail…

Gist 92ccda216d53db9f20a8f2b4c3a60b58

This mosaic visualization displays a high-resolution digital elevation model of Place Glacier, rendered as a tiled web map. It uses a custom `mosaicjson` specification to define tile sources from public S3-hosted GeoTIFF files, with a tile size of 256 pixels and a scale of 2. The map supports zoom levels from 0 to 24, and the code sets geographic bounds for the glacier area. The rendering relies on the mosaic JSON structure to assemble the image tiles, enabling interactive exploration of elevation data.

MMbrownshoes

59% match

Loading thumbnail…

Sequential Tiles

This example demonstrates a rainbow-colored tile grid that visualizes the sequence of map tiles in a web mapping interface. Each tile at a given zoom level is assigned a color based on its sequential position, creating a visible gradient that shows the order and layout of map tiles. The visualization uses the Polymaps JavaScript library’s `po.map()` and `po.layer()` APIs, with a custom `rainbow` function that calculates a hue from the tile’s column and row indices. The code also includes a custom `hsl` function for color conversion, and the map is configured with a 32x32 tile size and zoom level 4.

Mmbostock

59% match

Loading thumbnail…

Gist bcaa860506520cefb711aa4a9f885c12

This example assembles a large sprite sheet of data visualization badges, arranging hundreds of PNG icons into a single 8192-pixel square grid. It shows the process of converting individual SVG badge files into a unified texture atlas for efficient loading in a projector tool. The script uses Python’s Pillow library (`Image.open`, `resize`, `paste`) to read, scale, and tile each icon, while calculating the grid dimensions with `math.sqrt`. It sorts the source files from a local SVG directory, converts them to PNGs, and saves the final composite to `sprite_image.png`.

11wheel

58% match

Loading thumbnail…

d3-tile tileSize

This example demonstrates how the `tileSize` method of the d3-tile library controls the pixel dimensions of individual map tiles. It renders a zoomable, pannable Mapbox map as SVG, with a form control to toggle between different tile sizes. The map uses `d3.tile()` to generate tile coordinates and `d3.geoMercator()` for projection, while tile images are fetched from Mapbox’s tile server. The code shows how changing `tile.tileSize` directly affects the resolution and number of tiles displayed at a given zoom level.

CCurran Kelleher

58% 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

57% match