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

100%

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

✓ Published0🌍 Public

Last edited Nov 23, 2009

Created on Nov 23, 2009

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.

AI-generated description

Similar vizzes

Loading thumbnail…

make a large png from map tiles

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.

PPhilippe Rivière

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

62% match

Loading thumbnail…

A Modest Maps provider for OpenStreetMap in Processing

This example builds a Processing sketch using the Modest Maps library to display OpenStreetMap tiles. It shows how to create a custom map provider by extending `AbstractMapProvider` and specifying tile URL templates. The code uses a `MercatorProjection` with a specific transformation and randomly selects a subdomain (a, b, or c) for each tile request, fetching 256×256 PNG images from `tile.openstreetmap.org`. This demonstrates the integration between Processing, Modest Maps, and live OpenStreetMap tile data.

RRandomEtc

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

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

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

60% match

Loading thumbnail…

Map Tiles in D3

This interactive map demo, animated with D3, shows map tiles being loaded and positioned as users progressively zoom and pan. It provides a proof-of-concept for tile-based mapping using only D3, avoiding dedicated map libraries. The visualization fetches OpenStreetMap tiles from MapQuest’s tile server, addressing them by column, row, and zoom level. The animation uses D3's selection and transition methods, applying CSS 3D transforms via `matrixString` for smooth scaling, and manages a request queue for efficient image loading. The code demonstrates DOM manipulation and coordinate logic borrowed from Modest Maps, with a fallback to standard CSS transforms.

RRandomEtc

60% match

Loading thumbnail…

Pierce Tiles

A tiled world map presents the Peirce quincuncial projection, seamlessly repeating across a square grid so that continents weave through the seams. The visualization uses a static rendered image of the projection, loaded as a CSS background with an infinite animation that slowly translates the tiles diagonally, creating an optical illusion of continuous motion. The map itself is computed from geographic data using D3’s `d3.geoPeirceQuincuncial` and `d3.geoPath`, with the resulting PNG file reused as the page’s backdrop.

Mmbostock

59% match