Simple Leaflet Map

100%

Simple Leaflet Map

✓ Published0🌍 Public

Last edited Apr 20, 2014

Created on Dec 7, 2013

A simple interactive map centered on London demonstrates core Leaflet capabilities. The map displays OpenStreetMap tiles and includes a marker with a popup, a red circle, and a polygon, each bound to popups. Clicking anywhere on the map generates a popup showing the clicked latitude and longitude. The example uses the Leaflet JavaScript library and its `L.map`, `L.tileLayer`, `L.marker`, `L.circle`, `L.polygon`, and `L.popup` APIs to build the visualization.

AI-generated description

Created to test the JavaScript code in response to a question asked on Google Groups

Similar vizzes

Loading thumbnail…

Simple Leaflet Map

A simple interactive map displays a geographic area centered on a set of coordinates, with a single red polyline overlaid on base tiles from OpenStreetMap. The map is created with Leaflet, using its `L.map` and `tileLayer` APIs to render the tile background. The polyline, defined as an array of latitude and longitude pairs, is added with the `L.polyline` API and styled with options for color, weight, opacity, dash pattern, and line join. The example demonstrates basic Leaflet map creation and vector overlay customization.

Dd3noob

80% match

Loading thumbnail…

Simple Leaflet Map

This example displays a simple interactive map with four settlement markers, each opening a popup with its label. The map is built with Leaflet 0.7, using an OpenStreetMap tile layer. The code initializes a map centered on the first settlement and adds markers from a hardcoded array of coordinates, demonstrating basic Leaflet map creation, tile loading, and marker popup functionality in a plain HTML page.

Ccharliemok

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

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

74% match

Loading thumbnail…

Untitled

This example displays a Leaflet map centered on a coastal area, with several vector layers added programmatically. It shows a GeoJSON polygon and point rendered via `L.geoJson`, alongside a marker, a red circle, and a polygon created with `L.marker`, `L.circle`, and `L.polygon`. The map uses a MapTiler Voyager tile layer with CARTO and OpenStreetMap attribution. Popups are bound to each shape, with the marker’s popup opened by default, demonstrating basic interactive map layers in a React-agnostic HTML setup.

Ccharliemok

73% match

Loading thumbnail…

leaflet - Markers on map

This example uses the Leaflet mapping library to place interactive markers on a tile-based map of Tokyo. A small CSV dataset provides the station names and geographic coordinates for each marker, which are loaded with d3.csv. The map background is rendered using Mapbox tile layers, and each station marker is bound to a popup that displays its name. The visualization combines Leaflet’s map interactions with D3’s data-loading capabilities to create a straightforward geographic point display.

HHirosaji

72% match

Loading thumbnail…

Simple Leaflet Map

This simple Leaflet map displays a geographic area centered on coordinates [-41.2858, 174.78682] at zoom level 14. It uses Leaflet 1.6.0 to create a map object via `L.map` and renders OpenStreetMap tile imagery from `http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`. The map includes an attribution link to OpenStreetMap contributors, with a maximum zoom of 18. The example demonstrates basic map initialization and tile layer addition using Leaflet’s `tileLayer` API.

Dd3noob

72% match

Loading thumbnail…

dots on a map: setup

A Leaflet map displays a set of circular dots, each colored teal with a darker stroke, positioned over a street map of London. The visualization is built by combining the Leaflet mapping library with D3.js, which manages the SVG layer and handles data binding from a CSV file containing latitude and longitude coordinates. The dots animate their radius from 1 to 6 pixels via a D3 transition. On map pan or zoom, the projection and positions are recalculated and re-rendered, keeping the dots aligned with the geographic locations.

KKerchoo

72% match