Skip to main content
SimilarExport ZIP
100%

Leaflet - default

✓ Published0🌍 Public
NNPashaP
Last edited Jan 21, 2018
Created on Jan 21, 2018

This example displays a full-screen interactive map of the United States, centered on the country with an initial zoom level of five. It uses the Leaflet JavaScript library to create the map view and a tile layer from Esri’s NatGeoWorldMap, providing detailed geographic and political boundaries. The map relies on the `L.map` and `L.tileLayer` APIs, with tile URLs and attribution sourced from the vizjs.org helper library. The page sets the map container to occupy the entire viewport, allowing users to pan and zoom freely across the rendered tiles.

AI-generated description
gpl-3.0 Licensed

Similar vizzes

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
81% match
Loading thumbnail…

Full Screen Leaflet Map

This example displays an interactive map centered on Wellington, New Zealand, using Leaflet.js and OpenStreetMap tile layers. The map fills the entire browser viewport through CSS rules that set the html, body, and map container to 100% height and width. It initializes the map with a specific latitude, longitude, and zoom level, then attaches an OpenStreetMap tile layer with attribution and a maximum zoom of 18. The code relies on Leaflet’s `L.map`, `L.tileLayer`, and the `setView` method to render the full-screen interactive visualization.

Dd3noob
78% match
Loading thumbnail…

Leaflet - marker

A map of the United States displays a single marker at coordinates [37, -96]. The example uses the Leaflet library to create a full-screen map, add an OpenStreetMap tile layer from the viz.leaflet.tiles API, and then place a default marker icon at the specified location using L.marker(). The map is initialized with a center point and zoom level, and the tile layer is added with proper attribution.

NNPashaP
78% match
Loading thumbnail…

Leaflet starter

This example demonstrates a basic interactive map centered on Vancouver, Canada, using the Leaflet JavaScript library. It initializes a map view with coordinates [49, -123] at zoom level 10, then adds a tile layer from Thunderforest’s “spinal-map” style. The map renders OpenStreetMap data as background tiles, with the `L.map` and `L.tileLayer` APIs handling map creation and layer management. The page is styled to fill the entire viewport, and the map div occupies full height. No additional data or interactions are included beyond the base map display.

LLiddler
77% match
Loading thumbnail…

Map of the United States

A map of the United States displays the country's boundary as a GeoJSON layer over an OpenStreetMap tile base. The example loads state boundaries from `us-states.geojson` and renders them using Leaflet’s `L.geoJSON` and `L.tileLayer` APIs. It demonstrates integrating Leaflet with a plain HTML page, centering the view on the nation at zoom level four, and fetching geographic data asynchronously. The code includes D3 imports and local ES6 modules but uses only Leaflet for the actual mapping.

UUVarshaReddy
76% 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
76% match
Loading thumbnail…

Leaflet map

This example shows a full-screen interactive map of France centered on Paris, using satellite imagery tiles from ArcGIS Online. It employs the Leaflet JavaScript library to create the map and set an initial view. The map is rendered via a tile layer that fetches World_Imagery tiles, allowing users to pan and zoom up to level 20. The page uses simple HTML and CSS for layout, with the map container taking up the entire viewport height.

Iismael-IT-dev
75% match
Loading thumbnail…

D3 + Leaflet

This example combines D3.js and Leaflet to create an interactive map of U.S. states with a hover effect. It uses a Leaflet tile layer from OpenStreetMap as the base, with D3 rendering state boundaries as SVG paths overlaid on the map. The code loads GeoJSON data from a gist and projects it using a custom `d3.geo.transform` that converts coordinates to Leaflet’s layer points. The `d3.geo.path` draws the states, and hover fills them brown. The map’s `viewreset` event triggers a reset function to reposition and rescale the SVG overlay.

JJn1532
73% match