Skip to main content
SimilarExport ZIP
100%

Leaflet.js × D3.js - location data fix on GUI

✓ Published0🌍 Public
HHirosaji
Last edited Feb 19, 2020
Created on Jan 24, 2019

This example presents a drag-and-drop system for fixing location data on a Leaflet map, built for the "Houbunsha" map project. Red circular markers, rendered via the Leaflet.js API, show real-life locations from a JSON file. Users can drag these markers to correct their positions, and the updated coordinates are saved back to the data file via an Export button, which uses a D3.js selection to create a downloadable link. The code integrates Leaflet's map and layer-group objects with D3.js's data-loading and DOM-selection functions to provide an efficient editing workflow.

AI-generated description

▶︎ What's this?:　Drag & Fix Location Data System

▷ Why made this?: I making location data for "Houbunsha" map. So I developed this system for making data efficient.

▷ What is "Houbunsha" map?: WebGIS for visit the real-life locations on "Houbunsha" works - https://hirosaji.github.io/hobunsha-map/public/

▷ How to use?: By dragging, you can fix positions of circles showing real-life locations. With 'Export' button, you can download the fixed data.

[Gist] https://gist.github.com/Hirosaji/7974adc4cb34dd4521635d822e82f70c

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

leaflet - Map on D3.js points

This example shows a Leaflet map displaying Japanese land price survey points as red circles over a tile-based base map, with the points positioned using geographic coordinates. The visualization combines Leaflet’s mapping and tile-layer API with D3.js to render the data: D3 is used to select the map’s SVG layer, append a group, and create circle elements from a GeoJSON file. The circles’ positions are updated via `map.latLngToLayerPoint`, which converts latitude and longitude into screen coordinates during map view changes. The example uses leaflet 0.7.7 and D3.v3, loading data from `landprice.geojson`.

HHirosaji
75% 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
74% 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
73% match
Loading thumbnail…

Leaflet.js × D3.js × geojson-vt.js - Redraw Canvas Tiles Map

This example shows a slippy map interface using Leaflet.js alongside D3.js to render geographic boundaries from a GeoJSON dataset. Canvas tiles are generated in the frontend, converting vector data into raster tiles on demand. The core function `addCanvasTile` leverages the `geojson-vt.js` `tileIndex.getTile` API to extract features for a given zoom level and coordinate. Drawing occurs directly on HTML5 canvas elements, and the code uses Canvas `getImageData` to enable click detection on rendered polygons, with D3 selection handling mouse events for property feature identification.

HHirosaji
73% match
Loading thumbnail…

leaflet - Images on Map (using D3.js)

This example overlays the locations of hot springs in Hokkaido, Japan, onto an interactive Leaflet map. It loads point data from a GeoJSON file and renders each location as an SVG icon, with a tooltip that displays the hot spring name on hover. The code combines a Leaflet tile map with D3.js selections and its `latLngToLayerPoint` method to position icons dynamically during pan and zoom. The map is initialized with a Mapbox tile layer and the icon is a custom SVG file.

HHirosaji
73% match
Loading thumbnail…

Leaflet.js - Simple Map

This example combines Leaflet.js 0.7.7 with D3 v4 to render a GeoJSON map of Japanese prefectures on an interactive tile-less map. The map is centered on Japan, constrained to a bounding box between latitudes 25–50 and longitudes 112–158, with zoom limits of 5–10. D3 loads the local `ken.geojson` file, which Leaflet then draws as semi-transparent white polygon features using `L.geoJson` with a custom style for weight, opacity, and fill. An invisible rectangle marks the allowed viewing area.

HHirosaji
72% match
Loading thumbnail…

Leaflet.js × D3.js × geojson-vt.js - Clickeble Canvas Tiles Map

This interactive map displays Japanese municipal boundaries using vector tiles rendered onto Canvas elements within a Leaflet.js map. The visualization employs geojson-vt.js to convert GeoJSON data into tile-based vector features, which are then drawn using D3.js for click interaction handling. Each polygon is rendered with a unique picking color, enabling feature identification through Canvas `getImageData` pixel inspection on mouse events. The map supports zoom-dependent styling with adjustable line widths and dash patterns, showing prefectural city data including Sendai and Ora-machi boundaries.

HHirosaji
71% match
Loading thumbnail…

leaflet - Map with D3.js outline

This example combines Leaflet with D3.js to render a geographic map of Japanese prefectures. It displays a GeoJSON polygon of Tottori Prefecture, overlaid on a tile layer from the Geospatial Information Authority of Japan. The code uses Leaflet’s `L.map` and `L.tileLayer` for base tiles, while D3’s `d3.geo.path` with a custom `d3.geo.transform` projection converts latitude/longitude coordinates to screen points via `map.latLngToLayerPoint`. The D3-selected SVG paths are redrawn on Leaflet’s `viewreset` event.

HHirosaji
71% match