Let's be honest: when a dashboard with a map starts lagging at 10,000 points, it's a failure. Standard markers can't handle it, the browser freezes, users leave. We've faced this many times. Our approach: use Mapbox GL JS for a fast base map and Deck.gl for rendering large datasets via WebGL. The result is 60 FPS even on mobile devices. This architecture handles hundreds of thousands of points without performance loss. We have experience with over 20 geovisualization projects, including logistics and retail dashboards. Typical project budget ranges from $3,000 to $10,000 depending on complexity. Get a consultation for your project.
Problems We Solve
- Lag with many markers. Ordinary HTML markers or Leaflet can't handle >10,000 points — browser freezes. Deck.gl draws them as geometry on the GPU, achieving 60 FPS for 1M points.
- Customization complexity. Businesses need more than just dots: color coding by status, activity heatmaps, route arcs. Mapbox GL + Deck.gl provide flexible layers with customizable attributes via WebGL shaders.
- React integration. We use react-map-gl and @deck.gl/react — everything works in a component model, no hacks.
Why Deck.gl is Better Than Leaflet for Large Data
Leaflet is great for simple maps with 100–500 markers. But as data grows, lag begins. Deck.gl uses WebGL instead of DOM: it renders geometry on the GPU. The performance difference is noticeable at 10,000 points — Leaflet delivers ~15 FPS, Deck.gl stays at 60 FPS. Additionally, Deck.gl has built-in aggregation layers (HeatmapLayer, ScreenGridLayer) that automatically thin data. If your project involves >5,000 points, choose Deck.gl.
According to official docs, WebGL enables rendering on the GPU, significantly reducing CPU load. This is implemented via luma.gl library. Deck.gl supports up to 1 million points at 60 FPS.
How to Accelerate Rendering of Hundreds of Thousands of Points
The key technique is aggregation. Instead of drawing every point, we split the screen into a grid and count the number of hits per cell. Deck.gl does this on the GPU via GPUGridLayer or HeatmapLayer. Also important is the correct radiusPixels — too small creates noise, too large blurs details. We tune parameters for specific data. For choropleth maps, we use GeoJsonLayer with filled polygons and precomputed color scales.
How We Do It
Our stack: React 18, Next.js 14, TypeScript, Mapbox GL JS (v2/v3), Deck.gl (v8/v9), Tailwind. Backend: Node.js (Nest.js) or Laravel, serving GeoJSON via API. Data stored in PostGIS or MongoDB. Optimization via CDN and tile caching.
Example: Delivery Dashboard with Heatmap
Once a client came with a task: display 50,000 orders in real time on a map, showing delivery density. We did:
- Mapbox GL for the base layer (light theme, custom styles).
- Deck.gl HeatmapLayer for order density.
- ScatterplotLayer for points colored by status (delivered, in transit, canceled).
- ArcLayer for routes between warehouse and delivery points.
Result: the map runs smoothly on an iPad. Development time: 2 weeks, cost: ~$4,500.
Comparison of Visualization Approaches
| Stack | Performance (1M points) | Customization | Complexity |
|---|---|---|---|
| Mapbox GL JS + Deck.gl | 60 FPS | High (layers, shaders) | Medium |
| Leaflet + MarkerCluster | 10 FPS | Medium | Low |
| D3.js + SVG | 5 FPS | High (manual WebGL) | High |
| Google Maps API | 30 FPS | Low | Medium |
We recommend Mapbox GL + Deck.gl for projects where speed and flexibility matter. Leaflet suits simple prototypes; D3 for static charts.
Our Process
- Analysis. Examine data: format, volume, update frequency. Determine required layers (points, heatmap, arcs, choropleth).
- Prototype. Build an MVP on test data in 2–3 days. Present and adjust.
- Development. Integrate into your React app. Configure interactions: click on point → popup, filters, animations.
- Performance testing. Test on real data (10,000–1,000,000 points). Optimize: reduce layer count, add LOD.
- Deployment. Package into Docker, set up CDN for tiles. Hand over code and documentation.
Detailed Stage Checklist
- Requirements gathering and data analysis
- Architecture selection (layers, stack)
- Prototyping on synthetic data
- React integration and interaction setup
- Performance optimization (LOD, aggregation)
- Deployment and documentation handover
- Post-release support (3 months)
What's Included
- Source code of map components (React/TypeScript)
- API integration and token setup documentation
- Instructions for adding new layers
- 3-month bug fix warranty
- Post-release support: we answer questions, help with library updates
Estimated Timelines and Costs
| Stage | Duration | Cost Range |
|---|---|---|
| Basic map with markers and popups | 3–5 days | $1,000–$2,000 |
| Heatmap / Scatterplot | 1 week | $2,000–$3,000 |
| Arc layers (routes) | +3–5 days | $1,000–$2,000 |
| Choropleth (regions) | +3–5 days | $1,000–$2,000 |
| Performance optimization | +2–3 days | $500–$1,000 |
| Full cycle (entire dashboard) | 2–4 weeks | $3,000–$10,000 |
Cost is calculated individually after analyzing data and requirements. We'll assess your project within 1 day.
Typical Mistakes
- Ignoring projection. If data is in EPSG:4326 but the map uses Web Mercator, coordinates shift. Always convert to WGS84.
- Too many layers. Each layer is a WebGL pass. Optimal is no more than 5–7 active layers. Disable invisible layers.
- Wrong radiusPixels in HeatmapLayer. Too small gives noise, too large blurs. Tune for data density.
- Lack of error handling. Broken GeoJSON crashes the map. Validate data on the backend.
Contact us for a consultation — we'll choose the best solution for your project. Request a preliminary data analysis to get accurate timelines and cost.