Simple Leaflet Map

100%

Simple Leaflet Map

✓ Published0🌍 Public

Last edited Dec 6, 2019

Created on Dec 6, 2019

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.

AI-generated description

An example of using leaflet.js with multiple tile layers and an overlay.

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

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

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

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

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

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

87% match

Loading thumbnail…

Marker Leaflet Map

This example shows an interactive map of the Wellington waterfront, centered near Te Papa, the Museum of New Zealand. The map uses the Leaflet.js library with OpenStreetMap tiles as its base layer. A single marker placed at the museum’s coordinates is draggable, has reduced opacity, and displays a hover title. It also binds a popup with the location’s name and description, which opens automatically on load. The code sets the view to latitude -41.2858 and longitude 174.78682 with a zoom level of 14, and configures the marker with explicit properties for interactivity and styling.

Dd3noob

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

84% match