Fork of hello leaflet.js

100%

Fork of hello leaflet.js

✓ Published0🌍 Public

Last edited Jul 16, 2024

Created on Jul 16, 2024

This interactive map displays Nepal’s administrative districts and their headquarters on an OpenStreetMap tile layer. The visualization fetches district boundary and headquarters data from GitHub-hosted GeoJSON files, loaded asynchronously via `Promise.all` and `d3.json`. The map is rendered using the Leaflet.js library, with the base layer configured through `L.map`, `L.tileLayer`, and `setView`. A custom D3.js script orchestrates the data retrieval, while the map view is initialized at a specific longitude and latitude pair with a zoom level of seven.

AI-generated description

a stump viz for leaflet.js

using this tutorial:
Advance Spacial Analysis in Leaflet, Turf, Tekson

MIT Licensed

Similar vizzes

Loading thumbnail…

hello leaflet.js

This example displays a map of Nepal with its district boundaries and headquarters, overlaid on an OpenStreetMap base layer. Built with Leaflet, Turf, and D3, it loads district and headquarters GeoJSON data via D3’s `d3.json` method, then renders both as interactive vector layers using Leaflet’s `geoJSON` and `tileLayer` APIs. A layer control panel allows toggling the OSM base map, district polygons, and HQ points, demonstrating a straightforward approach to combining spatial datasets in a web map.

Zzach b.

84% match

Loading thumbnail…

hello turf.js

This visualization demonstrates the integration of Leaflet, Turf.js, and D3.js to explore spatial analysis on a map of Nepal's districts. It displays district areas and headquarters as interactive layers with popups showing computed area, center, and bounding box values. The code uses Turf’s `area`, `center`, `bbox`, and `buffer` functions to calculate spatial metrics, and also constructs overlapping polygons to visualize union, difference, and intersection operations. A base OpenStreetMap tile layer provides geographic context, with layer controls to toggle between the OSM, district, and headquarters overlays. The map is initialized and rendered entirely in the browser using Leaflet’s API.

Zzach b.

77% match

Loading thumbnail…

Fork of Fork of Leaflet + D3 Map

This visualization combines Leaflet and D3 to display geographic data on an interactive Esri World Imagery map. It uses Leaflet’s tile layer and SVG overlay, with D3’s geoPath and a custom geoTransform projection to render polygon and MultiLineString features from embedded GeoJSON data. The map shows hand-drawn lane boundaries and pincode areas, with polygons that respond to mouseover by changing color. The plot also includes a separate circles.json file containing coordinate points, though these are not referenced in the main HTML script.

NNita

75% match

Loading thumbnail…

Fork of Nepal Map ICE8

This example displays a map of Canada rendered as SVG paths, with each province or territory filled white and outlined in grey. The code uses React for the page structure and D3 v5’s `d3.geoMercator` projection and `d3.geoPath` to convert GeoJSON features into drawable path data. GeoJSON is fetched from a remote GitHub source via `d3.json`, and the selected map geometry is appended to the SVG container. The visualization demonstrates a straightforward integration of D3’s geographic utilities within a React-based HTML setup.

RRinoj-Gautam

72% match

Loading thumbnail…

World Map

This example visualizes the districts of Nepal as a choropleth-style map, rendered with SVG paths fitted to a clipped Mercator projection. The map displays geographic boundaries in teal against a gray sphere background, with the projection centered on Nepal’s coordinates. The code uses `d3.geoMercator` and `d3.geoPath` to project GeoJSON features, while React manages the component state and rendering. District data comes from the mesaugat geoJSON-Nepal repository, and the visualization is built with React 16.9 and D3 v5.

PPriteshlip10

71% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example uses D3.js v5 and TopoJSON to render an interactive map of Bhutan as a static SVG visualization. The code imports `geoMercator` and `geoPath` to project geographic coordinates onto a 960×500 canvas, with the country’s polygon data embedded directly in the script. A blue sphere background and light-green country fill with subtle black strokes are styled via CSS. The map is rendered using SVG paths, demonstrating a straightforward Mercator projection without additional interaction or animation.

SSubhamChhetri

70% match

Loading thumbnail…

Fork of Fork of Fork of india map

This visualization shows a choropleth map of India with district-level boundaries colored by state and overlaid with state outlines, enabling pan and zoom interaction. The map renders districts using `d3.geoPath` with a `geoMercator` projection, while state and district data come from external TopoJSON files. Hovering a district displays its name and state in a tooltip via appended `title` elements, and the view transforms with `d3.zoom`. District colors derive from `scaleOrdinal` with `schemeCategory10`.

Ssaiteja0725

70% match

Loading thumbnail…

Fork of Map

This example demonstrates two static maps rendered with D3 v7: a world map using the Natural Earth projection and a map of Nepal using the Mercator projection. Both visualizations load country boundaries from the `world-atlas@2` TopoJSON dataset, which is converted to GeoJSON via `topojson.feature` and drawn with `d3.geoPath`. The world map includes a graticule and a sphere background, while the Nepal map filters features by country ID 524 and fits the projection to that geometry. The code uses `d3.geoNaturalEarth1`, `d3.geoMercator`, and `projection.fitSize` to position the maps within their SVG containers.

AAmrit Adhikari

70% match