Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
RRandomEtc
Last edited Aug 23, 2011
Created on Aug 23, 2011

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Modest Maps JS

Modest Maps JS demonstrates a slippy-map interface using the Modest Maps library, showing how a map canvas can be panned and zoomed by manipulating a `Coordinate` system with `row`, `column`, and `zoom` properties. The code defines core map classes and event handling for mouse interactions, using utility functions like `MM.Point.interpolate` and `MM.Coordinate.toKey` to manage tile positioning. It renders map tiles by computing coordinate containers, relying on the library’s own math for projection and viewport updates, with no external data source beyond the bundled mapping logic.

RRandomEtc
74% match
Loading thumbnail…

shape rendering in nodejs with LearnBoost's node-canvas

This example demonstrates dynamic, tile-based map rendering in Node.js using LearnBoost's node-canvas library. It projects GeoJSON feature coordinates onto a spherical Mercator grid and serves individual 256x256 pixel tiles over HTTP. The code loads multiple geographic layers, such as park boundaries, water bodies, and street centerlines from naturalearthdata.com or datasf.org, applies fill and stroke styles, and caches rendered canvases for reuse. It uses the canvas context's `moveTo`, `lineTo`, `scale`, and `translate` methods to draw the parsed geometries, then streams PNG output to the client.

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

Modest Maps JS

This example shows a map of the United States that restricts panning and zooming to a predefined geographic extent, using the Modest Maps JS library. The code overrides the map provider’s `sourceCoordinate` method to reject tile coordinates outside the min and max zoom levels and bounding box, and overrides `map.enforceLimits` to keep the view centered within those bounds. It uses the `MM.TemplatedMapProvider` to load OpenStreetMap tiles from MapQuest’s tile server, and initializes the view with `setCenterZoom` on a location near Oakland, California.

RRandomEtc
69% match
Loading thumbnail…

Modest Maps JS - Smooth Efficient Zooming and Panning

Animating through space using the Modest Maps JS library, this example demonstrates the smooth and efficient zooming and panning technique described by Jarke J. van Wijk and Wim A.A. Nuij. The map moves from a location in Oakland, California, to central London, England, while zooming from level 14 to 18. The animation interpolates between screen coordinates and world widths using equations from the referenced paper, applying a constant velocity and deceleration. OpenStreetMap tiles are rendered as the backdrop using the `TemplatedMapProvider`.

RRandomEtc
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
69% 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
68% 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
66% match