Filters added on SymbolLayer

.eslintrc.js

@@ -17,7 +17,8 @@ module.exports = {
     rules: {
       'react/no-unescaped-entities': 0,
       'react-native/no-inline-styles': 0,
-      "@typescript-eslint/no-explicit-any": ["off"]
+      "@typescript-eslint/no-explicit-any": ["off"],
+      "@typescript-eslint/no-var-requires": "off"
     },
     ignorePatterns: [
       '**/__mocks__/*.ts',

src/components/home/ProjectModal.tsx

@@ -116,8 +116,7 @@ const ProjectModal = (props: Props) => {
         id: '',
       }),
     )
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //@ts-expect-error
+    const allProjects = realm.objects(RealmSchema.Projects)
     setProjectSites(allProjects[data.index].sites)
   }
 

src/components/map/DisplayMap.tsx

@@ -16,6 +16,11 @@ import bbox from '@turf/bbox'
 import SiteMapSource from './SiteMapSource'
 import PolygonShapeSource from './PolygonShapeSource'
 
+
+const MultiTreePin = require('assets/images/icons/MultTreePin.png');
+const SingleTreePin = require('assets/images/icons/SingleTreePin.png');
+const RemovalPin = require('assets/images/icons/RemovalPin.png');
+
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const MapStyle = require('assets/mapStyle/mapStyleOutput.json')
 
@@ -48,6 +53,7 @@ const DisplayMap = () => {
       el.location.type,
       JSON.parse(el.location.coordinates),
       el.intervention_id,
+      el.intervention_key
     )
     return result.geoJSON
   })
@@ -61,7 +67,7 @@ const DisplayMap = () => {
     requestLocationPermission()
   }, [])
 
-  
+
 
 
   useEffect(() => {
@@ -114,7 +120,6 @@ const DisplayMap = () => {
   const handleMarkerPress = (i: number) => {
     dispatch(updateActiveIndex(i))
   }
-
   return (
     <MapLibreGL.MapView
       style={styles.map}
@@ -125,6 +130,9 @@ const DisplayMap = () => {
       styleURL={JSON.stringify(MapStyle)}>
       <MapLibreGL.Camera ref={cameraRef} />
       <MapLibreGL.UserLocation minDisplacement={5} />
+      <MapLibreGL.Images images={{ 'single-tree-registration': SingleTreePin, 'multi-tree-registration': MultiTreePin, 'fire-patrol': RemovalPin }} id={'iconset'}>
+        <React.Fragment />
+      </MapLibreGL.Images>
       <PolygonShapeSource geoJSON={geoJSON}
         onShapeSourcePress={setSelectedGeoJson} />
       <SiteMapSource />

src/components/map/PolygonShapeSource.tsx

@@ -3,13 +3,15 @@ import React from 'react'
 import MapLibreGL, { LineLayerStyle } from '@maplibre/maplibre-react-native'
 import { Colors } from 'src/utils/constants'
 
+
 const polyline: StyleProp<LineLayerStyle> = {
   lineWidth: 2,
   lineOpacity: 0.5,
   lineJoin: 'bevel',
   lineColor: Colors.PRIMARY
 }
 const fillStyle = { fillOpacity: 0.3, fillColor: Colors.PRIMARY }
+const circleStyle = { circleColor: Colors.PRIMARY_DARK, circleOpacity: 0.8 };
 
 interface Props {
   geoJSON: any
@@ -31,11 +33,29 @@ const PolygonShapeSource = (props: Props) => {
       <MapLibreGL.FillLayer
         id={'polyFill'}
         style={fillStyle}
-      />
+        filter={['all', ['>=', ['zoom'], 14], ['==', ['geometry-type'], 'Polygon']]}
+        />
       <MapLibreGL.LineLayer
         id={'polyline'}
         style={polyline}
+        filter={['all', ['>=', ['zoom'], 14], ['==', ['geometry-type'], 'Polygon']]}
+        />
+      <MapLibreGL.SymbolLayer id={'iconset'} style={{
+        iconImage: [
+          'match',
+          ['get', 'key'],
+          'single-tree-registration',
+          'single-tree-registration',
+          'multi-tree-registration',
+          'multi-tree-registration',
+          'fire-patrol',
+          'fire-patrol',
+          'single-tree-registration',
+        ]
+      }}
+        filter={['<', ['zoom'], 14]}
       />
+      <MapLibreGL.CircleLayer id={'singleSelectedPolyCircle'} style={circleStyle} filter={["==", ["geometry-type"], "Point"]}/>
     </MapLibreGL.ShapeSource>
   )
 }

src/utils/helpers/interventionFormHelper.ts

@@ -66,6 +66,7 @@ export const makeInterventionGeoJson = (
   type: string,
   coordinates: Array<number[]>,
   id: string,
+  key?: string
 ) => {
   const coord: Array<number[]> = coordinates
   switch (type) {
@@ -75,6 +76,7 @@ export const makeInterventionGeoJson = (
           type: 'Feature',
           properties: {
             id,
+            key: key || '',
           },
           geometry: {
             type: 'Point',
@@ -90,6 +92,7 @@ export const makeInterventionGeoJson = (
           type: 'Feature',
           properties: {
             id,
+            key: key || '',
           },
           geometry: {
             type: 'Polygon',