Icon fixes

damienallen · Jun 9, 2024 · e4b8686 · e4b8686
1 parent c966138
commit e4b8686
Showing 1 changed file with 21 additions and 8 deletions.
diff --git a/app/src/components/MapCanvas.tsx b/app/src/components/MapCanvas.tsx
@@ -135,32 +135,33 @@ export const MapCanvas = observer(() => {
             })
 
             // Load contours and center map on click
-            setSelectOnClick(`${layerId}-fill`)
-
             currentMap.on('mouseenter', `${layerId}-fill`, () => {
                 currentMap.getCanvas().style.cursor = 'pointer'
             })
 
             currentMap.on('mouseleave', `${layerId}-fill`, () => {
                 currentMap.getCanvas().style.cursor = ''
             })
+
+            setSelectOnClick(`${layerId}-fill`)
         }
     }
 
     const loadIcons = () => {
         if (map.current && app.centroidsGeojson) {
             const currentMap: maptilersdk.Map = map.current
             const sourceId = 'centroids'
+            const iconSize = 0.4
 
             if (!currentMap.getSource(sourceId)) {
-                const buildingsImage = new Image(32, 32)
+                const buildingsImage = new Image(64, 64)
                 buildingsImage.onload = () => {
                     currentMap.addImage('buildingsIcon', buildingsImage)
                 }
                 buildingsImage.src =
                     'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(buildingsSVG)
 
-                const tapImage = new Image(32, 32)
+                const tapImage = new Image(64, 64)
                 tapImage.onload = () => {
                     currentMap.addImage('tapIcon', tapImage)
                 }
@@ -175,8 +176,10 @@ export const MapCanvas = observer(() => {
                     id: `${sourceId}-building`,
                     type: 'symbol',
                     source: sourceId,
+                    filter: ['all', ['!=', 'URAU_CODE', contours.selected?.URAU_CODE || '']],
                     layout: {
                         'icon-image': 'buildingsIcon',
+                        'icon-size': iconSize,
                     },
                     paint: {},
                     maxzoom: 9,
@@ -189,6 +192,7 @@ export const MapCanvas = observer(() => {
                     filter: ['all', ['!=', 'URAU_CODE', contours.selected?.URAU_CODE || '']],
                     layout: {
                         'icon-image': 'tapIcon',
+                        'icon-size': iconSize,
                     },
                     paint: {},
                     minzoom: 9,
@@ -280,10 +284,19 @@ export const MapCanvas = observer(() => {
                 const currentMap: maptilersdk.Map = map.current
 
                 setTimeout(() => {
-                    currentMap.setFilter('centroids-tap', [
-                        'all',
-                        ['!=', 'URAU_CODE', contours.selected?.URAU_CODE || ''],
-                    ])
+                    if (
+                        currentMap.getLayer('centroids-building') &&
+                        currentMap.getLayer('centroids-tap')
+                    ) {
+                        currentMap.setFilter('centroids-building', [
+                            'all',
+                            ['!=', 'URAU_CODE', contours.selected?.URAU_CODE || ''],
+                        ])
+                        currentMap.setFilter('centroids-tap', [
+                            'all',
+                            ['!=', 'URAU_CODE', contours.selected?.URAU_CODE || ''],
+                        ])
+                    }
                     currentMap.fitBounds(extent(app.selectedFeature), {
                         maxZoom: 12,
                         duration: 1000,