Skip to main content
SimilarExport ZIP
100%

hello leaflet.js

✓ Published2🌍 Public
Zzach b.
Last edited Feb 16, 2022
Created on Feb 15, 2022
Forked from HTML Starter

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.

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 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.
85% 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
74% match
Loading thumbnail…

Activity-8.5.2

This example displays a map of Nepal, rendered as an SVG using a Mercator projection. It loads world-atlas GeoJSON data from a CDN and filters it for the Nepal geometry. The code uses D3 v5 functions like `d3.json`, `d3.geoMercator`, `d3.geoPath`, and the `topojson-client` library to project and draw the country's boundary.

Ppjdhungana@gmail.com
73% 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
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 - 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
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
72% match
Loading thumbnail…

Simple Leaflet Map

This example shows an interactive Leaflet map centered on Wellington, New Zealand, with a layer control that lets the user switch between two base tile layers: OpenStreetMap and OpenTopoMap. Using the Leaflet 1.6.0 JavaScript API, it defines two `L.tileLayer` instances—one pulling raster tiles from `tile.openstreetmap.org` and the other from `tile.opentopomap.org`—and adds them as selectable base layers via `L.control.layers`. The map itself is initialized with `L.map`, set to a zoom level of 14, and displays only the OSM layer initially.

Dd3noob
71% match