Modest Maps JS

100%

Modest Maps JS - Throwable Test

✓ Published0🌍 Public

Last edited Jun 21, 2013

Created on Aug 29, 2011

A throwable map interface demonstrates inertial panning and zooming with Modest Maps JS. Users can drag to fling the map across the view, use arrow keys to accelerate movement, and scroll to zoom with momentum. Custom `MM.ThrowableHandler` extends the library to manage animation frames, track keyboard input, mouse position, and velocity, applying drag and acceleration in each `animate` tick. The example uses the rendered tile map and handles DOM events for key, mouse, and wheel interactions.

AI-generated description

Similar vizzes

Loading thumbnail…

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

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

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

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

63% match

Loading thumbnail…

smooth panning and zooming for polymaps

Smooth panning and zooming for Polymaps demonstrates an animated camera flight between map locations, implementing the algorithm from van Wijk and Nuij’s paper on efficient zooming and panning. A search box uses Bing Maps’ REST API to geocode place names, then animates the map from its current center and zoom level to the queried destination. The visible world width and center coordinates are interpolated over time using hyperbolic functions, with the animation driven by a JavaScript interval. The example uses the Polymaps library with Bing imagery layers and a compass control.

RRandomEtc

61% match

Loading thumbnail…

04: Custom Map Controls

This example demonstrates a map with two toggleable layers—hexbins and crash points—overlaid on a Mapbox GL base map. The hexbins are generated from a GeoJSON dataset of NYC crashes using Turf.js to create a hex grid and count incidents per cell, colored with a Jenks natural breaks classification. Custom UI buttons let users toggle each layer on and off, with active states highlighted. The code also shows how to filter invalid geometries and style layers dynamically.

55un

60% match

Loading thumbnail…

Van Wijk & Nuij Zooming

This example demonstrates a smooth and efficient zooming and panning animation for interactive maps, based on the algorithm by Van Wijk and Nuij. It uses Polymaps to render Bing Maps imagery and animates the map's center and zoom level over time. The JavaScript code calculates a path between two map states, applying logarithmic interpolation to create a natural, accelerated motion. The animation is triggered by a search query, which finds a location and animates the map to focus on it.

Mmbostock

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

59% match