different icons, show hsp count

Author: joergreichert

public/images/drinking-water.png

@@ -1,7 +1,7 @@
 import React from "react";
 import { isMobile } from 'react-device-detect';
 
-const StatusBar = ({ treeCount, waterSourceCount, mobileCount }) => {
+const StatusBar = ({ treeCount, waterSourceCount, pumpCount, mobileCount }) => {
     const desktop = () => {
         return (
             <div
@@ -28,6 +28,12 @@ const StatusBar = ({ treeCount, waterSourceCount, mobileCount }) => {
                     </div>
                     <div style={{ paddingTop: 15, fontWeight: 'bold', float: 'left' }}>{treeCount}</div>
                 </div>
+                <div style={{ float: 'left', paddingRight: '40px'}}>
+                    <div style={{ paddingTop: 8, float: 'left', paddingRight: '10px' }}>
+                        <img src="images/pumpe_64.png" height={32} alt="hand swivel pump" title="Anzahl Handschwengelpumpen im aktuellen Ausschnitt"/>
+                    </div>
+                    <div style={{ paddingTop: 15, fontWeight: 'bold', float: 'left' }}>{pumpCount}</div>
+                </div>
                 <div style={{ float: 'left', paddingRight: '40px'}}>
                     <div style={{ paddingTop: 8, float: 'left', paddingRight: '10px' }}>
                         <img src="images/drinking-water.png" height={32} alt="water tap and a can" title="Anzahl Wasserquellen im aktuellen Ausschnitt"/>
@@ -71,6 +77,10 @@ const StatusBar = ({ treeCount, waterSourceCount, mobileCount }) => {
                 { !isMobile &&
                     <div style={{ paddingBottom: 15, fontWeight: 'bold', paddingRight: 6 }}>{treeCount}</div>
                 }
+                <div style={{ paddingBottom: 5 }}>
+                    <img src="images/pumpe64.png" height={32} alt="hand swivel pump" title="Anzahl Handschwengelpumpen im aktuellen Ausschnitt"/>
+                </div>
+                <div style={{ paddingBottom: 15, fontWeight: 'bold', paddingRight: 6 }}>{pumpCount}</div>
                 <div style={{ paddingBottom: 5 }}>
                     <img src="images/drinking-water.png" height={32} alt="water tap and a can" title="Anzahl Wasserquellen im aktuellen Ausschnitt"/>
                 </div>

public/images/dumpster.png

@@ -45,6 +45,7 @@ interface DeckGLPropType {
   deckRef: any;
   handleViewStateChanged: any;
   treeCount: number;
+  pumpCount: number;
   waterSourceCount: number;
   mobileCount: number;
   zoom: any;
@@ -669,7 +670,7 @@ class DeckGLMap extends React.Component<DeckGLPropType, DeckGLStateType> {
   }
 
   render(): ReactNode {
-    const { isNavOpen, showControls, deckRef, handleViewStateChanged, treeCount, waterSourceCount, mobileCount } = this.props;
+    const { isNavOpen, showControls, deckRef, handleViewStateChanged, treeCount, pumpCount, waterSourceCount, mobileCount } = this.props;
     const { viewport } = this.state;
     const toggle2dAnd3d = () => {
       const newShow2d = !this.state.show2d;
@@ -755,6 +756,7 @@ class DeckGLMap extends React.Component<DeckGLPropType, DeckGLStateType> {
         </DeckGL>
         <StatusBar
           treeCount={treeCount}
+          pumpCount={pumpCount}
           waterSourceCount={waterSourceCount}
           mobileCount={mobileCount}
         />

src/components/StatusBar/index.tsx

@@ -39,11 +39,14 @@ export const Map: FC<{
   const history = useHistory();
 
   const initialTreeCount = (treesGeoJson as any).features.length
+  const initialPumpCount = (waterSourcesGeoJson as any).features.filter(
+    (feature) => feature.properties?.type === 'Handschwengelpumpe').length;
   const initialWaterSourceCount = (waterSourcesGeoJson as any).features.filter(
-    (feature) => feature.properties?.type !== 'LEIPZIG GIESST-Mobil').length;
+    (feature) => feature.properties?.type !== 'LEIPZIG GIESST-Mobil' && feature.properties?.type !== 'Handschwengelpumpe').length;
   const initialMobileCount = (waterSourcesGeoJson as any).features.filter(
     (feature) => feature.properties?.type === 'LEIPZIG GIESST-Mobil').length;
   const [treeCount, setTreeCount] = useState(initialTreeCount);
+  const [pumpCount, setPumpCount] = useState(initialPumpCount);
   const [waterSourceCount, setWaterSourceCount] = useState(initialWaterSourceCount);
   const [mobileCount, setMobileCount] = useState(initialMobileCount);
   const [zoom, setZoom] = useState(isMobile ? 13 : 11);
@@ -80,10 +83,12 @@ export const Map: FC<{
         } else {
           getTreeCount().then((count) => setTreeCount((count as number)));
         }
-        getFeatureCount('waterSources', (feature) => feature?.object?.properties?.type !== 'LEIPZIG GIESST-Mobil').then((count) => setWaterSourceCount(count as number));
+        getFeatureCount('waterSources', (feature) => feature?.object?.properties?.type === 'Handschwengelpumpe').then((count) => setPumpCount(count as number));
+        getFeatureCount('waterSources', (feature) => feature?.object?.properties?.type !== 'LEIPZIG GIESST-Mobil' && feature?.object?.properties?.type !== 'Handschwengelpumpe').then((count) => setWaterSourceCount(count as number));
         getFeatureCount('waterSources', (feature) => feature?.object?.properties?.type === 'LEIPZIG GIESST-Mobil').then((count) => setMobileCount(count as number));
       } else {
         setTreeCount(initialTreeCount);
+        setPumpCount(initialPumpCount);
         setWaterSourceCount(initialWaterSourceCount);
         setMobileCount(initialMobileCount);
       }
@@ -103,6 +108,7 @@ export const Map: FC<{
       ref={mapRef}
       deckRef={deckRef}
       treeCount={treeCount}
+      pumpCount={pumpCount}
       waterSourceCount={waterSourceCount}
       mobileCount={mobileCount}
       handleViewStateChanged={onViewStateChanged}