Leaflet-form

100%

✓ Published1🌍 Public

Last edited Apr 4, 2020

Created on Apr 4, 2020

This example is an interactive map for collecting user-generated geographic data. A Leaflet map centered on Gothenburg, Sweden, displays OpenStreetMap tiles and includes a blank GeoJSON layer. Users can add features to this layer, which are then clickable. The code uses Leaflet, the Leaflet.draw plugin for drawing shapes, and EasyButton for custom controls, with jQuery handling form input.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 + leaflet + GForm

This example combines D3.js, Leaflet, and the Google Maps Geocoding API to visualize geocoded data from a Google Form spreadsheet on an interactive map. Circles are drawn on a Leaflet map using D3, with their positions updated based on the map view. The circles' fill colors correspond to categories in the data, and hovering over a circle triggers a smooth elastic transition that enlarges it, while clicking displays the venue's name, formatted address, and timestamp in an HTML tooltip panel. The map and circles animate in response to panning and zooming, and the data is loaded dynamically via Tabletop from a public Google Sheet.

FFedericopvs

71% match

Loading thumbnail…

Leaflet - geoJSON - Polygons

This example creates an interactive web map using the Leaflet library, displaying a custom GeoJSON MultiPolygon feature as a shaded area over OpenStreetMap tiles. The map is initialized with a center point and zoom level, then a tile layer provides the base map. A GeoJSON object defines two polygon shapes—one with a hole—which are added directly to the map via Leaflet’s `L.geoJSON` API. The map uses the VizJS library for tile configuration and fills the entire viewport.

NNPashaP

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

69% match

Loading thumbnail…

Leaflet.draw Plugin

This example shows an interactive map with the Leaflet.draw plugin, demonstrating drawing and editing tools for polylines, polygons, rectangles, circles, and markers. The map renders OpenStreetMap tiles, with drawn shapes styled in distinct colors and a custom green icon for markers. The code uses Leaflet’s `L.Control.Draw` with options like intersection prevention and area display, and stores created layers in a `L.FeatureGroup` for editing and removal. A custom `L.Icon` class defines the marker appearance, while the `draw:created` event adds new geometries to the group.

Dd3noob

69% match

Loading thumbnail…

Leaflet.draw Plugin

This example shows an interactive map of a New Zealand location using OpenStreetMap tiles, rendered with Leaflet.js and the Leaflet.draw plugin. Users can draw polygon, polyline, rectangle, circle, and marker shapes on the map, each with custom colors and style options. The drawn items are collected in a Leaflet FeatureGroup, and the code configures features like intersection detection for polygons, area display, and repeat drawing mode. A custom green leaf icon is created via `L.Icon.extend` with a shadow URL, and popup bindings are added to drawn markers.

Dd3noob

68% match

Loading thumbnail…

Untitled

This example displays a Leaflet map centered on a coastal area, with several vector layers added programmatically. It shows a GeoJSON polygon and point rendered via `L.geoJson`, alongside a marker, a red circle, and a polygon created with `L.marker`, `L.circle`, and `L.polygon`. The map uses a MapTiler Voyager tile layer with CARTO and OpenStreetMap attribution. Popups are bound to each shape, with the marker’s popup opened by default, demonstrating basic interactive map layers in a React-agnostic HTML setup.

Ccharliemok

68% match

Loading thumbnail…

Simple Leaflet Map

This example displays a simple interactive map with four settlement markers, each opening a popup with its label. The map is built with Leaflet 0.7, using an OpenStreetMap tile layer. The code initializes a map centered on the first settlement and adds markers from a hardcoded array of coordinates, demonstrating basic Leaflet map creation, tile loading, and marker popup functionality in a plain HTML page.

Ccharliemok

67% match

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.

66% match