Skip to content

naranyala/awesome-maps-examples

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
__pycache__
__pycache__
 
 
leaflet-implementation
leaflet-implementation
 
 
maplibre-implementation
maplibre-implementation
 
 
openlayers-implementation
openlayers-implementation
 
 
tests
tests
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
TODOS.md
TODOS.md
 
 
add_examples.py
add_examples.py
 
 
add_examples2.py
add_examples2.py
 
 
build.py
build.py
 
 
examples.json
examples.json
 
 
fix_readme_maplibre.py
fix_readme_maplibre.py
 
 
fix_readme_openlayers.py
fix_readme_openlayers.py
 
 
generate_matrix.py
generate_matrix.py
 
 
generate_todos.py
generate_todos.py
 
 
index.html
index.html
 
 
ol_examples_todo.json
ol_examples_todo.json
 
 
package.json
package.json
 
 
playwright.config.js
playwright.config.js
 
 
serve.py
serve.py
 
 
validate_examples.py
validate_examples.py
 
 
validate_names.py
validate_names.py
 
 

Repository files navigation

🗺️ Awesome Maps Examples Awesome License: MIT

The ultimate playbook for building stunning, interactive 2D-focused geospatial applications.

Welcome to Awesome Maps Examples! Whether you are building a data-rich visualization dashboard, a real-time fleet tracking platform, or a lightning-fast store locator, you will find the inspiration and implementation details you need right here.

This repository is a meticulously curated collection of over 500 interactive, 2D-focused map examples, highlighting the industry's leading rendering engines:

  • 🍃 Leaflet.js - The legendary, mobile-friendly interactive mapping library.
  • 🚀 MapLibre GL JS - High-performance WebGL vector maps for dynamic 2D rendering.
  • ☁️ OpenLayers - High-performance, open-source (BSD) web mapping library.

📚 Geo Resources: For non-example reference material (algorithms, libraries by language, spatial databases, service APIs), see awesome-geo-resources.md.

🧭 How to use this list

Unlike traditional lists grouped simply by library, this collection is categorized entirely by feature and topic (e.g., Routing, Controls & UI, Spatial Analysis). This structure empowers you to directly mix, match, and compare how different libraries solve the exact same problems!

We've also included advanced integration ideas, Turf.js architectures, and a complete overview of the global geospatial ecosystem to help you architect your next great map.

📂 Local Implementations Index

This section provides a direct mapping to all 123 interactive examples implemented natively within this repository.

🍃 Leaflet Examples

Example Name File Path Description
3D Building leaflet-implementation/3d-building.html Simulate 3D extruded building footprints using the OSMBuildings plugin.
Animate Line leaflet-implementation/animate-line.html Progressive line drawing animation with play/reset
Basic Map leaflet-implementation/basic-map.html Minimal Leaflet map setup
Choropleth leaflet-implementation/choropleth.html Data-driven polygon coloring
Click Coordinates leaflet-implementation/click-coordinates.html Capture click coordinates
Context Menu leaflet-implementation/context-menu.html Right-click context menu
Custom Controls leaflet-implementation/custom-controls.html Custom zoom + rotate-north controls
Custom Marker leaflet-implementation/custom-marker.html Custom HTML marker with popup
Draw GeoJSON leaflet-implementation/drawing-tools.html Draw and export GeoJSON features
External Layer Control leaflet-implementation/external-layer-control.html Build an external HTML UI to programmatically drive the map layers.
Fly To Animation leaflet-implementation/fly-to-animation.html Animated fly-to with easing
Fullscreen leaflet-implementation/fullscreen.html Fullscreen toggle control
GeoJSON Upload leaflet-implementation/geojson-upload.html Drag and drop GeoJSON files to render
Geocoding leaflet-implementation/geocoding.html Search locations with Nominatim
Geofence leaflet-implementation/geofence.html Geofence detection using Turf.js
Geolocation leaflet-implementation/geolocation.html User position tracking with accuracy
Heatmap leaflet-implementation/heatmap.html Heat map density visualization
Hover Effect leaflet-implementation/hover-effect.html Interactive hover highlighting on polygons with tooltip
Image Overlay leaflet-implementation/image-overlay.html Overlay an image on the map with opacity control
Layer Toggle leaflet-implementation/layer-toggle.html Switch between multiple tile layers
Marker Clustering leaflet-implementation/cluster-markers.html Cluster nearby markers together
Mini Map leaflet-implementation/minimap.html Overview minimap synced to main view
Mouse Follow leaflet-implementation/mouse-follow.html Marker that follows the mouse cursor
Popup & Tooltip leaflet-implementation/popup-tooltip.html Rich popups with images and hover tooltips
Realtime Data leaflet-implementation/realtime-data.html Live-updating point data stream
Satellite Map leaflet-implementation/satellite-map.html Style switcher with satellite imagery
Scale Bar leaflet-implementation/scale-bar.html Metric and imperial scale bar
Store Locator leaflet-implementation/store-locator.html Store locator with search and category filtering
Sync Maps leaflet-implementation/sync-maps.html Multiple maps with synchronized movement
Sync Maps Comparison leaflet-implementation/sync-maps-comparison.html Side-by-side map comparison with synced views
Time Slider leaflet-implementation/time-slider.html Temporal data visualization with time slider
Turf Area Measurement leaflet-implementation/turf-area-measurement.html Measure area of drawn polygon using Turf.js
Turf Buffer leaflet-implementation/turf-buffer.html Calculate 10km buffer around clicked point using Turf.js
Turf Convex Hull leaflet-implementation/turf-convex-hull.html Create convex hull from points using Turf.js
Turf Great Circle leaflet-implementation/turf-great-circle.html Draw geodesic curves using Turf.js
Turf Intersection leaflet-implementation/turf-intersection.html Find intersection of two overlapping polygons using Turf.js
Turf Nearest Point leaflet-implementation/turf-nearest-point.html Find nearest point using Turf.js
Turf Point in Polygon leaflet-implementation/turf-point-in-polygon.html Test point containment using Turf.js
Turf Voronoi leaflet-implementation/turf-voronoi.html Generate Voronoi polygons from points using Turf.js
WASD Navigation leaflet-implementation/wasd-navigation.html Game-like WASD keyboard navigation
Weather leaflet-implementation/weather.html Weather overlay with NOAA radar data

🚀 Maplibre Examples

Example Name File Path Description
3D Building maplibre-implementation/3d-building.html 3D building extrusion with pitch/bearing
Animate Line maplibre-implementation/animate-line.html Progressive line drawing animation
Basic Map maplibre-implementation/basic-map.html Minimal MapLibre GL JS setup
Choropleth maplibre-implementation/choropleth.html Choropleth with data-driven styling
Click Coordinates maplibre-implementation/click-coordinates.html Capture click coordinates
Cluster Markers maplibre-implementation/cluster-markers.html Supercluster-based marker clustering
Context Menu maplibre-implementation/context-menu.html Right-click context menu with zoom-to and add marker actions
Custom Controls maplibre-implementation/custom-controls.html Custom rotate-north control button
Custom Marker maplibre-implementation/custom-marker.html Custom HTML marker with popup
Draw Polygon maplibre-implementation/drawing-tools.html Draw and edit polygons with mapbox-gl-draw
External Layer Control maplibre-implementation/external-layer-control.html Control layers from outside the map
Fly To Animation maplibre-implementation/fly-to-animation.html Animate camera movement combining panning and zooming smoothly.
Fullscreen maplibre-implementation/fullscreen.html Fullscreen control
GeoJSON Upload maplibre-implementation/geojson-upload.html Drag and drop GeoJSON files
Geocode Nominatim maplibre-implementation/geocoding.html Search locations with Nominatim API
Geofence maplibre-implementation/geofence.html Geofence detection using Turf.js
Geolocation maplibre-implementation/geolocation.html User position tracking with accuracy circle
Heatmap maplibre-implementation/heatmap.html WebGL-accelerated heatmap layer
Hover Effect maplibre-implementation/hover-effect.html Interactive hover highlighting on polygons
Image Overlay maplibre-implementation/image-overlay.html Static image overlay with opacity control
Layer Toggle maplibre-implementation/layer-toggle.html Switch between different base styles such as street and satellite imagery.
Mini Map maplibre-implementation/minimap.html Overview minimap synced to main view
Mouse Follow maplibre-implementation/mouse-follow.html Dynamically update a marker position to track the mouse cursor over the canvas.
Popup & Tooltip maplibre-implementation/popup-tooltip.html Rich popups with images and hover tooltips
Realtime Data maplibre-implementation/realtime-data.html Live-updating point data stream
Satellite Map maplibre-implementation/satellite-map.html Style switcher with satellite imagery
Scale Bar maplibre-implementation/scale-bar.html Metric scale bar control
Store Locator maplibre-implementation/store-locator.html Store locator with search and category filtering
Sync Maps maplibre-implementation/sync-maps.html Multiple maps with synchronized movement
Sync Maps Comparison maplibre-implementation/sync-maps-comparison.html Side-by-side map comparison with synced views
Time Slider maplibre-implementation/time-slider.html Temporal data visualization with time slider
Turf Area Measurement maplibre-implementation/turf-area-measurement.html Measure area of drawn polygon using Turf.js
Turf Buffer maplibre-implementation/turf-buffer.html Calculate 10km buffer around clicked point using Turf.js
Turf Convex Hull maplibre-implementation/turf-convex-hull.html Create convex hull from points using Turf.js
Turf Great Circle maplibre-implementation/turf-great-circle.html Draw geodesic curves using Turf.js
Turf Intersection maplibre-implementation/turf-intersection.html Find intersection of two overlapping polygons using Turf.js
Turf Nearest Point maplibre-implementation/turf-nearest-point.html Find nearest point using Turf.js
Turf Point in Polygon maplibre-implementation/turf-point-in-polygon.html Test point containment using Turf.js
Turf Voronoi maplibre-implementation/turf-voronoi.html Generate Voronoi polygons from points using Turf.js
WASD Navigation maplibre-implementation/wasd-navigation.html Game-like WASD keyboard navigation
Weather maplibre-implementation/weather.html Weather overlay with NOAA radar data

☁️ Openlayers Examples

Example Name File Path Description
3D Building openlayers-implementation/3d-building.html Styled polygons with rotation control
Animate Line openlayers-implementation/animate-line.html Progressive line drawing animation
Basic Map openlayers-implementation/basic-map.html Minimal map setup with OpenLayers
Choropleth Map openlayers-implementation/choropleth.html Thematic area shading by data values
Click Coordinates openlayers-implementation/click-coordinates.html Capture click coordinates on the map
Cluster Markers openlayers-implementation/cluster-markers.html Supercluster-based marker clustering
Context Menu openlayers-implementation/context-menu.html Right-click context menu with actions
Custom Controls openlayers-implementation/custom-controls.html Custom rotate-north control button
Custom Marker openlayers-implementation/custom-marker.html Pulsing animated marker with popup
Drawing Tools openlayers-implementation/drawing-tools.html Draw points, lines, and polygons on the map
External Layer Control openlayers-implementation/external-layer-control.html Use external HTML buttons to toggle the visibility properties of map layers.
Fly-To Animation openlayers-implementation/fly-to-animation.html Smooth animated fly-to with easing
Fullscreen openlayers-implementation/fullscreen.html Fullscreen toggle control
GeoJSON Upload openlayers-implementation/geojson-upload.html Drag and drop GeoJSON files
Geocode Nominatim openlayers-implementation/geocoding.html Search locations with Nominatim API
Geofence openlayers-implementation/geofence.html Geofence detection with moving marker
Geolocation openlayers-implementation/geolocation.html User position tracking with accuracy circle
Heatmap openlayers-implementation/heatmap.html Heat map density visualization
Hover Effect openlayers-implementation/hover-effect.html Interactive hover highlighting on polygons
Image Overlay openlayers-implementation/image-overlay.html Overlay an image on the map
Layer Toggle openlayers-implementation/layer-toggle.html Switch between multiple tile layers
Mini Map openlayers-implementation/minimap.html Overview minimap synced to main view
Mouse Follow openlayers-implementation/mouse-follow.html Marker that follows the mouse cursor
Popup & Tooltip openlayers-implementation/popup-tooltip.html Rich popups with hover tooltips
Realtime Data openlayers-implementation/realtime-data.html Live-updating point data stream
Satellite Map openlayers-implementation/satellite-map.html Style switcher with satellite imagery
Scale Bar openlayers-implementation/scale-bar.html Scale bar with imperial/metric units
Store Locator openlayers-implementation/store-locator.html Store locator with search and filtering
Sync Maps openlayers-implementation/sync-maps.html Multiple maps with synchronized movement
Sync Maps Comparison openlayers-implementation/sync-maps-comparison.html Side-by-side map comparison with synced views
Time Slider openlayers-implementation/time-slider.html Temporal data visualization with time slider
Turf Area Measurement openlayers-implementation/turf-area-measurement.html Measure area of drawn polygon using Turf.js
Turf Buffer openlayers-implementation/turf-buffer.html Calculate 500km buffer around clicked point using Turf.js
Turf Convex Hull openlayers-implementation/turf-convex-hull.html Create convex hull from points using Turf.js
Turf Great Circle openlayers-implementation/turf-great-circle.html Draw geodesic curves using Turf.js
Turf Intersection openlayers-implementation/turf-intersection.html Find intersection of two overlapping polygons using Turf.js
Turf Nearest Point openlayers-implementation/turf-nearest-point.html Find nearest point using Turf.js
Turf Point in Polygon openlayers-implementation/turf-point-in-polygon.html Test point containment using Turf.js
Turf Voronoi openlayers-implementation/turf-voronoi.html Generate Voronoi polygons from points using Turf.js
WASD Navigation openlayers-implementation/wasd-navigation.html Game-like WASD keyboard navigation
Weather openlayers-implementation/weather.html Weather overlay with radar data

Animation & Camera

Controls & UI

Data Visualization

Geometry, Drawing & Data

Getting Started & Basic Maps

Layers, Tiles & Sources

Markers, Icons & Clusters

Popups & Tooltips

Routing & Directions

Search & Geocoding

Spatial Analysis & Math

Traffic & Navigation

Weather & Sensors

Potential Turf.js Examples (Advanced Spatial Analysis)

Turf.js is the industry standard for performing advanced geospatial analysis directly in the browser (or Node.js) without needing a backend server like PostGIS. Below are some potential, high-value examples that could be built combining Turf.js with the rendering engines (Leaflet, MapLibre, or OpenLayers):

1. Real-Time Geofencing & Alerts

  • Concept: Track a user's live device location and trigger visual alerts or notifications when they cross boundaries.
  • Turf.js Methods: turf.booleanPointInPolygon(), turf.booleanCrosses()
  • Rendering: MapLibre GL JS (for smooth 60fps tracking) or OpenLayers.

2. Client-Side Hexbin Aggregation

  • Concept: Take a massive dataset of scatter points (e.g., 50,000 taxi drop-offs) and group them into a honeycomb grid to visualize density.
  • Turf.js Methods: turf.hexGrid(), turf.collect(), turf.pointsWithinPolygon()
  • Rendering: Mapbox / MapLibre GL JS using data-driven styling (fill-color based on count).

3. Interactive Route Snapping

  • Concept: When a user is drawing a custom path or placing markers, automatically snap their cursor to the nearest point on a complex pre-existing road network line.
  • Turf.js Methods: turf.nearestPointOnLine(), turf.pointToLineDistance()
  • Rendering: Leaflet with Leaflet-Geoman or MapLibre with mapbox-gl-draw.

4. Dynamic Catchment Areas (Convex/Concave Hulls)

  • Concept: Select a group of distributed assets (like delivery trucks or localized outbreaks) and instantly draw a boundary wrapping around them to define an active zone.
  • Turf.js Methods: turf.convex(), turf.concave(), turf.buffer()
  • Rendering: Leaflet or MapLibre GL JS for rendering the resulting polygon mask.

5. Cadastral Parcel Splitting & Merging

  • Concept: A web-based land management tool where a user can select two adjacent property polygons to merge them into one, or draw a line through a property to split it into two distinct polygons, instantly recalculating the square footage.
  • Turf.js Methods: turf.union(), turf.intersect(), turf.area(), and line-splitting utilities.
  • Rendering: Any renderer, but highly dependent on good drawing controls (OpenLayers Drawing Tools or Leaflet-Geoman).

6. Client-Side Topographic / Isoline Generation

  • Concept: Input a GeoJSON collection of random elevation or temperature points. Generate a topographic contour map directly in the browser.
  • Turf.js Methods: turf.tin() (Triangulated Irregular Network), turf.isobands(), turf.isolines()
  • Rendering: Rendered as a vector tile source in MapLibre, with 3D terrain extrusion applied to the resulting polygons for a beautiful 3D topographic view.

7. Find Nearest Store with Great Circle Paths

  • Concept: A store locator that doesn't just list the nearest store, but draws a curved flight-path (great circle arc) from the user's location to the 3 closest stores.
  • Turf.js Methods: turf.nearestPoint(), turf.greatCircle(), turf.distance()
  • Rendering: OpenLayers or Leaflet.

Advanced Cross-Library Integrations (Interactive Apps & Editors)

While individual libraries are powerful, combining them unlocks the ability to build production-grade geographic editors, data dashboards, and storytelling experiences. Here are some potential architectures combining multiple libraries:

1. Full-Featured GeoJSON Editor & Validator

  • Combination: MapLibre GL JS + terra-draw + Turf.js
  • Concept: Build an interactive data creation tool similar to geojson.io.
    • MapLibre handles the high-performance basemap.
    • terra-draw provides uniform, cross-browser drawing tools for lines, polygons, and points.
    • Turf.js runs real-time topology validation (e.g., preventing self-intersecting polygons using turf.kinks) and live area calculations in the sidebar.

2. Massive Scale Vector Tile Explorer

  • Combination: Mapbox\/MapLibre GL JS + PMTiles
  • Concept: Visualize millions of spatial records (e.g., nationwide building footprints or live telematics) entirely in the browser.
    • PMTiles allows you to stream massive vector tile datasets directly from an S3 bucket (serverless architecture).
    • MapLibre provides the underlying styled basemap and renders the dense vector geometries rapidly using WebGL.

3. Scrollytelling & Interactive Data Storytelling

  • Combination: MapLibre GL JS + IntersectionObserver (or ScrollMagic) + D3.js
  • Concept: Create an immersive journalistic experience.
    • As the user scrolls down an article, IntersectionObserver triggers the map camera to smoothly fly (using map.flyTo) between different points of interest.
    • D3.js renders dynamic charts over the map that animate and update based on the features currently visible in the map's bounding box.

4. Real-Time Fleet Tracking & Logistics Dashboard

  • Combination: OpenLayers + Socket.io + Turf.js
  • Concept: A logistics dashboard where vehicle positions are streamed live.
    • Socket.io streams GPS telemetry to the frontend.
    • OpenLayers renders the live markers and overlays live traffic incident data.
    • Turf.js locally calculates distance to the nearest warehouse (turf.distance) or detects if a truck has entered a delivery geofence (turf.booleanPointInPolygon) without requiring backend spatial queries.

5. Multi-Modal Routing & Navigation Interface

  • Combination: Leaflet + Leaflet Routing Machine + GraphHopper API
  • Concept: Build a custom navigation app for specialized vehicles (e.g., bicycles, RVs).
    • GraphHopper acts as the backend routing engine, calculating the fastest path considering elevation and vehicle restrictions.
    • Leaflet Routing Machine provides the frontend turn-by-turn instruction UI and draggable waypoints.
    • Leaflet renders the UI over top of custom OpenStreetMap tiles.

6. Indoor Mapping & Facility Management

  • Combination: MapLibre GL JS + mapbox-gl-indoor
  • Concept: Build an interactive campus or mall directory.
    • Use MapLibre to render indoor floor plans.
    • Implement mapbox-gl-indoor to give users a UI widget to toggle between different floors (Level 1, Level 2, etc.).
    • Clicking on a room highlights it and opens a custom pop-up to update occupancy metadata or reserve the space.

Plugins Reference

Leaflet

MapLibre GL JS

OpenLayers

Turf.js Examples (Cross-Library)

Turf.js is the standard geospatial analysis library for JavaScript. It works standalone in Node.js or in the browser with any map renderer. Below are potential examples organized by capability, showing both Turf.js alone and combined with map libraries.

Turf.js Modules Reference

  • Category - Modules
  • Measurement - area, length, distance, bearing, rhumb-distance, rhumb-bearing
  • Transformation - buffer, bezier-spline, simplify, clean-coords, flip, rewind, line-offset
  • Comparison - boolean-point-in-polygon, boolean-contains, boolean-crosses, boolean-disjoint, boolean-intersects, boolean-overlap, boolean-touches, boolean-within, boolean-equal, boolean-parallel, boolean-valid
  • Combination - union, difference, intersect, dissolve, combine, collect, mask
  • Aggregation - convex, concave, envelope, voronoi, hex-grid, point-grid, rectangle-grid
  • Interpolation - interpolate, isobands, isolines, idw
  • Centers - center, center-of-mass, centroid, center-mean, center-median, midpoint
  • Clustering - clusters-dbscan, clusters-kmeans
  • Analysis - turf-meta, quadrat-analysis, nearest-neighbor-analysis, moran-index, directional-mean, distance-weight
  • Nearest - nearest-point, nearest-point-on-line, nearest-point-to-line, point-to-line-distance, point-to-polygon-distance
  • Selection - points-within-polygon, tag, sample
  • Measurement Geometry - along, line-chunk, line-segment, line-intersect, line-slice, line-slice-along, line-split
  • Measurement Polygon - polygon-tangents, polygon-smooth, polygon-to-line, line-to-polygon, polygonize
  • Curves - great-circle, line-arc, sector, circle, ellipse
  • Generation - random, destination, point-on-feature, explode
  • Gridding - hex-grid, point-grid, rectangle-grid

Measurement & Distance

Example Turf.js Module(s) Renderer Description
Point-to-point distance distance Leaflet / MapLibre / OpenLayers Click two points, display distance in km/mi
Route length measurement length Leaflet / MapLibre Click along a polyline, show cumulative length
Bearing calculator bearing, destination Leaflet Click origin + destination, show bearing angle
Area calculator area Any Draw polygon, show area in m²/km²/acres
Distance from point to line point-to-line-distance MapLibre Drag point, show shortest distance to route
Distance from point to polygon point-to-polygon-distance MapLibre Drag point, show distance to nearest polygon edge
Midpoint finder midpoint Leaflet Click two points, place marker at midpoint

Buffer & Zone Analysis

Example Turf.js Module(s) Renderer Description
🆕 Point buffer zone buffer Leaflet / MapLibre / OpenLayers Click point, draw radius buffer (km/mi)
🆕 Dynamic radius buffer buffer MapLibre Slider to adjust buffer radius in real-time
🆕 Multi-ring buffer buffer Leaflet / MapLibre Concentric rings (1km, 5km, 10km) around POI
🆕 Line buffer (corridor) buffer MapLibre Buffer around a polyline route
🆕 Polygon buffer (inset/outset) buffer Any Expand or shrink polygon boundary
🆕 Buffer intersection buffer, intersect MapLibre Find area overlap between two buffered zones
🆕 Buffer difference buffer, difference MapLibre Subtract one buffer from another

Spatial Queries & Boolean Operations

Example Turf.js Module(s) Renderer Description
Point-in-polygon test boolean-point-in-polygon Leaflet / MapLibre Drag point, highlight containing polygon
Points within polygon points-within-polygon Leaflet / MapLibre Select markers inside drawn area
Polygon intersection intersect MapLibre / OpenLayers Draw two polygons, show overlap area
Polygon difference difference MapLibre Cut one polygon from another
Polygon union union MapLibre Merge two overlapping polygons
Line-polygon intersection line-intersect, intersect MapLibre Find where road crosses zone boundary
Boolean contains boolean-contains Any Check if polygon fully contains another
Boolean overlaps boolean-overlap Any Check if two polygons overlap
Boolean crosses boolean-crosses Any Check if line crosses polygon boundary
Boolean disjoint boolean-disjoint Any Check if two features don't touch

Voronoi, Hex Grids & Tessellation

Example Turf.js Module(s) Renderer Description
Voronoi diagram from points voronoi MapLibre / Leaflet Generate service areas from store locations
Point grid sampling point-grid, tag MapLibre Grid of sample points, tag with polygon properties
Rectangle grid analysis rectangle-grid Leaflet / MapLibre Overlay grid, aggregate data per cell
Concave hull from points concave MapLibre Draw boundary around cluster of points
Convex hull from points convex Leaflet / MapLibre / OpenLayers Enclose points in smallest convex polygon
Envelope bounding box envelope Any Draw bounding box around feature collection
Dissolve adjacent polygons dissolve MapLibre Merge touching polygons into single feature
Polygon mask mask MapLibre Invert polygon to create mask overlay

Interpolation & Surface Analysis

Example Turf.js Module(s) Renderer Description
Isoline contours isolines MapLibre / OpenLayers Elevation contour lines from point data
Isoband filled contours isobands MapLibre / OpenLayers Filled elevation/temperature bands
Nearest neighbor analysis nearest-neighbor-analysis Any Statistical analysis of point distribution
Moran's I spatial autocorrelation moran-index Any Detect clustering patterns in data
Quadrat analysis quadrat-analysis MapLibre Grid-based density analysis

Clustering & Classification

Example Turf.js Module(s) Renderer Description
K-Means clustering clusters-kmeans Leaflet / MapLibre Group points into k clusters
DBSCAN clustering clusters-dbscan Leaflet / MapLibre Density-based spatial clustering
Cluster with heatmap clusters-kmeans MapLibre + heatmap layer Cluster points, show as heatmap
Cluster with choropleth clusters-kmeans, convex MapLibre Cluster points, draw hull per cluster
Weighted center median center-median MapLibre Find optimal facility location
Directional mean directional-mean MapLibre Show average direction of line features

Route & Path Analysis

Example Turf.js Module(s) Renderer Description
Points along route along Leaflet / MapLibre Place markers at equal intervals along path
Route segment extraction line-slice-along MapLibre Extract portion of route between distances
Route splitting line-split MapLibre Split route at intersection point
Route chunks line-chunk MapLibre Divide route into equal-length segments
Nearest point on route nearest-point-on-line Leaflet / MapLibre Snap location to nearest point on road
Route waypoints from polygon tag, points-within-polygon MapLibre Find all waypoints inside service zone
NECT Route corridor buffer, line-to-polygon MapLibre Create corridor polygon around route
Shortest path shortest-path MapLibre Path between two points avoiding obstacles

Geofencing & Proximity

Example Turf.js Module(s) Renderer Description
Geofence alert system boolean-point-in-polygon Leaflet / MapLibre Monitor device location against zone
Nearest POI finder nearest-point Leaflet / MapLibre Find closest marker to user location
Proximity alert circles circle, boolean-intersects MapLibre Alert when points enter radius
Service area analysis buffer, intersect MapLibre Overlap of multiple service radii
Drive time polygon boolean-point-in-polygon + OSRM MapLibre Isochrone from routing API + Turf filter
Facility location optimizer center-median, distance MapLibre Find optimal site using weighted median

Geometry Generation & Manipulation

Example Turf.js Module(s) Renderer Description
Bezier spline curves bezier-spline Leaflet / MapLibre Smooth curves through waypoints
Circle generation circle Leaflet / MapLibre / OpenLayers Generate circle polygon from center + radius
Ellipse generation ellipse MapLibre Draw ellipse from center + axes + rotation
Sector generation sector MapLibre Draw pie/wedge shape
Polygon smoothing polygon-smooth MapLibre Smooth jagged polygon boundaries
Polygon simplification simplify Any Reduce polygon vertex count
Coordinate cleanup clean-coords Any Remove duplicate vertices
Polygon tangent lines polygon-tangents MapLibre Tangent lines from point to polygon
Line offset line-offset Leaflet / MapLibre Create parallel offset line
Line to polygon line-to-polygon MapLibre Convert closed line to polygon
Polygon to line polygon-to-line MapLibre Extract polygon boundary as line
Polygonize from lines polygonize MapLibre Create polygons from intersecting lines
Explode multi-geometry explode Any Split MultiPolygon into individual polygons
Random point generation random Leaflet / MapLibre Generate random points within bounds
Random polygon generation random MapLibre Generate random polygon features
Destination point destination Leaflet / MapLibre Calculate point at bearing + distance

Line & Edge Analysis

Example Turf.js Module(s) Renderer Description
Line intersection finder line-intersect Leaflet / MapLibre Find all crossing points of two lines
Line segment extraction line-segment MapLibre Extract individual segments from polyline
Line overlap detection line-overlap MapLibre Find shared segments between two lines
Kink detection kinks MapLibre Find self-intersections in polygon
Directional mean lines directional-mean MapLibre Show average orientation of line set
Point on line test boolean-point-on-line Any Check if point lies exactly on line
Point on feature point-on-feature Any Snap point to nearest feature

Complex Multi-Module Workflows

Example Turf.js Modules Renderer Description
Service area comparison buffer, intersect, area MapLibre Compare overlapping service areas
Delivery zone optimizer voronoi, intersect, area MapLibre Optimize delivery boundaries
Catchment area analysis buffer, dissolve, area MapLibre Merge buffers, calculate total coverage
Route impact assessment buffer, intersect, tag MapLibre Find features affected by route corridor
Spatial join visualization tag, collect, clusters-kmeans Leaflet / MapLibre Join datasets, cluster, visualize
Isochrone from routing + Turf boolean-point-in-polygon, buffer MapLibre Filter route data by time polygon
Heatmap from hex grid hex-grid, points-within-polygon, collect MapLibre + heatmap Aggregate points into hex cells, show density
Land use classifier intersect, area, dissolve MapLibre Classify zones by area overlap
Market area analysis voronoi, convex, nearest-point MapLibre Service area per store, nearest store lookup
Route optimization visualization along, nearest-point-on-line, buffer MapLibre Show stops along route with service radius
Flood zone analysis isobands, intersect, dissolve MapLibre / OpenLayers Overlay elevation bands with property zones

Standalone (No Map Renderer)

  • Example: Turf.js Modules - Description
  • GeoJSON data validator: boolean-valid, kinks, clean-coords - Validate and clean GeoJSON features
  • Batch distance calculator: distance, bearing, length - Process CSV of coordinates, output distances
  • Spatial statistics report: moran-index, nearest-neighbor-analysis, quadrat-analysis - Generate spatial analysis report
  • GeoJSON optimizer: simplify, clean-coords, rewind - Reduce file size, fix winding order
  • Coordinate converter: projection - Convert between projections
  • Grid generator: hex-grid, point-grid, rectangle-grid - Generate grids for analysis or sampling
  • Random test data generator: random - Generate random points/polygons for testing
  • Polygon area calculator: area - Batch calculate areas of GeoJSON polygons
  • Line length calculator: length - Batch calculate lengths of GeoJSON lines
  • Point classifier: boolean-point-in-polygon, tag - Classify points by containing polygon

Multi-Library Combinations

Real-world interactive map applications rarely use a single library. Below are potential examples combining multiple packages into full-featured interfaces, editors, and creation tools.

Legend

  • Renderer: Map rendering library (Leaflet, MapLibre, OpenLayers, OpenLayers)
  • Analysis: Turf.js, D3-geo, deck.gl (non-3D layers)
  • Drawing: Leaflet-Geoman, mapbox-gl-draw, terra-draw
  • Data: PMTiles, Martin, GeoServer, PostGIS

Interactive Geometry Editor

Example Libraries Description
🆕 Full geo editor (create/edit/export) Leaflet + Leaflet-Geoman + Turf.js + shpwrite Draw, edit, validate, export to GeoJSON/Shapefile/KML
🆕 Vector tile editor MapLibre + mapbox-gl-draw + Turf.js Edit features on vector tile basemap
🆕 Multi-format editor MapLibre + terra-draw + Turf.js + togeojson Import KML/GPX, edit, export GeoJSON
🆕 CAD-like map editor OpenLayers + Turf.js + OpenLayers Draw Precision drawing with coordinate input
🆕 Collaborative geo editor MapLibre + terra-draw + Yjs + WebSocket Real-time collaborative editing
🆕 Satellite imagery digitizer MapLibre + mapbox-gl-draw + Turf.js + COG raster Trace features on satellite imagery
🆕 Building footprint editor MapLibre + mapbox-gl-draw + Turf.js Edit OSM building polygons with snap-to-grid
🆕 Road network editor MapLibre + mapbox-gl-draw + OSRM Edit road network, recompute routing graph

Data Visualization Dashboard

Example Libraries Description
🆕 Vector tile data viz MapLibre + PMTiles + Martin + PostGIS Self-hosted vector tile pipeline

Story Map & Narrative

Example Libraries Description
🆕 Scroll-driven story map MapLibre + IntersectionObserver + Turf.js Fly-to on scroll, data updates
🆕 Guided tour map MapLibre + Shepherd.js + Turf.js Step-by-step guided exploration
🆕 Photo essay on map Leaflet + Lightbox + Turf.js Geo-tagged photo narrative

Geospatial Analysis Tool

Example Libraries Description
🆕 Buffer/intersect tool MapLibre + Leaflet-Geoman + Turf.js Create buffers, find intersections
🆕 Voronoi service area tool MapLibre + Turf.js (voronoi, convex, area) Generate service areas from points
🆕 Route impact analyzer MapLibre + Turf.js (buffer, intersect, tag) + OSRM Find features affected by route
🆕 Coverage gap finder MapLibre + Turf.js (hex-grid, boolean-point-in-polygon) Find unserved areas
🆕 Isochrone builder MapLibre + Valhalla/OSRM + Turf.js (boolean-point-in-polygon) Drive-time polygons
🆕 Spatial join tool MapLibre + Turf.js (tag, collect, points-within-polygon) Join datasets spatially
🆕 Elevation profile tool MapLibre + Turf.js (along, destination) + DEM tiles Cross-section elevation along route
🆕 Geofence builder MapLibre + terra-draw + Turf.js (boolean-point-in-polygon) Create and test geofences

Real-Time & Live Tracking

Example Libraries Description
🆕 GPS trace replay MapLibre + Leaflet.Marker.SlideTo + Turf.js (along) Animate historical GPS trace
🆕 Weather radar overlay MapLibre + OpenWeatherMap tiles + Turf.js Live weather + spatial filtering
🆕 Traffic flow monitor MapLibre + TomTom tiles + Turf.js (buffer) Traffic + incident proximity alerts
🆕 Earthquake monitor MapLibre + USGS feed + Turf.js (buffer) Real-time seismic activity

Offline & Progressive Web App

Example Libraries Description
🆕 Offline-first map app MapLibre + PMTiles + Service Worker + IndexedDB Full offline vector map
🆕 Field data collector Leaflet + Leaflet.Offline + Turf.js + IndexedDB Collect points offline, sync later
🆕 Offline routing app MapLibre + Valhalla (WASM) + PMTiles Turn-by-turn without internet
🆕 Offline geofencing MapLibre + Turf.js (boolean-point-in-polygon) + Service Worker Geofence alerts offline
🆕 Cached tile manager MapLibre + Cache API + PMTiles Intelligent tile caching
🆕 Offline survey tool Leaflet + Leaflet-Geoman + Turf.js + IndexedDB Survey form + geometry collection offline

Print & Export

Example Libraries Description
🆕 Map PDF exporter MapLibre + jsPDF + canvas.toBlob Export current view as PDF
🆕 High-res map image MapLibre + html2canvas + Turf.js Print-quality map export
🆕 GeoJSON report generator MapLibre + Turf.js + pdfmake Generate PDF report with map + analysis
🆕 Shapefile exporter MapLibre + shpwrite + Turf.js Export drawn features as Shapefile
🆕 KML/GPX exporter MapLibre + tokml + Turf.js Export to Google Earth format
🆕 Map series generator MapLibre + Puppeteer + Turf.js Batch generate maps for multiple regions

Geo Calculation & Algorithms

Example Libraries Description
🆕 Convex hull computation Turf.js (convex) Smallest convex polygon enclosing points
🆕 Concave hull computation Turf.js (concave) Tight-fitting boundary around point clusters
🆕 Voronoi diagram generation Turf.js (voronoi) Service areas from seed points
🆕 Delaunay triangulation Turf.js (voronoi dual) Triangulate point sets for mesh generation
🆕 Hex grid tessellation Turf.js (hex-grid) Generate hexagonal bins for analysis
🆕 Point grid sampling Turf.js (point-grid) Regular grid of sample points
🆕 Rectangle grid overlay Turf.js (rectangle-grid) Grid cells for spatial aggregation
🆕 K-Means spatial clustering Turf.js (clusters-kmeans) Partition points into k groups
🆕 DBSCAN density clustering Turf.js (clusters-dbscan) Density-based spatial clustering
🆕 Nearest neighbor analysis Turf.js (nearest-neighbor-analysis) Clark-Evans index of point pattern
🆕 Moran's I autocorrelation Turf.js (moran-index) Spatial autocorrelation statistic
🆕 Quadrat analysis Turf.js (quadrat-analysis) Grid-based density distribution test
🆕 Directional mean Turf.js (directional-mean) Average orientation of line features
🆕 Distance weight matrix Turf.js (distance-weight) Spatial weight matrix from distances
🆕 IDW interpolation Turf.js (interpolate) Inverse distance weighted surface
🆕 Isoline contour generation Turf.js (isolines) Contour lines from point values
🆕 Isoband generation Turf.js (isobands) Filled contour bands from point values
🆕 Buffer zone generation Turf.js (buffer) Proximity zones around features
🆕 Multi-ring buffer Turf.js (buffer x3) Concentric proximity rings
🆕 Polygon union Turf.js (union) Merge overlapping polygons
🆕 Polygon difference Turf.js (difference) Subtract one polygon from another
🆕 Polygon intersection Turf.js (intersect) Find overlapping area
🆕 Polygon dissolve Turf.js (dissolve) Merge touching polygons
🆕 Polygon mask Turf.js (mask) Invert polygon for exclusion zone
🆕 Centroid computation Turf.js (centroid, center-of-mass) Geometric center of features
🆕 Weighted center median Turf.js (center-median) Optimal facility location
🆕 Center of mean position Turf.js (center-mean) Average coordinate position
🆕 Midpoint calculation Turf.js (midpoint) Exact midpoint between two points
🆕 Point-on-line snapping Turf.js (nearest-point-on-line) Snap point to nearest line position
🆕 Line intersection detection Turf.js (line-intersect) Find all crossing points
🆕 Self-intersection detection Turf.js (kinks) Find polygon/line self-crossings
🆕 Polygon area calculation Turf.js (area) Geodesic area in square meters
🆕 Line length calculation Turf.js (length) Geodesic length in meters/km
🆕 Distance matrix Turf.js (distance) Pairwise distance between all points
🆕 Bearing calculation Turf.js (bearing) Initial bearing between two points
🆕 Destination point Turf.js (destination) Point at bearing + distance
🆕 Great circle path Turf.js (great-circle) Shortest path on sphere
🆕 Rhumb line path Turf.js (rhumb-*) Constant bearing path
🆕 Polygon simplification Turf.js (simplify) Douglas-Peucker vertex reduction
🆕 Coordinate cleanup Turf.js (clean-coords) Remove duplicate vertices
🆕 Winding order correction Turf.js (rewind) Fix polygon winding for rendering
🆕 Point-in-polygon test Turf.js (boolean-point-in-polygon) Ray casting containment test
🆕 Point-on-line test Turf.js (boolean-point-on-line) Check if point lies on line
🆕 Boolean contains Turf.js (boolean-contains) Full containment test
🆕 Boolean overlaps Turf.js (boolean-overlap) Partial overlap test
🆕 Boolean crosses Turf.js (boolean-crosses) Line-polygon crossing test
🆕 Boolean disjoint Turf.js (boolean-disjoint) No-contact test
🆕 Boolean touches Turf.js (boolean-touches) Boundary contact test
🆕 Boolean parallel Turf.js (boolean-parallel) Line parallelism test
🆕 Spatial join Turf.js (tag, collect, points-within-polygon) Join datasets by spatial relationship
🆕 Nearest feature lookup Turf.js (nearest-point) Find closest feature to query point
🆕 Point-to-line distance Turf.js (point-to-line-distance) Shortest distance to line
🆕 Point-to-polygon distance Turf.js (point-to-polygon-distance) Shortest distance to polygon edge
🆕 Route distance calculation Turf.js (along, length) Cumulative distance along polyline
🆕 Route segment extraction Turf.js (line-slice-along) Extract portion between distances
🆕 Route splitting at point Turf.js (line-split) Divide line at intersection
🆕 Equal-interval sampling Turf.js (line-chunk) Divide line into equal segments
🆕 Bezier spline smoothing Turf.js (bezier-spline) Smooth curve through waypoints
🆕 Polygon smoothing Turf.js (polygon-smooth) Smooth jagged polygon edges
🆕 Line offset (parallel) Turf.js (line-offset) Create parallel offset line
🆕 Line-to-polygon conversion Turf.js (line-to-polygon) Close line into polygon
🆕 Polygon-to-line extraction Turf.js (polygon-to-line) Extract boundary as line
🆕 Polygonize from lines Turf.js (polygonize) Create polygons from line network
🆕 Explode multi-geometry Turf.js (explode) Split MultiPolygon into parts
🆕 Random point generation Turf.js (random) Random points within bounds
🆕 Random polygon generation Turf.js (random) Random polygon features
🆕 Envelope bounding box Turf.js (envelope) Bounding box of feature collection
🆕 Bounding box Turf.js (bbox) [minX, minY, maxX, maxY]
🆕 Sector generation Turf.js (sector) Pie/wedge shape from center
🆕 Circle polygon generation Turf.js (circle) Circle from center + radius
🆕 Ellipse generation Turf.js (ellipse) Ellipse from center + axes
🆕 Line arc generation Turf.js (line-arc) Arc segment from center + angles
🆕 Tangent lines to polygon Turf.js (polygon-tangents) Tangent lines from external point
🆕 Point on surface Turf.js (point-on-feature) Guaranteed interior point
🆕 Sample random subset Turf.js (sample) Random sample of feature collection
🆕 Planar interpolation Turf.js (planepoint) Bilinear interpolation on grid
🆕 Area-weighted interpolation Turf.js (tobler/Python) Transfer values between zones
🆕 GeoJSON validation Turf.js (boolean-valid) Check geometry validity
🆕 Coordinate projection Turf.js (projection) Convert lat/lng to flat plane
🆕 Coordinate flip Turf.js (flip) Swap lat/lng coordinates
🆕 Feature cloning Turf.js (clone) Deep copy GeoJSON feature

Data Pipeline & ETL

Example Libraries Description
🆕 GeoJSON processor Turf.js + Node.js + fs Batch process/transform GeoJSON files
🆕 OSM data extractor osmium + Turf.js (Node) Extract features within bounding box
🆕 Shapefile to PMTiles shpjoin + pmtiles + Node.js Convert Shapefiles to cloud-native tiles
🆕 CSV to GeoJSON mapper Turf.js + Papa Parse + Node.js Geocode CSV, output GeoJSON
🆕 Spatial ETL pipeline Node.js + Turf.js + GDAL (ogr2ogr) + Martin Import, transform, serve tiles
🆕 PostGIS tile generator PostGIS + Martin + TileServer GL Database to vector tiles
🆕 GeoParquet processor DuckDB + GeoParquet + Turf.js Query large geospatial datasets

Creative & Experimental

Example Libraries Description
🆕 Generative map art MapLibre + D3-geo + Turf.js + Canvas API Algorithmic map patterns
🆕 Sound map MapLibre + Tone.js + Turf.js Audio visualization on map
🆕 Maze generator on map MapLibre + Terra-draw + Turf.js Generate and solve mazes from streets
🆕 Timezone visualizer MapLibre + D3-geo + Turf.js Interactive timezone boundaries
🆕 Compass rose generator MapLibre + Turf.js (bearing, destination) + SVG Beautiful compass overlays
🆕 Historical map overlay MapLibre + Mapbox Compare + Old Maps API Compare historical vs modern maps
🆕 Minimap + main map sync Leaflet + Leaflet.MiniMap + Turf.js Synchronized dual-map views

Multi-Library Quick Reference

Combination Use Case
MapLibre + Turf.js + terra-draw Geometry editor with spatial analysis
Leaflet + Leaflet-Geoman + Turf.js Lightweight geo editor
MapLibre + Turf.js (voronoi + convex) Service area computation
MapLibre + Turf.js (hex-grid + collect) Hex binning and aggregation
MapLibre + Turf.js (buffer + intersect) Proximity and overlap analysis
MapLibre + OSRM + Turf.js Routing + spatial analysis
MapLibre + Turf.js (clusters-kmeans) Point clustering analysis
MapLibre + Turf.js (isobands + isolines) Elevation/temperature contours
MapLibre + PMTiles + Martin + PostGIS Self-hosted vector tile stack
MapLibre + Yjs + WebSocket Collaborative real-time editing
MapLibre + Service Worker + IndexedDB Offline-first map app
MapLibre + jsPDF + canvas Print/export workflow
MapLibre + Kepler.gl Exploratory data analysis
Node.js + Turf.js + GDAL + Martin Server-side ETL pipeline
PostGIS + Martin + TileServer GL Database to vector tiles

Missing OpenLayers Examples (Inspired by Leaflet)

The following OpenLayers examples were inspired by existing Leaflet examples. All 6 examples are now implemented in openlayers-implementation/.

🗺️ Map Controls & Syncing

  • ✅ Layer Toggle (layer-toggle.html) — A classic Leaflet L.control.layers style control to dynamically switch between base raster layers (e.g., Street, Satellite, Dark mode).
  • ✅ Sync Maps Comparison (sync-maps-comparison.html) — A split-screen slider (swipe control) to compare two different map layers side-by-side simultaneously.
  • ✅ Sync Maps (sync-maps.html) — Two separate map DOM elements placed side-by-side whose panning and zooming are perfectly synchronized.

🎬 Animation & Effects

  • ✅ Fly-To Animation (fly-to-animation.html) — Emulate Leaflet's beautiful map.flyTo() method, combining zooming and panning into a smooth, curved parabolic flight path.
  • ✅ Mouse Follow (mouse-follow.html) — An interactive marker or overlay that constantly updates its position to follow the user's cursor across the map.

💬 UI & Interaction

  • ✅ Popup & Tooltip (popup-tooltip.html) — Replicate Leaflet's rich popup (clickable) and tooltip (hoverable) behaviors bound directly to vector features.

Missing Leaflet Examples (Inspired by OpenLayers)

The following Leaflet examples are inspired by powerful features found in OpenLayers. These represent advanced GIS use-cases that would make excellent additions to the Leaflet collection!

🌍 Advanced UI & Controls

  • 🔴 Custom Controls (custom-controls.html) — Build external HTML UI elements (like floating toolbars) that programmatically drive the map view and interact with map features.
  • 🔴 Mini Map (minimap.html) — Create a small overview map in the corner that perfectly tracks the viewport bounds of the main map to help with orientation.

📍 Applied Spatial Analysis

  • 🟡 Geofence (geofence.html) — Implement an interactive geofencing system that detects and alerts when a movable marker crosses a predefined polygon boundary.
  • 🟡 Store Locator (store-locator.html) — Build a classic store locator layout featuring a scrolling sidebar list of locations that dynamically interact with markers on the map.

🌧️ Data & Overlays

  • 🟡 Weather Mapping (weather.html) — Overlay real-time weather or radar tile layers over the base map to visualize meteorological data.
  • 🟢 Image Overlay (image-overlay.html) — Perfectly stretch and lock a static image (like a historical map or floor plan) over a specific set of geographical coordinate bounds.
  • 🟢 Polygon Extrusion (3D) (polygon-extrusion.html) — While Leaflet is strictly 2D, this challenges you to use faux-3D plugins (like leaflet-polygon-fillPattern) or CSS tricks to simulate 3D building height data.

Missing OpenLayers Examples (Inspired by MapLibre)

The following OpenLayers examples are inspired by existing MapLibre GL JS examples. These are fantastic opportunities for contribution to achieve full feature parity across the repository!

🌍 Core Capabilities to Port

  • 🔴 3D Building (3d-building.html) — Extrude polygon features with height based on data properties to create a 3D city view.
  • 🔴 Marker Clustering (cluster-markers.html) — Use Supercluster or native source clustering to group dense point data dynamically based on zoom level.
  • 🔴 Geocoding Search (geocoding.html) — Add a search box that queries the Nominatim API and flies the camera to the selected location.

🎬 Animation & Interactivity

  • 🟡 Animate Line (animate-line.html) — Progressively draw a GeoJSON LineString to simulate movement or route progress over time.
  • 🟡 Hover Effect (hover-effect.html) — Dynamically update feature styling or highlight polygons instantly when the mouse cursor enters them.

📊 Data & Sources

  • 🟡 GeoJSON Upload (geojson-upload.html) — Allow users to drag and drop or upload local GeoJSON files and render them client-side.
  • 🟡 External Layer Control (external-layer-control.html) — Build a custom HTML UI outside the map canvas to toggle map layers on and off.
  • 🟡 Satellite Map (satellite-map.html) — Add a raster satellite imagery base layer (e.g., from Esri or Mapbox) underneath vector data.

📈 Advanced Data Viz

  • 🟢 Realtime Data (realtime-data.html) — Connect to a live GeoJSON stream (like the ISS tracker or live transit) and update marker positions using requestAnimationFrame.
  • 🟢 Time Slider (time-slider.html) — Filter temporal earthquake or historical data using a custom HTML range slider linked to map styling.

Missing MapLibre Examples (Inspired by OpenLayers) ✅

All examples below have been implemented in maplibre-implementation/.

🌍 Advanced UI & Controls

📍 Applied Spatial Analysis

  • ✅ Geofence (geofence.html) — Interactive geofence detection with Turf.js
  • ✅ Store Locator (store-locator.html) — Filterable store list with category search

🎮 Interactivity & Data

🗺️ Map Comparison & Syncing

💬 Popups & Geolocation

Contributing

  • Drawing toolbar options : Toolbar options
  • Drawing tools events : Drawing events
  • Drop markers on interval : Interval marker drops
  • Drop multiple markers animation : Batch marker drops
  • Dynamic legend and layer controls : Dynamic controls
  • Fill Address Form with Autocomplete : Form-filling with autocomplete
  • Forecasted Air Quality : Forecasted AQ data
  • Geofence : Geofence detection
  • Get current weather at a location : Current conditions REST API
  • Get drawn shapes from drawing manager : Export drawn shapes
  • Get map camera details : Camera state access
  • HTML marker pulse animation : CSS pulse effect
  • HTML marker with custom SVG template : SVG template markers
  • Heat map data viz : Heat map for density visualization
  • Heat map layer options : All heat map options
  • Introduction to Spatial Math : Built-in spatial math functions
  • Limit Map to Two Finger Panning : Mobile-friendly panning
  • Limit map view with maxBounds : Restrict map view
  • Load POIs as the map moves : Dynamic POI loading
  • Load data into drawing manager : Programmatic loading
  • Load large shapefiles with Web Worker : Worker-based shapefile loading
  • Load shapefiles onto the map : Basic shapefile loading
  • Map user interaction options : User interaction options
  • Merge two polygons together : Polygon union
  • Morph shape animation : Geometry morphing
  • Multiple routes by mode of travel : Multi-modal route tutorial
  • OGC map layer example : OGC WMS/WMTS overlay
  • Page through POI results : Paginated POI results
  • Polygon extrusion layer options : Extrusion options
  • Popup with DOM element content : DOM-element popup content
  • Pulse animation with bubble layer : Bubble layer pulse
  • Read and write Well Known Text : WKT as GeoJSON
  • Search for POIs along route : POIs along a route
  • Search for points of interest : POI search tutorial
  • Select data in drawn polygon area : Area selection
  • Show weather overlays on a map : Radar + infrared overlays
  • Simple Cardinal Spline : Simple cardinal spline
  • Simple HTML marker animation : Basic marker movement
  • Simple MultiPolygon : Render a MultiPolygon
  • Simple REST Geocoding Request : Basic geocoding
  • Simple Store Locator : Store locator tutorial
  • Simple WFS example : Web Feature Service query
  • Simple heat map layer : Basic heat map
  • Snap drawn line to roads : Road snapping
  • Snap points to logical route path : Snap to road network
  • Spyglass module options : Spyglass options
  • Swipe between two maps : Side-by-side map comparison
  • Swipe map with fullscreen support : Swipe with fullscreen
  • Update layer based on map style : Style-driven layer updates
  • WFS service explorer : WFS explorer tool
  • Weighted heat map layer : Property-weighted intensity

Contributing

Contributions welcome! Feel free to open an issue or submit a pull request. When adding examples, aim to balance coverage across all three libraries within each category. Look for markers to find gaps you can fill.

License

MIT

About

The ultimate playbook for building stunning, interactive 2D-focused geospatial applications.

naranyala.github.io/awesome-maps-examples/

Topics

awesome maps geospatial gis openlayers leafletjs maplibre

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages