Skip to main content
SimilarExport ZIP
100%

Responsive map

✓ Published0🌍 Public
LLucaZampieri
Last edited Dec 4, 2017
Created on Dec 4, 2017

This responsive map adapts its display based on the browser window’s width, showing a stamen toner tile layer overlaid with data fetched from a CartoDB visualization JSON. It uses the CartoDB.js library (`L.Map`, `L.tileLayer`) and Leaflet’s resize event to switch between two preset height and zoom combinations: a taller 650-pixel view with zoom level 8 for wide windows, and a shorter 300-pixel view with zoom level 7 for narrow ones, all driven by a breakpoint at 720 pixels.

AI-generated description

CartoDB/Leaflet map that adapts map dimensions (height) and zoom level based on map width. Open in new window and resize to view responsiveness.

forked from <a href='http://bl.ocks.org/maartenzam/'>maartenzam</a>'s block: <a href='http://bl.ocks.org/maartenzam/7ef773bdf11999c9eebb'>Responsive map with Cartodb/Leaflet</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Tile Viewer

This example shows a zoomable map interface where the user can pan and zoom across geographic tiles. It displays each tile as a numbered 256-by-256-pixel square with a red border and its coordinates as text, updating the visible grid as the viewport changes. The code uses d3.geo.tile, d3.geo.mercator, and d3.behavior.zoom, applying a CSS 3D matrix transform to reposition tiles during zoom events. It relies on a gist by mbostock and the d3.v3 library, with tile positions computed from the current zoom scale and translation.

Mmbostock
67% match
Loading thumbnail…

Leaflet - MapTiles

This example shows a full-screen interactive map that allows the viewer to switch between dozens of different tile layers, ranging from satellite imagery and street maps to terrain, watercolor, and dark matter styles. The code uses the Leaflet library to render the map and manage layer switching, while pulling tile URLs and attribution strings from the viz.js `viz.leaflet.tiles` API. It includes base layers from providers such as OpenStreetMap, Thunderforest, Stamen, Esri, and CartoDB, demonstrating how to assemble a multi-provider tile switcher in a single HTML page.

NNPashaP
67% 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
66% match
Loading thumbnail…

Leaflet starter MM

This example demonstrates a minimal interactive map centered on coordinates [49, 50, 3], rendered with the Leaflet JavaScript library. It displays a Stamen Terrain tile layer with OpenStreetMap attribution, filling the entire viewport via a styled `#mapdiv` element. The code sets up the map instance using `L.map().setView()` and adds the tile layer with `L.tileLayer().addTo()`. The map supports standard pan and zoom interactions, relying on Leaflet’s core API rather than additional plugins or data sources.

CCartophile
66% match
Loading thumbnail…

Useful leaflet and map sipets

This example demonstrates how to build an interactive map using the Leaflet JavaScript library, displaying point data over a base tile layer with a custom info window that updates on click. The code sets up a map with a CartoDB basemap, and creates a custom control using `L.control` and `L.DomUtil` to show details like name and value extracted from a data array. It uses Leaflet's `tileLayer` for background tiles and implements a click-handler that parses a CSS class name to find the corresponding data point. The visualization exemplifies a custom Leaflet control for on-demand data display.

SSav10
66% match
Loading thumbnail…

Vector Tiles

This interactive map displays vector tiles of road networks from OpenStreetMap, rendered as SVG paths. It uses Mapzen’s vector tile API to load road data, and d3.geoMercator’s projection with a d3.tile-based tile system to fetch and display 256×256 tiles. The visualization supports pan and zoom via d3.zoom, with a matrix3d transform for scaling and translation. Mouse movement updates a location readout showing latitude and longitude, computed by inverting the projection.

Mmbostock
65% match
Loading thumbnail…

Map test

This example displays a full-screen interactive map embedded from Carto Builder, presenting geographic data in a standard tiled web-mapping interface. The page itself uses an iframe element to load the external Carto visualization, while D3 v4 is loaded via a script tag but is not actively used for rendering or interaction. The map includes pan and zoom controls provided by the Carto platform, and the overall layout is fixed to the viewport with zero margins for a seamless presentation. The code primarily demonstrates a simple integration pattern between a hosting page and a third-party mapping service, rather than a custom D3 visualization.

CCartophile
65% match
Loading thumbnail…

Leaflet starter MM2

This example displays a close-up terrain map of Paris, centered on coordinates [48.8566, 2.3522] at zoom level 15. It uses the Leaflet JavaScript library (v0.7.7) to create a map instance and add a tile layer from Stamen’s terrain tiles, with attribution to OpenStreetMap contributors. The page is styled with a fixed full-screen layout, and the map fills the entire viewport. The code loads Leaflet’s CSS and JS from a CDN and then calls `L.map` and `L.tileLayer` to render the map.

CCartophile
65% match