Testing d3.js in Leaflet.js

100%

Testing d3.js in Leaflet.js

✓ Published0🌍 Public

Last edited Nov 30, 2019

Created on Feb 23, 2014

This example embeds D3.js-generated SVG graphics into a Leaflet.js interactive map, displaying aircraft positions as yellow arrow-shaped paths. The map centers on New Zealand's Cook Strait region, with each plane’s location derived from GeoJSON point coordinates and rotated according to its track property. Using Leaflet's `_initPathRoot` method, D3 selects the map’s underlying SVG and appends a group for the features. The `update` function repositions each path on map pan or zoom via `map.latLngToLayerPoint` and the `viewreset` event, synchronizing D3 transforms with Leaflet’s projection.

AI-generated description

mit Licensed

Similar vizzes

Loading thumbnail…

d3.js with leaflet.js

This example shows a map centered on Wellington, New Zealand, with five semi-transparent red circles overlaid at specific coordinates, demonstrating how D3.js can be used to render SVG elements on top of a Leaflet map. The code initializes a Leaflet map with an OpenStreetMap tile layer, then loads geographic data from a `circles.json` file. D3.js selects the map's SVG layer, appends a group, and dynamically creates circle elements for each data point, converting the latitude and longitude coordinates into layer points using Leaflet's `latLngToLayerPoint` method to position them correctly. The circles update their positions in response to the map's `viewreset` event.

BBolarinwa Omoware

78% match

Loading thumbnail…

Leaflet and D3 Map

This example combines Leaflet and D3 to render a blue GeoJSON rectangle polygon that pans and zooms with an OpenStreetMap tile layer. It uses D3’s `d3.geo.path` with a custom `projectPoint` function that calls Leaflet’s `latLngToLayerPoint`, while a `viewreset` handler recalculates the SVG overlay’s bounds and transform. The map is centered on Wellington, New Zealand, and the rectangle’s path is drawn as SVG elements within Leaflet’s overlay pane.

Dd3noob

75% match

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

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

73% match

Loading thumbnail…

d3.js with leaflet.js

This example demonstrates how to combine Leaflet.js and d3.js so that SVG circle markers stay fixed to geographic coordinates while maintaining a constant screen size. It loads five point locations from a local circles.json file and displays them as red, semi-transparent circles over an OpenStreetMap tile layer. The code uses Leaflet’s map.latLngToLayerPoint() method to convert geographic positions into pixel coordinates within the viewreset event handler, applying the result as SVG transform translations. The implementation relies on d3.json for data loading and d3 selections to append and update the circles.

Dd3noob

73% match

Loading thumbnail…

D3 + Leaflet

This example combines D3 v3 and Leaflet to show interactive pie charts on a map. Hovering over a Leaflet marker creates a D3-generated donut chart in a tooltip div, displaying the percentage bound to that marker’s options via `L.marker(latlng, { achieve: d.achieve })`. The map offers OSM, Thunderforest, and USGS tile layers, with marker data accessed through `event.target.options`. D3’s `d3.svg.arc` and `d3.layout.pie` render the SVG chart.

11Cr18Ni9

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

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

72% match