Leaflet starter MM2

100%

Leaflet starter MM2

✓ Published0🌍 Public

Last edited Sep 10, 2017

Created on Sep 10, 2017

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.

AI-generated description

Getting started with Leaflet

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/5c780d3df8da2ecceebf117a9ac7be38'>WWSD #1: Leaflet starter</a>

forked from <a href='http://bl.ocks.org/almccon/'>almccon</a>'s block: <a href='http://bl.ocks.org/almccon/6d632572739217d2804fd2d429b9fa23'>Leaflet starter</a>

mit Licensed

Similar vizzes

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

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

77% match

Loading thumbnail…

Simple Leaflet Map

This simple Leaflet map displays a geographic area centered on coordinates [-41.2858, 174.78682] at zoom level 14. It uses Leaflet 1.6.0 to create a map object via `L.map` and renders OpenStreetMap tile imagery from `http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`. The map includes an attribution link to OpenStreetMap contributors, with a maximum zoom of 18. The example demonstrates basic map initialization and tile layer addition using Leaflet’s `tileLayer` API.

Dd3noob

73% match

Loading thumbnail…

Untitled

A Leaflet map centered on Versailles displays a single green home marker for Université Gustave Eiffel’s PICS-L lab, with a popup labeling the location. Built with Folium-generated HTML and Leaflet 1.3.4, the page overlays two identical OpenStreetMap tile layers and uses Leaflet.awesome-markers for the custom icon. The map includes zoom controls and a tooltip bound to the marker, though the tooltip content is truncated in the provided code.

Iismael-IT-dev

70% match

Loading thumbnail…

Simple Leaflet Map

This example shows an interactive Leaflet map centered on Wellington, New Zealand, with a layer control that lets the user switch between two base tile layers: OpenStreetMap and OpenTopoMap. Using the Leaflet 1.6.0 JavaScript API, it defines two `L.tileLayer` instances—one pulling raster tiles from `tile.openstreetmap.org` and the other from `tile.opentopomap.org`—and adds them as selectable base layers via `L.control.layers`. The map itself is initialized with `L.map`, set to a zoom level of 14, and displays only the OSM layer initially.

Dd3noob

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

67% match

Loading thumbnail…

Untitled

This example displays an interactive map centered on Iran, using Leaflet to render tile layers and enable zooming and panning. It shows how to switch between three different OpenStreetMap base layer styles—standard, Hot, and OSM French—via a control menu. The map initializes at coordinates [33, 54] with a zoom level of 5, and each tile layer loads raster imagery from the respective OpenStreetMap tile servers. The code explicitly defines tile layer objects and adds them to a layer control, allowing users to toggle the visual style of the basemap.

JJoker-tr

67% match

Loading thumbnail…

Simple Leaflet Map

This example shows an interactive map centered on Wellington, New Zealand, with a choice between two base tile layers. It uses Leaflet.js to render map tiles and handles layer switching via a control widget. The map includes an OpenStreetMap tile layer and a Thunderforest landscape layer, with proper attribution for both data sources. The code initializes a map element and uses `L.tileLayer` and `L.control.layers` to manage the selectable background layers.

Dd3noob

66% match