One Minute Map

100%

One Minute Map

✓ Published0🌍 Public

Last edited Feb 27, 2017

Created on Feb 27, 2017

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.

AI-generated description

Similar vizzes

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

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

67% match

Loading thumbnail…

A simple map

This example shows a basic interactive map centered on a view of New York City, with the Mapbox streets basemap displayed at zoom level 9. The map is rendered in a full-screen HTML page using the Mapbox.js library, which initializes the map object via `L.mapbox.map` and sets the geographic coordinates and zoom level with `.setView`. The map uses a public access token from the author Jn1532 to load the tiles.

JJn1532

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

62% match

Loading thumbnail…

Position Helper

Built with Mapbox GL JS v1.5.0 and the Mapbox Geocoder plugin, this interactive map acts as a position helper for scrollytelling projects. A fixed crosshair target sits at the screen center, while a side panel continuously displays the map’s current center coordinates, zoom level, pitch, and bearing. The tool updates these parameters on every map move, and also adds a 3D building extrusion layer from the Mapbox composite source. This provides a practical way to copy camera settings for storytelling sequences, as demonstrated in the linked Mapbox blog example.

HHirosaji

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

62% match

Loading thumbnail…

Vector Tiles

This example displays a static map of San Francisco’s roads, styled by road type, without panning or zooming. It uses Mapzen vector tiles served as GeoJSON, with the D3.js v3 library and a custom `d3.geo.tile` helper to compute tile coordinates. The SVG paths are rendered via `d3.geo.path` with a Mercator projection, and the code fetches tile data asynchronously using `d3.json`. Road classes like highways and rails are distinguished by CSS classes. Data comes from OpenStreetMap through Mapzen’s vector tile API.

JJuanSMartinez

62% match

Loading thumbnail…

Map Pan / Zoom with Cities v5

This map example displays world country boundaries and major global cities, with interactive pan and zoom functionality centered on the Pacific Ocean. The visualization uses d3.geoMercator for projection and d3.geoPath to render geographic features from a TopoJSON world file. City locations from a CSV dataset are plotted as red circles, each hyperlinked to a Google search. Users can apply d3.zoom with a scale extent of 1 to 8, transforming both paths and circles accordingly. The map is rendered as SVG elements within a d3 selection.

Dd3noob

62% match