This is a demonstration application showcasing a modified version of the Leaflet Heat library. The original library has been enhanced with additional features including smooth drag operations and level of detail (LOD) rendering. These modifications were specifically implemented to handle large datasets more efficiently through various performance optimizations such as a quadtree-based LOD system and canvas optimizations.
This project serves as a proof of concept for the enhanced Leaflet Heat library capabilities, demonstrating how the modified version can handle performance-critical scenarios better than the original implementation.
Note: This demo uses synthetic data generated for demonstration purposes only. The data points do not represent real-world information and are created solely to showcase the library's capabilities and performance optimizations.
|
|
The GIFs above demonstrate the improvement in drag performance. The "Before" GIF shows the original implementation with noticeable lag and visual artifacts during map dragging, while the "After" GIF showcases the enhanced version with smooth, responsive dragging and consistent visual quality during map navigation.
First, install the dependencies:
yarn install
Then, run the development server:
yarn dev
Open http://localhost:3000 with your browser to see the result.
This project includes a modified version of the Leaflet heat layer that implements Level of Detail (LOD) for improved performance with large datasets. The main optimizations include:
-
Uses different resolution quadtrees based on zoom levels:
-
Ultra Low Resolution: zoom ≤ 5
-
Low Resolution: 5 < zoom ≤ 8
-
Mid Resolution: 8 < zoom ≤ 12
-
Mid-High Resolution: 12 < zoom ≤ 14
-
High Resolution: zoom > 14
-
Renders heatmap data beyond the visible viewport
-
Provides smoother user experience when panning the map
-
Reduces visual artifacts during map navigation
-
Utilizes quadtree spatial indexing for faster point queries
-
Only processes points within the current map bounds
-
Implements early return for out-of-view regions
If you need to modify the heatmap functionality, follow these steps:
-
Make your changes in
src/lib/heatmap-source/heatmap-source.js -
Run the minification command:
yarn minify-heatmap
- This will create/update
leaflet-heat.jswhich is the actual library used by the application
These optimizations significantly improve performance when dealing with large datasets while maintaining visual quality appropriate for each zoom level.
The library supports extensive customization of the LOD (Level of Detail) system and heatmap appearance. Users can modify:
-
LOD zoom level breakpoints
-
Intensity levels for each LOD
-
Quadtree cell sizes
-
Visual parameters (radius, blur, gradient, opacity)
Please refer to the library documentation for detailed configuration options.
The application implements a dedicated Web Worker for efficient point clustering using geohash-based spatial indexing. Key features include:
-
Asynchronous Processing: Handles point clustering in a separate thread to maintain UI responsiveness
-
Geohash-based Clustering: Groups nearby points using geohash precision levels
-
Multi-level LOD Processing: Creates different detail levels simultaneously:
-
Ultra-low: Highest clustering for zoom levels 1-5
-
Mid-low: Medium clustering for zoom levels 6-10
-
Mid: Lower clustering for zoom levels 11-14
-
High: No clustering for zoom levels 15+
-
Intensity Weighting: Maintains intensity information through weighted averages during clustering
-
Memory Efficient: Processes points in batches and releases memory after clustering
This worker-based approach ensures smooth map interaction even with large datasets by offloading the computational overhead of point clustering.