Simple Leaflet Map

100%

Simple Leaflet Map

✓ Published0🌍 Public

Last edited Dec 6, 2019

Created on Dec 6, 2019

A simple Leaflet.js map displays nine aircraft markers over New Zealand’s South Island, each with a popup showing its identifier. The map uses OpenStreetMap tile layers for the base imagery and centers on a view at latitude -41.3058 and longitude 174.82082 with zoom level 8. The code defines an array of plane coordinates and loops through them to create and bind popups to `L.marker` objects, which are then added to the map. The example demonstrates basic marker placement and popup interaction using Leaflet’s core API.

AI-generated description

An example of a leaflet.js map with multiple markers added.

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

A simple Leaflet map displays nine airplane markers over a base layer of OpenStreetMap tiles, each marker showing a plane identifier in a popup. The visualization uses Leaflet 0.7 to create the map, set the initial view to New Zealand, and add a tile layer with attribution. The code defines an array of plane data with coordinates and IDs, then loops through the array to create and bind popups to each marker.

Dd3noob

93% match

Loading thumbnail…

Simple Leaflet Map

This example displays the positions of seventeen aircraft as markers on an interactive map of the Wellington, New Zealand area. It uses the Leaflet JavaScript library, specifically the `L.map`, `L.tileLayer`, and `L.marker` APIs, to render OpenStreetMap tiles as the base layer. Aircraft identifiers and coordinates are stored in a hardcoded array, and each marker pops up its associated ID when clicked. The map is initialized with a set view and zoom level.

Dd3noob

89% match

Loading thumbnail…

Simple Leaflet Map

This example shows an aircraft flight path over a map of Wellington, New Zealand, rendered as a blue polyline on an OpenStreetMap tile layer. It uses the Leaflet JavaScript library to create the map, center it on the coordinates, and add the tile layer from OpenStreetMap. The flight path data consists of repeated latitude and longitude coordinates stored in the `planelatlong.js` file, which is loaded and passed to `L.polyline` to draw the route on the map.

Dd3noob

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

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

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

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

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

74% match