kevinsivic/dawarich
1
0
Fork 0
mirror of https://github.com/Freika/dawarich.git synced 2026-01-11 09:41:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix null type, update heatmap styling

Browse source
This commit is contained in:
Robin Tuszik 2025-12-15 00:04:27 +01:00
parent 8a08d1b5e2
commit f7f80e3524
1 changed files with 22 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
app/javascript/maps_maplibre/layers/heatmap_layer.js
View file

@ -3,13 +3,10 @@ import { BaseLayer } from './base_layer'
/** /**
* Heatmap layer showing point density * Heatmap layer showing point density
* Uses MapLibre's native heatmap for performance * Uses MapLibre's native heatmap for performance
* Fixed radius: 20 pixels
*/ */
export class HeatmapLayer extends BaseLayer { export class HeatmapLayer extends BaseLayer {
constructor(map, options = {}) { constructor(map, options = {}) {
super(map, { id: 'heatmap', ...options }) super(map, { id: 'heatmap', ...options })
this.radius = 20 // Fixed radius
this.intensity = 1 // Fixed intensity
this.opacity = options.opacity || 0.6 this.opacity = options.opacity || 0.6
} }
@ -30,47 +27,52 @@ export class HeatmapLayer extends BaseLayer {
type: 'heatmap', type: 'heatmap',
source: this.sourceId, source: this.sourceId,
paint: { paint: {
// Fixed weight for each point // Fixed weight
'heatmap-weight': 1, 'heatmap-weight': 1,
// Increase intensity as zoom increases // low intensity to view major clustors
'heatmap-intensity': [ 'heatmap-intensity': [
'interpolate', 'interpolate',
['linear'], ['linear'],
['zoom'], ['zoom'],
0, this.intensity, 0, 0.01,
9, this.intensity * 3 10, 0.1,
15, 0.3
], ],
// Color ramp from blue to red // Color ramp
'heatmap-color': [ 'heatmap-color': [
'interpolate', 'interpolate',
['linear'], ['linear'],
['heatmap-density'], ['heatmap-density'],
0, 'rgba(33,102,172,0)', 0, 'rgba(0,0,0,0)',
0.2, 'rgb(103,169,207)', 0.6, 'rgba(0,0,0,0)',
0.4, 'rgb(209,229,240)', 0.65, 'rgba(33,102,172,0.4)',
0.6, 'rgb(253,219,199)', 0.7, 'rgb(103,169,207)',
0.8, 'rgb(239,138,98)', 0.8, 'rgb(209,229,240)',
0.9, 'rgb(253,219,199)',
0.95, 'rgb(239,138,98)',
1, 'rgb(178,24,43)' 1, 'rgb(178,24,43)'
], ],
// Fixed radius adjusted by zoom level // Radius in pixels, exponential growth
'heatmap-radius': [ 'heatmap-radius': [
'interpolate', 'interpolate',
['linear'], ['exponential', 2],
['zoom'], ['zoom'],
0, this.radius, 10, 3,
9, this.radius * 3 15, 5,
20, 160
], ],
// Transition from heatmap to circle layer by zoom level // Visible when zoomed in, fades when zoomed out
'heatmap-opacity': [ 'heatmap-opacity': [
'interpolate', 'interpolate',
['linear'], ['linear'],
['zoom'], ['zoom'],
7, this.opacity, 0, 0.3,
9, 0 10, this.opacity,
15, this.opacity
] ]
} }
} }