One Minute Map

100%

One Minute Map

✓ Published0🌍 Public

Last edited Mar 7, 2017

Created on Mar 6, 2017

This map displays a centered view of San Francisco with panning, zooming, and geocoding capabilities. The page uses Mapzen’s JavaScript API to render the Refill basemap style, with the map centered at [37.7749, -122.4194] and zoom level 9. A geocoder control appears in the top-right corner, while a locator button and URL hash for sharing the current map state are also added. The map’s data source is the Mapzen basemap service, and the scene is set to the Refill style, which provides a minimal, high-contrast visual design.

AI-generated description

Similar vizzes

Loading thumbnail…

One Minute Map

This example demonstrates a one-minute map centered on San Francisco, showing an interactive basemap with search and location-finding controls. Built with the Mapzen JavaScript library and Leaflet, the visualization uses the Mapzen Refill basemap style to render the geographic data. A geocoder search box in the top-right corner allows users to find places, while a locator button in the bottom-right identifies the user’s current position. A hash feature enables deep linking to the map’s coordinates and zoom level, making the map state shareable via URL.

GGeoWill

90% match

Loading thumbnail…

San Juan Island Geology

This example displays a Mapzen basemap centered on San Juan Island, Washington, at zoom level 12. The visualization uses the Mapzen.js library, instantiating a map with `L.Mapzen.map` and specifying a scene file. A Mapzen geocoding search box, created with `L.Mapzen.geocoder`, is added to the interface, and the zoom control is repositioned to the top right using `map.zoomControl.setPosition`. The map itself is rendered in an HTML page that loads Mapzen’s CSS and JavaScript resources.

GGeoWill

69% match

Loading thumbnail…

My Web Map

This web map displays a stylized view of San Francisco using vector tiles from the osm2vectortiles CDN, rendered with the Tangram engine alongside Leaflet. It shows landuse polygons in a light blue-green and water polygons in a darker blue, with a locator control and URL hash for sharing the current view. The code loads the Mapzen JavaScript library, defines a Tangram scene in a YAML file, and logs the Tangram layer when the map loads.

TThomasG77

69% match

Loading thumbnail…

Pixymaps (Scrolling)

A scrolling map of San Francisco pans continuously leftward, with a tile-based image rendered to a Canvas element. The example uses the `pixymaps` library to manage view coordinates and tile loading, while the D3.js timer drives a subtle acceleration that increases scroll speed. Map tiles are loaded from CloudMade, and the view is projected using `d3.geo.mercator` to center the map. The animation updates the canvas by panning the view and re-rendering the image each frame.

Mmbostock

65% match

Loading thumbnail…

Map Practice HTML Starter

This example displays an interactive map centered on San Francisco using the ArcGIS API for JavaScript, with an “arcgis-light-gray” basemap loaded from ArcGIS services. The MapView is configured with a specific longitude, latitude, and zoom level to frame the initial view. The page relies on the ArcGIS `esri/Map` and `esri/views/MapView` modules, while a basic HTML structure and CSS ensure the map fills the viewport. A simple JavaScript console log statement demonstrates basic interactivity for developers.

AAndre J Denais

65% match

Loading thumbnail…

OPHZ Zooming

A map of U.S. counties continuously zooms between a national overview and a detailed close-up of San Francisco. The sequence repeats automatically, using D3’s `d3.behavior.zoom` and `d3.geo.clipExtent` for viewport clipping. TopoJSON geometry is pre-simplified and dynamically simplified with `d3.geo.transform` based on zoom scale, then rendered as stroked paths on Canvas.

Mmbostock

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

Moving the mouse across the map smoothly interpolates a zoom between San Francisco and New York. The visualization renders United States state boundaries as a canvas-drawn mesh using d3.geo.path with a custom projection that applies dynamic simplification and clipping during the zoom. It uses d3.interpolateZoom, d3.geo.transform, and d3.geo.clipExtent to control the transition, adjusting the scale and translate values based on the pointer's horizontal position. The underlying TopoJSON data is pre-simplified with topojson.presimplify, and the rendering occurs entirely through the Canvas 2D API.

Mmbostock

64% match