Simple Leaflet Map

100%

Simple Leaflet Map

✓ Published0🌍 Public

Last edited Dec 6, 2019

Created on Dec 6, 2019

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.

AI-generated description

An example of using leaflet.js with multiple tile layers.

This graph is part of the code samples for the update to the book Leaflet Tips and Tricks to version 1 of leaflet.js.

mit Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Simple Leaflet Map

This example shows a Leaflet map centered on Wellington, New Zealand, with selectable base layers and an overlay of local landmarks. It uses Leaflet’s `L.map`, `L.tileLayer`, and `L.control.layers` to switch between OpenStreetMap and Thunderforest landscape tiles. An `L.LayerGroup` contains four markers with popups and a polyline connecting the points, which can be toggled as an overlay. The code also uses `L.marker` and `L.polyline` to add geographic features to the map.

Dd3noob

92% match

Loading thumbnail…

Simple Leaflet Map

This example displays an interactive map of New Zealand’s Wellington region, centered on coordinates -41.2858, 174.78682 at zoom level 14. The visualization uses the Leaflet.js library to render map tiles from OpenStreetMap, with the `L.map` function creating the map and `L.tileLayer` adding the base tile layer. The map is presented with attribution to OpenStreetMap contributors and is set within a 600 by 400 pixel HTML container.

Dd3noob

88% match

Loading thumbnail…

Simple Leaflet Map

This map displays Wellington, New Zealand, with a set of geolocated markers for landmarks like Te Papa and the Embassy Theatre, connected by a polyline route. It uses Leaflet.js with a swappable base layer (OpenStreetMap or OpenTopoMap tile servers) and a user-controlled overlay group. The code constructs a layer group for the markers and line, then adds a leaflet control to toggle between the two tile layers and the overlay.

Dd3noob

87% match

Loading thumbnail…

Simple Leaflet Map

A simple Leaflet map shows a draggable, semi-transparent marker with hover text and a popup overlaid on an OpenStreetMap tile layer. The map is centered on Wellington, New Zealand, using the Leaflet `L.map` API, with the marker pinning Te Papa museum. The example demonstrates core Leaflet features including `L.tileLayer` for basemap tiles, `L.marker` with options for dragging, title, and opacity, and `bindPopup` to attach interactive popup content.

Dd3noob

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

85% match

Loading thumbnail…

Simple Leaflet Map

A simple interactive map of central Wellington, New Zealand, rendered with Leaflet 1.6.0 and OpenStreetMap tiles. The view centers on a set of coordinates, over which a red polyline with custom styling—including weight, opacity, and a dash pattern—is drawn using `L.polyline`. The map supports panning and zooming through Leaflet's built-in interactions.

Dd3noob

85% match

Loading thumbnail…

Simple Leaflet Map

This example displays a satellite view of Wellington, New Zealand, centered at coordinates -41.2858, 174.78682 with zoom level 14. It uses the Leaflet.js library to initialize a map object and display the Esri World Imagery tile layer from ArcGIS Online. The code sets the map’s dimensions via an HTML div and configures tile loading with attribution text and a maximum zoom of 18. This demonstrates a minimal Leaflet setup for embedding interactive map tiles in a web page.

Dd3noob

85% match