Modest Maps JS

100%

Modest Maps JS

✓ Published0🌍 Public

Last edited Sep 25, 2010

Created on Sep 25, 2010

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.

AI-generated description

Similar vizzes

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

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…

Modest Maps JS - Throwable Test

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.

RRandomEtc

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

74% 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…

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

68% 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…

JS Bin

The example shows a two-column web layout with an interactive map on the left and a scrollable data panel on the right. The interface uses Bootstrap’s grid system for a responsive 50/50 split, with the map container filling the full viewport height. The JavaScript initializes a `metro` object and logs “hello world” to the console on document ready, though no map rendering or data visualization is yet implemented. The code relies on jQuery for document-ready handling and defines CSS for the map and data sections but does not demonstrate any actual charting or geographic rendering.

MMTClass

67% match