Skip to main content
SimilarExport ZIP
100%

Modest Maps JS

✓ Published0🌍 Public
RRandomEtc
Last edited Sep 28, 2011
Created on Sep 28, 2011

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.

AI-generated description

See issue 57 for discussion and planned improvements.

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

Gist 6b515fcc2b7c6479d9c31059140eb611

This example displays a full-screen interactive map of the contiguous United States, centered on the country’s geographic midpoint using Mapbox GL JS. The map uses a custom Mapbox style and includes a navigation control for zoom and rotation. The viewport is constrained to the bounding box spanning from the Southwest to the Northeast corners of the lower 48 states. The code sets an initial zoom level and center coordinates derived from that bounding box, but does not load or visualize any external data layers.

WWill Carter
72% 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
70% 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
69% match
Loading thumbnail…

Map Zooming III

A map of the United States is drawn with canvas, and moving the mouse horizontally smoothly interpolates between three zoom levels centered on San Francisco, New Orleans, and New York. The example uses a linear scale with `d3.interpolateZoom` to map mouse position to a zooming transform, and `d3.geo.transform` for simplification. It renders TopoJSON state boundaries clipped by `d3.geo.clipExtent`, using D3 v3’s `d3.geo.path` with a canvas context.

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

Constrained Zoom Map. Centered on the Pacific

This example shows a world map centered on the Pacific Ocean, where users can pan and zoom with constrained translation bounds. It uses a Mercator projection with `.rotate([-180,0])` to place the anti-meridian at the center, and renders geographic features from a TopoJSON world dataset using `d3.geo.path`. The zoom behavior relies on `d3.behavior.zoom` and custom logic in the `move` function to limit panning within the viewport. Landmasses are filled black with white boundary strokes, and the SVG overlay captures pointer events for interaction.

Dd3noob
68% match