awesome-maps-examples
The ultimate playbook for building stunning, interactive 2D-focused geospatial applications.
https://github.com/naranyala/awesome-maps-examples
Last synced: about 17 hours ago
JSON representation
-
Markers, Icons & Clusters
-
☁️ Openlayers Examples
- Animate a marker - Marker position animation
- Animate symbol to follow the mouse - Mouse-following symbol
- Attach a popup to a marker instance - Popup bound to marker
- Center the map on a clicked symbol - Click-to-center
- Create a draggable Marker - Draggable marker
- Create and style clusters - Marker clustering
- Display a remote SVG symbol - SVG as symbol layer
- Display HTML clusters with custom properties - Custom cluster popups
- Filter layer symbols using global state - Global state filtering
- Filter symbols by text input - Text-based filtering
- Filter symbols by toggling a list - List-based filtering
- Generate and add a missing icon to the map - Dynamic icon generation
-
-
Missing Leaflet Examples (Inspired by OpenLayers)
-
💬 UI & Interaction
- OpenLayers - cases that would make excellent additions to the Leaflet collection!
-
-
Missing OpenLayers Examples (Inspired by Leaflet)
-
Multi-Library Quick Reference
- Leaflet examples - implementation/`.
-
-
Plugins Reference
-
Leaflet
- Leaflet.markercluster - Cluster nearby markers
- Leaflet.awesome-markers - Font Awesome / Bootstrap icons
- Leaflet.fullscreen - Fullscreen control
- Leaflet.MiniMap - Overview minimap
- Leaflet.Routing.Machine - Route planning
- Leaflet-Geoman - Draw & edit geometries
- Leaflet.Marker.SlideTo - Animate marker movement
- leaflet-rotation - Map rotation
- Autocomplete - Search with suggestions
- RBush - Spatial index for performance
-
MapLibre GL JS
- mapbox-gl-draw - Draw & edit geometries
- terra-draw - Multi-shape drawing
- maplibre-gl-rtl-text - Right-to-left text
-
OpenLayers
- OpenLayers Drawing Tools - Draw & edit geometries
- OpenLayers Spatial IO - Import KML, CSV, GeoJSON
- OpenLayers Animation - Marker & data animation
- OpenLayers Control - Core SDK with layers, controls
- OpenLayers REST API - Geocoding, routing, search, traffic
- Flowmap.gl - Flow visualization
-
-
Popups & Tooltips
-
☁️ Openlayers Examples
- Accessible popups - Keyboard-accessible popups
- Accessible shape selection - Keyboard selection via hidden popups
- Add a popup with an image - Image in popup
- All popup options - Full popup options
- Auto open popup on hover - Auto-hover popup
- Customize a popup - Custom popup styling
- Popup events - Popup event handling
- Popup templates - Popup templates from properties
- Popup with DOM element content - DOM-element popup content
- Popup with Media Content - Media content popups
- Popups on Shapes - Popups on any shape
- Popups with leader lines - Leader line popups
- Reuse a popup template - Reusable popup template
- Show popup on hover - Hover-triggered popup
- Simple popup - Basic popup
- Display a popup - Basic popup
- Display a popup on click - Click-triggered popup
- Display a popup on hover - Hover-triggered popup
- Show polygon information on click - Feature info popup
- Popup with custom HTML layout - Rich HTML popup with tabs/media
-
-
Routing & Directions
-
☁️ Openlayers Examples
- Add Arrow along a Path - Arrow icons along a line
- Alternate routes with deviation constraints - Alternative routes with constraints
- Animate along a path - Symbol along path with controls
- Animate along a route path - Timestamp-aware route animation
- Animate marker along path - HTML marker path animation
- Calculate a Simple Isochrone - Drive time polygon
- Calculate a simple route - Basic route calculation
- Calculate concentric isochrones - Concentric isochrone rings
- Calculate distance - Point-to-point distance
- Calculate spaced positions along route - Evenly spaced route positions
- Car vs truck route comparison - Multi-modal routing
- Create a measuring tool - Distance/area measurement
- Draggable route lines - Interactive route editing
- Filter Data Along Route - Buffer-based route filtering
- Get directions - Route directions
- Get route range - Isochrone polygon
- Multiple routes by mode of travel - Multi-modal route tutorial
- Route along GeoJSON network - Shortest path on GeoJSON network
- Route Waypoint Optimization - Waypoint optimization
- Search along route - Route-based POI search
- Search for POIs along route - POIs along a route
- Simple REST Directions - Basic directions between two points
- Snap points to logical route path - Snap to road network
- Isochrone with Turf.js - Drive time polygon with Turf.js
- Multi-modal transit routing - Public transit routing via ORS
- Animate a point along a route - Turf.js route animation
- Hash routing - URL hash sync
- Measure distances - Distance measurement
- Turn-by-turn directions - OSRM/Mapbox Directions API
- Isochrone visualization - Drive time polygons with Mapbox API
- Multi-modal routing comparison - Car vs bike vs foot routing
-
-
Search & Geocoding
-
☁️ Openlayers Examples
- Address search - Forward geocoding
- Autocomplete - Address autocomplete
- Autocomplete search - Search suggestions
- Fill Address Form with Autocomplete - Form-filling with autocomplete
- Fuzzy search - Fuzzy text search
- Interactive Search Quickstart - Interactive search tutorial
- Load POIs as the map moves - Dynamic POI loading
- Nearby search - POI nearby search
- Page through POI results - Paginated POI results
- Search category - Category-based search
- Search for boundaries - Administrative boundary search
- Search for points of interest - POI search tutorial
- Simple REST Geocoding Request - Basic geocoding
- Voronoi diagram analysis - Voronoi from point set
- Nominatim geocoding - OpenStreetMap geocoding
- Pelias geocoding - Open-source geocoder
- Geocode with Nominatim - OpenStreetMap geocoding
- Get coordinates of the mouse pointer - Mouse coordinate tracking
- Get features under the mouse pointer - Feature query on hover
-
-
Spatial Analysis & Math
-
☁️ Openlayers Examples
- Add TopoJSON data to the map - TopoJSON import
- Census block group analysis - Census data spatial join
- Convex hull - Convex hull computation
- Extract photo location - EXIF GPS extraction
- Geofence - Geofence detection
- Introduction to Spatial Math - Built-in spatial math functions
- Point in circle - Circle containment
- Point in polygon - Polygon containment
- Point in rectangle - Rectangle containment
- Simple WFS example - Web Feature Service query
- Spatial data gallery - Spatial data file types
- Visualize Excel data - Excel file visualization
- WFS service explorer - WFS explorer tool
-
-
Traffic & Navigation
-
☁️ Openlayers Examples
- Animated traffic flow - Flowing dashed traffic lines
- Display traffic tiles - Traffic overlay
- Get traffic incidents - Incident markers
- Show traffic along route - Traffic info along route
- Traffic control options - Traffic toggle options
- Traffic controls - Traffic toggle + legend
- Traffic flow - Live traffic data
- Traffic Overlay Options - Traffic overlay options
- TomTom traffic tiles - Real-time traffic tile overlay
- HERE traffic flow layer - Traffic flow visualization
-
-
Uncategorized
-
Uncategorized
- 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.
-
-
Weather & Sensors
-
☁️ Openlayers Examples
- Current Air Quality - Air Quality data via REST API
- Display weather layers - Weather overlay
- Forecasted Air Quality - Forecasted AQ data
- Get current weather at a location - Current conditions REST API
- Get weather along a route - Route weather data
- Historical Weather - Historical weather REST API
- Show weather overlays on a map - Radar + infrared overlays
- Tropical Storm Locations - Tropical storm tracking
- OpenWeatherMap tile layer - Weather radar tile overlay
- Device orientation sensor - Compass heading from device sensors
-
Programming Languages
Categories
Geometry, Drawing & Data
60
Layers, Tiles & Sources
43
Markers, Icons & Clusters
39
Routing & Directions
31
Getting Started & Basic Maps
29
Controls & UI
27
Popups & Tooltips
20
Search & Geocoding
19
Plugins Reference
19
Spatial Analysis & Math
13
Weather & Sensors
10
Animation & Camera
10
Traffic & Navigation
10
Data Visualization
4
Uncategorized
3
Missing Leaflet Examples (Inspired by OpenLayers)
1
Missing OpenLayers Examples (Inspired by Leaflet)
1
Sub Categories
Keywords
drawing
2
javascript
2
leaflet
2
leaflet-plugins
2
mapbox-gl
1
mapbox-gl-js
1
enable-drawing
1
geojson
1
geoman
1
geospatial-data
1
gis
1
google-maps
1
leaflet-draw
1
leaflet-geoman
1
leaflet-plugin
1
leaflet-pm
1
mapbox
1
multipolygon
1
osm
1
polygon
1
polyline
1
toolbar
1
vector
1
algorithm
1
computational-geometry
1
r-tree
1
spatial-index
1
clustering
1
map
1
mapping
1