Commit dde0b62e authored by Tim Sollbach's avatar Tim Sollbach Committed by Tim

fix: handle click on cluster correctly

parent 54c037bf
Pipeline #128581010 passed with stages
in 5 minutes and 50 seconds
......@@ -8,10 +8,12 @@ import {
DEFAULT_ZOOM,
GERMANY_LAT_LONG,
MAPBOX_TOKEN,
THREAT_SOURCE_ID,
PREDICTION_SOURCE_ID,
CAPACITY_SOURCE_ID,
INFECTION_SOURCE_ID,
CAPACITY_CLUSTER_ID,
INFECTION_CLUSTER_ID,
getCapacitySettings,
getPredictionSettings,
getInfectionSettings,
} from './settings'
import { getElementWidth, getElementHeight, isGeoJSONSource } from './utils'
......@@ -31,7 +33,8 @@ export const Map: FC = () => {
capacityType: CapacityType.lc,
predictionDay: 0,
})
const sourceRef = useRef<MapType>(null)
const capacityRef = useRef<MapType>(null)
const infectionsRef = useRef<MapType>(null)
const containerRef = useRef(null)
const [viewport, setViewport] = useState<InteractiveMapProps>({
width: '100%',
......@@ -61,9 +64,11 @@ export const Map: FC = () => {
if (event.features && event.features.length) {
const feature = event.features[0]
const clusterId = feature.properties.cluster_id
const sourceRef = feature.layer.id === CAPACITY_CLUSTER_ID ? capacityRef : infectionsRef
const sourceId = feature.layer.id === CAPACITY_CLUSTER_ID ? CAPACITY_SOURCE_ID : INFECTION_SOURCE_ID
if (sourceRef.current) {
const mapboxSource = sourceRef.current.getSource(THREAT_SOURCE_ID)
const mapboxSource = sourceRef.current.getSource(sourceId)
if (isGeoJSONSource(mapboxSource)) {
mapboxSource.getClusterExpansionZoom(clusterId, (err: any, zoom: number) => {
......@@ -87,7 +92,7 @@ export const Map: FC = () => {
)
const capacitySettings = getCapacitySettings(controlState.capacityType)
const predictionSettings = getPredictionSettings(controlState.predictionDay)
const infectionSettings = getInfectionSettings(controlState.predictionDay)
return (
<div ref={containerRef} className="mapContainer">
......@@ -95,19 +100,19 @@ export const Map: FC = () => {
{...viewport}
onViewportChange={setViewport}
mapboxApiAccessToken={MAPBOX_TOKEN}
interactiveLayerIds={[capacitySettings.clusterLayer.id!, predictionSettings.clusterLayer.id!]}
interactiveLayerIds={[CAPACITY_CLUSTER_ID, INFECTION_CLUSTER_ID!]}
onClick={onClick}
>
{controlState.showCapacity && (
<Source
id={THREAT_SOURCE_ID}
id={CAPACITY_SOURCE_ID}
type="geojson"
data={diviData as FeatureCollection}
cluster={true}
clusterMaxZoom={12}
clusterRadius={40}
clusterProperties={capacitySettings.clusterProperties}
ref={sourceRef as any}
ref={capacityRef as any}
>
<Layer {...capacitySettings.clusterLayer} />
<Layer {...capacitySettings.pointLayer} />
......@@ -116,17 +121,17 @@ export const Map: FC = () => {
)}
{controlState.showInfections && (
<Source
id={PREDICTION_SOURCE_ID}
id={INFECTION_SOURCE_ID}
type="geojson"
data={predictionData as FeatureCollection}
cluster={true}
clusterMaxZoom={12}
clusterRadius={30}
clusterProperties={predictionSettings.clusterProperties}
ref={sourceRef as any}
clusterProperties={infectionSettings.clusterProperties}
ref={infectionsRef as any}
>
<Layer {...predictionSettings.clusterLayer} />
<Layer {...predictionSettings.pointLayer} />
<Layer {...infectionSettings.clusterLayer} />
<Layer {...infectionSettings.pointLayer} />
</Source>
)}
</ReactMapGL>
......
......@@ -10,8 +10,11 @@ export const GERMANY_LAT_LONG = {
export const DEFAULT_ZOOM = 6
export const THREAT_SOURCE_ID = 'threatSource'
export const PREDICTION_SOURCE_ID = 'predictionSource'
export const CAPACITY_SOURCE_ID = 'capacitySource'
export const INFECTION_SOURCE_ID = 'infectionSource'
export const CAPACITY_CLUSTER_ID = 'capacityCluster'
export const INFECTION_CLUSTER_ID = 'infectionCluster'
export const MAPBOX_TOKEN = 'pk.eyJ1IjoiamFza29tZSIsImEiOiJjazgxZzF1OGYwYWloM29tdzhnM29xaTN2In0.gBFtz_PE__-fx-ZefcJvrw'
......@@ -56,7 +59,7 @@ export const getCapacitySettings: (capacityType: CapacityType) => SourceSettings
const averageLevelProp = ['/', ['get', 'sumLevel'], ['get', 'point_count']]
const clusterLayer: LayerProps = {
id: 'capacityClusters',
id: CAPACITY_CLUSTER_ID,
type: 'circle',
source: 'capacity',
filter: ['has', 'point_count'],
......@@ -111,7 +114,7 @@ export const getCapacitySettings: (capacityType: CapacityType) => SourceSettings
}
}
export const getPredictionSettings: (day: number) => SourceSettings = (day) => {
export const getInfectionSettings: (day: number) => SourceSettings = (day) => {
const forcastProp: Expression = ['at', day, ['get', 'forcast']]
const averageProp: Expression = ['/', ['get', 'sum'], ['get', 'point_count']]
const clusterProperties: ClusterProps = {
......@@ -119,7 +122,7 @@ export const getPredictionSettings: (day: number) => SourceSettings = (day) => {
}
const clusterLayer: LayerProps = {
id: 'predictionCluster',
id: INFECTION_CLUSTER_ID,
type: 'circle',
source: 'predictions',
filter: ['has', 'point_count'],
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment