leaflet - Markers on map

100%

leaflet - Markers on map

✓ Published0🌍 Public

Last edited Feb 19, 2020

Created on Jul 21, 2018

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.

AI-generated description

[Gist] https://gist.github.com/Hirosaji/7f39888be0b16cfd374b202fdb8692bd

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

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

77% match

Loading thumbnail…

leaflet - Leaflet.js Plugin Cluster on Map

This example displays the locations of hot springs across Hokkaido, Japan, as interactive markers on a Leaflet map. The markers are grouped into clusters using the Leaflet.markercluster plugin to manage dense areas. The map is built with Leaflet.js and uses D3.js to load and parse the CSV data file containing each hot spring’s name and geographic coordinates. The code initializes a Leaflet map with a Mapbox tile layer and binds popups showing the hot spring names to the markers.

HHirosaji

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

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

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

76% match

Loading thumbnail…

leaflet example

This example shows multiple datasets overlaid as circles on an interactive Leaflet map, with each dataset visualized using a different scale type. It uses the Leaflet library for map tiles and layers, while D3 v5 parses CSV data embedded in `<aside>` elements and binds it to SVG circle markers. The code assigns numerical or categorical attributes to color scales (threshold, quantize, or ordinal) and renders a legend for each group. Map layers for streets, satellite, and grayscale are togglable, and tooltips display an optional address attribute from the data.

EEE2dev

76% match

Loading thumbnail…

Leaflet Map Example

This example shows a Leaflet map with interactive markers and a circle overlay, plotting applicant counts per country from a CSV dataset. Using the Leaflet JavaScript library, it renders an OpenStreetMap base layer and adds markers for each data point, binding popups to display country-specific information. The code also demonstrates adding a styled circle geometry to the map, and it imports utilities from TopoJSON for potential geospatial operations.

Kklumng

74% match