Skip to main content
100%

Simple Leaflet Map

✓ Published0🌍 Public
Aandreaangeli
Last edited Apr 24, 2016
Created on Apr 24, 2016

A simple Leaflet map displays a set of aircraft positions as clickable markers, each showing a flight identifier in a popup. The map uses Leaflet 0.7 with an OpenStreetMap tile layer, centered on New Zealand. Marker coordinates and labels come from a hardcoded JavaScript array of nine planes. The code initializes the map with `L.map`, adds tiles via `L.tileLayer`, and places markers using `L.marker` with `bindPopup`.

AI-generated description

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

This is provided in conjunction with the explanation of the code given in the book "Leaflet Tips and Tricks".

forked from <a href='http://bl.ocks.org/d3noob/'>d3noob</a>'s block: <a href='http://bl.ocks.org/d3noob/9150014'>Add multiple markers in leaflet.js</a>

Similar vizzes

Loading thumbnail…

Simple Leaflet Map

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.

Dd3noob
89% match
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
88% 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
87% 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
77% 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
75% 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
75% 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
72% 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
72% match