awesome-maps-examples

The ultimate playbook for building stunning, interactive 2D-focused geospatial applications.
https://github.com/naranyala/awesome-maps-examples

Last synced: about 16 hours ago
JSON representation

Animation & Camera
- ☁️ Openlayers Examples
  - Animate a GPS trace - Smooth GPS trace animation
  - Animation easings - Built-in easing functions
  - Get map camera details - Camera state access
  - Fly to with easing - Animated flyTo with custom easing options
  - Customize camera animations - Custom easing curves
  - Disable map rotation - Lock bearing
  - Fly to a location - Animated fly-to
  - Fly to a location based on scroll position - Scroll-driven fly-to
  - Set pitch and bearing - Tilt and rotate
  - Slowly fly to a location - Slow fly-to
Controls & UI
- ☁️ Openlayers Examples
  - Bring data into view control - Auto-fit to data bounds
  - Category legend options - Legend type options
  - Create a legend control - Custom legend
  - Create HTML legend - HTML-based legend
  - Custom navigation controls - External nav controls
  - Custom styled legend - CSS-styled legend
  - Fullscreen control options - Fullscreen options
  - Geolocation control - Custom geolocation UI
  - Geolocation control options - Geolocation options
  - Gradient legend options - Gradient legend type
  - Legend control options - Legend control options
  - Map navigation control options - Navigation options
  - Map style picker - Style picker control
  - Map user interaction options - User interaction options
  - Mini overview map - Overview minimap
  - Mini overview map options - Overview minimap options
  - Simple scale bar control - Custom scale bar
  - Spyglass map visualization - Spyglass data viewer
  - Spyglass module options - Spyglass options
  - Swipe map with fullscreen support - Swipe with fullscreen
  - Custom legend control - HTML legend overlay with data classes
  - Swipe comparison control - Side-by-side map swipe
  - Change building color based on zoom level - Zoom-driven styling
  - Display map navigation controls - Standard zoom/rotate controls
  - Level of Detail Control - LOD management
  - Navigate the map with game-like controls - WASD navigation
  - Toggle interactions - Enable/disable controls
Data Visualization
- ☁️ Openlayers Examples
  - Bubble layer data viz - Bubble layer for point magnitude
  - Choropleth map - Thematic area shading
  - Leaflet.heat for density maps - Heatmap plugin for point density
  - Visualize population density - Choropleth visualization
Geometry, Drawing & Data
- ☁️ Openlayers Examples
  - Add a GeoJSON LineString - Basic line rendering
  - Add a GeoJSON polygon - Basic polygon fill
  - Add drawing toolbar to map - Basic drawing toolbar
  - Animate a line - Line position animation
  - Animate a snakeline - Snake-like line drawing
  - Calculate a convex hull - Convex hull from array of shapes
  - Cardinal Spline Options - Cardinal spline controls
  - Change drawing rendering style - Custom draw styles
  - Create isobands from isolines - Isobands from isoline data
  - Curved lines - Three ways to create curved lines
  - Data-driven line layer styling - Property-based styling
  - Data-driven polygon extrusion styling - Extrusion styling
  - DataSource and Shape events - DataSource and Shape events
  - Display isoline data - Contour lines with data-driven styling
  - Drag and drop GeoJSON file - GeoJSON drag & drop
  - Drag and drop shapefiles - Shapefile drag & drop
  - Draw gridded polygon - Grid pattern in polygon
  - Drawing manager options - Manager options
  - Drawing toolbar options - Toolbar options
  - Drawing tools events - Drawing events
  - GeoJSON file optimizer - Optimize GeoJSON files
  - Geospatially Accurate Circle - Geospatially accurate circle
  - Get drawn shapes from drawing manager - Export drawn shapes
  - Large GeoJSON files - Performance with large data
  - Line layer options - All line options
  - Line with Stroke Gradient - Stroke gradient on a line
  - 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
  - Merge two polygons together - Polygon union
  - Morph shape animation - Geometry morphing
  - Moving dashed line - Flowing dash animation
  - Polygon extrusion layer options - Extrusion options
  - Polygon Fill Pattern - Pattern fill for polygons
  - Polygon Hover Style - Polygon hover effect
  - Polygon layer options - Polygon options
  - Polygon masks - Polygon masks for MultiPolygon
  - Read and write Well Known Text - WKT as GeoJSON
  - Select data in drawn polygon area - Area selection
  - Simple Cardinal Spline - Simple cardinal spline
  - Simple MultiPolygon - Render a MultiPolygon
  - Simplify polygon - Polygon simplification
  - Snap drawn line to roads - Road snapping
  - Use a snapping grid - Grid snapping
  - Add a GeoJSON line - GeoJSON LineString
  - Add a GeoJSON polygon - GeoJSON polygon fill
  - Add a pattern to a polygon - Repeating fill pattern
  - Add Contour Lines - Contour lines from raster-dem
  - Add multiple geometries from one GeoJSON source - Multi-geometry source
  - Animate a line - Line drawing animation
  - Create a gradient line using an expression - Gradient line styling
  - Create a gradient line with dasharray using an expression - Gradient dashed line
  - Display line that crosses 180th meridian - Antimeridian handling
  - Draw a Circle - Circle drawing
  - Draw geometries with terra-draw - Geometry drawing with terra-draw
  - Fit to the bounds of a LineString - Fit to line geometry
  - Restrict map panning to an area - Bounds constraint
  - Style lines with a data-driven property - Data-driven line styling
  - Update GeoJSON polygons - Dynamic polygon updates
  - View local GeoJSON - Load local GeoJSON file
Getting Started & Basic Maps
- ☁️ Openlayers Examples
  - Add a Context Menu to the Map - Right-click context menu
  - Detect if browser is supported - Browser support detection
  - Display map with different language - Language options
  - Display map with different projections - Map projections
  - Enable map events - Event handling
  - Lazy Load the Map - Delay SDK loading
  - Limit Map to Two Finger Panning - Mobile-friendly panning
  - Limit map view with maxBounds - Restrict map view
  - Multiple Maps - Multiple maps on one page
  - Show a user's position - Basic geolocation
  - Simple Store Locator - Store locator tutorial
  - Swipe between two maps - Side-by-side map comparison
  - Synchronize map views - Synced map views
  - Add a video - Video overlay on satellite
  - Add support for right-to-left scripts - RTL text rendering
  - Change a map's language - Dynamic language switch
  - Change the default position for attribution - Attribution positioning
  - Check if WebGL is supported - Feature detection
  - Cooperative gestures - Multi-finger scroll zoom
  - Disable scroll zoom - Disable wheel zoom
  - Display a map - Basic map initialization
  - Display a non-interactive map - Static, non-interactive map
  - Display and style rich text labels - Rich text formatting
  - Fit a map to a bounding box - Fit to bounds
  - Locate the user - Geolocation
  - Render world copies - Infinite horizontal wrap
  - Sync movement of multiple maps - Multi-map sync
  - Update a feature in realtime - Realtime feature updates
  - Variable label placement - Smart label positioning
Layers, Tiles & Sources
- ☁️ Openlayers Examples
  - Add a raster tile source - Raster tiles
  - Add a vector tile source - Vector tiles
  - Add a WMS source - Web Map Service
  - Add an image layer - Basic image overlay
  - Add Bing Maps tile layer - Bing Maps tiles
  - Animated tile layer - Tile layer sequence
  - Consistent zoomable heat map - Zoom-consistent radius
  - Create a layer control - Layer toggle control
  - Data-driven bubble layer styling - Magnitude-based styling
  - Dynamic legend and layer controls - Dynamic controls
  - Export Map as Image - Export map canvas as image
  - Heat map layer options - All heat map options
  - OGC map layer example - OGC WMS/WMTS overlay
  - PMTiles Buildings - PMTiles with Overture buildings
  - PMTiles layer - PMTiles single-file
  - PMTiles Places - PMTiles with Overture places
  - PMTiles Transportation - PMTiles with Overture transport
  - Pulse animation with bubble layer - Bubble layer pulse
  - Simple heat map layer - Basic heat map
  - Tile Layer Options - Tile layer options
  - Update layer based on map style - Style-driven layer updates
  - Video layer - Video on satellite basemap
  - Weighted heat map layer - Property-weighted intensity
  - OpenLayers Leaflet options - OpenLayers tiles in Leaflet
  - Render OpenLayers in Leaflet - OpenLayers raster in Leaflet
  - PMTiles protocol in Leaflet - PMTiles single-file archive support
  - Add a canvas source - HTML canvas as source
  - Add a COG raster source - Cloud Optimized GeoTIFF
  - Add a custom style layer - Custom WebGL rendering
  - Add a hillshade layer - Hillshade from DEM
  - Add a new layer below labels - Layer ordering
  - Add a raster tile source - Third-party raster tiles
  - Add a stretchable image to the map - 9-slice stretchable image
  - Add a vector tile source - Vector tile source
  - Add a WMS source - Web Map Service
  - Animate a series of images - Image sequence animation
  - Change a layer's color with buttons - Button-driven color change
  - Create a heatmap layer - Heatmap visualization
  - Display a map with MLT - MapLibre Tiles format
  - Display Map Performance Metrics - FPS and tile stats
  - Filter within a Layer - Layer-based filtering
  - PMTiles source and protocol - PMTiles single-file archives
  - Use a fallback image - Error handling for tiles
Markers, Icons & Clusters
- ☁️ Openlayers Examples
  - Add a symbol layer - Basic symbol layer
  - All built-in icon templates as HTML markers - Icon template gallery
  - All built-in icon templates as symbols - Built-in icon templates
  - Animate to new position of marker - Marker position transition
  - Bouncing marker animation - CSS bouncing marker
  - Cluster aggregate average values - Cluster aggregation
  - Cluster aggregates - Custom cluster properties
  - Clustered pie chart HTML markers - Pie chart clusters
  - CSS styled HTML marker - CSS-based markers
  - Data-driven symbol icons - Multiple custom icons
  - Data-driven symbol layer styling - Property-based styling
  - Draggable HTML marker - Draggable markers
  - Draggable Symbols - Draggable symbol layer
  - Drop markers on interval - Interval marker drops
  - Drop multiple markers animation - Batch marker drops
  - Expanding Spider Clusters - Spider cluster layout
  - HTML marker events - Marker event handling
  - HTML marker pulse animation - CSS pulse effect
  - HTML marker with custom SVG template - SVG template markers
  - Simple HTML Marker - Basic HTML marker
  - Simple HTML marker animation - Basic marker movement
  - Symbol layer options - All symbol options
  - Add a default marker - Basic marker
  - Add a generated icon to the map - Runtime-generated icon
  - Add an animated icon to the map - Canvas API animated icon
  - Add an icon to the map - External URL icon
  - Add custom icons with Markers - Custom marker icons

Programming Languages

JavaScript 6 HTML 2

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

awesome-maps-examples

Animation & Camera

☁️ Openlayers Examples

Controls & UI

☁️ Openlayers Examples

Data Visualization

☁️ Openlayers Examples

Geometry, Drawing & Data

☁️ Openlayers Examples

Getting Started & Basic Maps

☁️ Openlayers Examples

Layers, Tiles & Sources

☁️ Openlayers Examples

Markers, Icons & Clusters

☁️ Openlayers Examples