Simple Leaflet Map

100%

Simple Leaflet Map

✓ Published0🌍 Public

Last edited Apr 20, 2014

Created on Feb 22, 2014

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.

AI-generated description

A second demonstration file showing multiple aircraft locations.

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

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

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

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

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

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

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

78% match