Simple Leaflet Map with Heatmap

100%

Simple Leaflet Map with Heatmap

✓ Published0🌍 Public

Last edited Apr 20, 2014

Created on Feb 13, 2014

A simple Leaflet map displays earthquake activity across New Zealand, with magnitude visualized as a heatmap overlay. The map uses Leaflet.js with the Leaflet.heat plugin, plotting quake points from New Zealand’s Geonet data on an OpenStreetMap tile layer. The heatmap is rendered with a radius of 20, blur of 15, and maximum zoom of 17, showing density and intensity of seismic events around the North Island.

AI-generated description

An example of a map presented with leaflet.js and the Leaflet.heat plugin with a range of options.

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

Similar vizzes

Loading thumbnail…

New Zealand Earthquakes

This interactive scatterplot visualizes the pattern of earthquakes in New Zealand from July 2010 to August 2012, plotting each event by its week and time of day, with point size reflecting magnitude. The visualization uses D3.js version 3.5.17 to render SVG circles with tooltips, axes, and grid lines. Data is loaded from a CSV file containing dates, times, and magnitudes, and the code employs `d3.time.format` for parsing and formatting temporal values, alongside `d3.svg.axis` for the coordinate scales.

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

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

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

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

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

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

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

71% match