removal of console logs

Author: luisrodriguezgalvez

src/components/BasemapControl.vue

@@ -62,18 +62,10 @@
       return
     }
 
-    console.log('[BasemapControl] selectStyle called:', style.title, style.uri)
-    console.log('[BasemapControl] Current map style before change:', map.getStyle()?.name || 'unknown')
-    
     // Switch to new basemap style
     map.setStyle(style.uri)
     activeStyle.value = style.title
     showDropdown.value = false
-    
-    console.log('[BasemapControl] setStyle() called, waiting for style.load event...')
-    
-    // Note: LocationsLayer component automatically re-adds its layers
-    // when it detects the new style has loaded via its reactive watch
   }
 
   function handleClickOutside(event) {

src/components/LayerPaintControl.vue

@@ -23,69 +23,47 @@ const { map } = useMap()
 // Helper function to check if layer is ready
 function isLayerReady() {
   const mapObj = unref(map)
-  const exists = mapObj && mapObj.getLayer(props.id)
-  console.log(`[LayerPaintControl] isLayerReady check for ${props.id}:`, exists)
-  if (mapObj) {
-    console.log(`[LayerPaintControl] Map style loaded:`, mapObj.isStyleLoaded())
-    console.log(`[LayerPaintControl] All layers on map:`, mapObj.getStyle()?.layers?.map(l => l.id) || [])
-  }
-  return exists
+  return mapObj && mapObj.getLayer(props.id)
 }
 
 // Watch for paint changes and apply them to the layer
 watch(
   () => props.paint,
   (newPaint) => {
-    console.log(`[LayerPaintControl] Paint prop changed for layer: ${props.id}`)
     const mapObj = unref(map)
     const layerExists = isLayerReady()
     
     if (!layerExists) {
-      console.log(`[LayerPaintControl] Layer ${props.id} not ready, will retry in 100ms`)
       // Retry after a short delay if layer doesn't exist yet
       setTimeout(() => {
         const retryMapObj = unref(map)
         const retryLayerExists = retryMapObj && retryMapObj.getLayer(props.id)
-        console.log(`[LayerPaintControl] Retry check for ${props.id}:`, retryLayerExists)
         if (retryLayerExists) {
-          console.log(`[LayerPaintControl] Applying paint properties on retry for ${props.id}`)
           applyPaintProperties(retryMapObj, newPaint)
-        } else {
-          console.log(`[LayerPaintControl] Layer ${props.id} still not available after retry`)
         }
       }, 100)
       return
     }
 
-    console.log(`[LayerPaintControl] Layer ${props.id} exists, applying paint properties`)
     applyPaintProperties(mapObj, newPaint)
   },
   { deep: true, immediate: true }
 )
 
 // Separate function to apply paint properties
 function applyPaintProperties(mapObj, paint) {
-  console.log(`[LayerPaintControl] applyPaintProperties called for ${props.id}`)
-  console.log(`[LayerPaintControl] Map object available:`, !!mapObj)
-  console.log(`[LayerPaintControl] Layer exists:`, !!mapObj?.getLayer(props.id))
-  console.log(`[LayerPaintControl] Paint properties to apply:`, Object.keys(paint))
-  
   if (!mapObj || !mapObj.getLayer(props.id)) {
-    console.log(`[LayerPaintControl] Cannot apply paint - map or layer not available`)
     return
   }
 
   // Apply each paint property to the layer
   Object.keys(paint).forEach((property) => {
     try {
-      console.log(`[LayerPaintControl] Setting paint property "${property}" for ${props.id}`)
       mapObj.setPaintProperty(props.id, property, paint[property])
-      console.log(`[LayerPaintControl] Successfully set "${property}" for ${props.id}`)
     } catch (error) {
-      console.error(`[LayerPaintControl] Failed to set paint property ${property} for layer ${props.id}:`, error)
+      console.error(`Failed to set paint property ${property} for layer ${props.id}:`, error)
     }
   })
-  console.log(`[LayerPaintControl] Finished applying all paint properties for ${props.id}`)
 }
 </script>
 

src/components/MapComponent.vue

@@ -66,8 +66,7 @@ const map = computed(() => mapInstance.value)
 provide('map', map)
 
 function onMapCreated(map) {
-    console.log('[MapComponent] onMapCreated called')
-    mapInstance.value = map
+  mapInstance.value = map
 
   // Create popup instance for hover
   hoverPopup.value = new mapboxgl.Popup({
@@ -78,19 +77,13 @@ function onMapCreated(map) {
 
   // Listen for style changes (when basemap is changed)
   map.on('style.load', () => {
-    console.log('[MapComponent] style.load event fired')
-    console.log('[MapComponent] Current layers on map:', map.getStyle().layers?.map(l => l.id) || [])
-    console.log('[MapComponent] Current sources on map:', Object.keys(map.getStyle().sources || {}))
-    
     // Increment counter to force MapLayer components to re-render with new keys
     styleChangeCounter.value++
-    console.log('[MapComponent] Style change counter incremented to:', styleChangeCounter.value)
     
     // Wait for style to be fully loaded before re-initializing layers
     // MapboxLayer components need the style to be ready before they can add layers
     const waitForStyleReady = () => {
       if (map.isStyleLoaded()) {
-        console.log('[MapComponent] Style is ready, re-initializing layers')
         // Clear existing layers from store to force re-render
         mapStore.mapboxLayers = []
         // Small delay to ensure MapboxLayer components have time to clean up
@@ -99,7 +92,6 @@ function onMapCreated(map) {
           initializeMap()
         }, 50)
       } else {
-        console.log('[MapComponent] Style not ready yet, waiting...')
         setTimeout(waitForStyleReady, 50)
       }
     }
@@ -108,49 +100,28 @@ function onMapCreated(map) {
 
   // Wait for initial style to load before adding sources/layers
   if (map.isStyleLoaded()) {
-    console.log('[MapComponent] Style already loaded, initializing immediately')
     setupActiveLocationLayer()
     initializeMap()
   } else {
-    console.log('[MapComponent] Style not loaded yet, waiting for style.load event')
     map.once('style.load', () => {
-      console.log('[MapComponent] Initial style.load event fired')
       setupActiveLocationLayer()
       initializeMap()
     })
   }
 }
 
 function initializeMap() {
-  console.log('[MapComponent] initializeMap called')
-  const mapObj = mapInstance.value
-  console.log('[MapComponent] Map instance available:', !!mapObj)
-  console.log('[MapComponent] Map style loaded:', mapObj?.isStyleLoaded())
-  
   mapStore.initializeMapboxLayers()
-  console.log('[MapComponent] mapboxLayers after initializeMapboxLayers:', mapStore.mapboxLayers.map(l => l.id))
-  
   locationsStore.fetchLocations().then(() => {
-    console.log('[MapComponent] Locations fetched, refreshing layers')
-    console.log('[MapComponent] Locations count:', locationsStore.locations.length)
     mapStore.refreshLayers()
-    console.log('[MapComponent] Layers refreshed, mapboxLayers:', mapStore.mapboxLayers.map(l => l.id))
   })
 }
 
 // Setup active-location layer for highlighting selected location
 function setupActiveLocationLayer() {
   const mapObj = mapInstance.value
-  console.log('[MapComponent] setupActiveLocationLayer called')
-  console.log('[MapComponent] Map object available:', !!mapObj)
-  console.log('[MapComponent] active-location source exists:', !!mapObj?.getSource('active-location'))
-  
-  if (!mapObj || mapObj.getSource('active-location')) {
-    console.log('[MapComponent] Skipping setupActiveLocationLayer - map not available or source already exists')
-    return
-  }
+  if (!mapObj || mapObj.getSource('active-location')) return
 
-  console.log('[MapComponent] Adding active-location source and layer')
   mapObj.addSource('active-location', {
     type: 'geojson',
     data: { type: 'FeatureCollection', features: [] },
@@ -166,7 +137,6 @@ function setupActiveLocationLayer() {
       'circle-stroke-color': '#ff0000',
     },
   })
-  console.log('[MapComponent] active-location layer added successfully')
 }
 
 // Handle click on location layer
@@ -261,33 +231,21 @@ function handleLayerMouseleave(layerId) {
 
 // Function to update locations layer source data with filtered locations
 function updateLocationsSourceData() {
-  console.log('[MapComponent] updateLocationsSourceData called')
   const mapObj = mapInstance.value
-  console.log('[MapComponent] Map object available:', !!mapObj)
-  console.log('[MapComponent] locations-layer exists:', !!mapObj?.getLayer('locations-layer'))
-  
   if (!mapObj || !mapObj.getLayer('locations-layer')) {
-    console.log('[MapComponent] Cannot update source data - map or layer not available')
     return
   }
 
   const layer = mapObj.getLayer('locations-layer')
   const sourceId = layer.source || 'locations-layer'
   const source = mapObj.getSource(sourceId)
   
-  console.log('[MapComponent] Source ID:', sourceId)
-  console.log('[MapComponent] Source exists:', !!source)
-  console.log('[MapComponent] Source type:', source?.type)
-  
   if (!source || source.type !== 'geojson') {
-    console.log('[MapComponent] Cannot update source data - source not available or wrong type')
     return
   }
 
   const featureCollection = locationsStore.locationsFeatureCollection
-  console.log('[MapComponent] Setting source data with', featureCollection.features?.length || 0, 'features')
   source.setData(featureCollection)
-  console.log('[MapComponent] Source data updated successfully')
 }
 
 
@@ -372,23 +330,17 @@ let setupInProgress = false // Flag to prevent concurrent setups
 watch(
   () => mapboxLayers.value.find(l => l.id === 'locations-layer'),
   (locationsLayer, oldLocationsLayer) => {
-    console.log('[MapComponent] Watcher triggered for locations-layer')
-    console.log('[MapComponent] locationsLayer found:', !!locationsLayer)
-    console.log('[MapComponent] mapInstance available:', !!mapInstance.value)
-    
     // Only reset if layer state actually changed (not found → found)
     const wasFound = !!oldLocationsLayer
     const isFound = !!locationsLayer
     
     if (!wasFound && isFound) {
       // Layer just appeared, reset flags
-      console.log('[MapComponent] Layer state changed: not found → found, resetting flags')
       locationsLayerListenersAttached = false
       retryCount = 0
     } else if (wasFound && isFound) {
       // Layer already existed, don't reset - might be a duplicate trigger
       if (locationsLayerListenersAttached) {
-        console.log('[MapComponent] Layer already set up, skipping duplicate setup')
         return
       }
     }
@@ -399,33 +351,27 @@ watch(
         const mapObj = mapInstance.value
         const layerExists = mapObj?.getLayer('locations-layer')
         const styleLoaded = mapObj?.isStyleLoaded()
-        console.log('[MapComponent] checkAndSetup - locations-layer exists:', !!layerExists)
-        console.log('[MapComponent] checkAndSetup - map style loaded:', styleLoaded)
         
         if (layerExists && styleLoaded) {
-          console.log('[MapComponent] Setting up locations layer listeners and data')
           retryCount = 0 // Reset on success
           setupLocationsLayerListeners()
           updateLocationsSourceData()
 
           if (mapObj.getLayer('active-location-layer') && mapObj.getLayer('locations-layer')) {
             try {
               mapObj.moveLayer('active-location-layer')
-              console.log('[MapComponent] Moved active-location-layer to top')
             } catch (e) {
-              console.warn('[MapComponent] Layer movement failed:', e)
+              // Layer movement failed, but not critical
             }
           }
           setupInProgress = false // Clear flag on success
         } else {
           retryCount++
           if (retryCount >= MAX_RETRIES) {
-            console.error('[MapComponent] Max retries reached, giving up on locations-layer setup')
             retryCount = 0
             setupInProgress = false
             return
           }
-          console.log(`[MapComponent] Layer not ready yet (retry ${retryCount}/${MAX_RETRIES}), retrying in 100ms`)
           setTimeout(checkAndSetup, 100)
         }
       }

src/components/MapLayer.vue

@@ -23,13 +23,8 @@
       },
     },
     mounted () {
-      console.log(`[MapLayer] Component mounted for layer: ${this.layer?.id}`)
       const { map } = useMap()
       this.map = map
-      console.log(`[MapLayer] Map instance available for ${this.layer?.id}:`, !!unref(map))
-    },
-    updated () {
-      console.log(`[MapLayer] Component updated for layer: ${this.layer?.id}`)
     },
     methods: {
       onLayerClicked (e) {

src/stores/map.js

@@ -11,35 +11,28 @@ export const useMapStore = defineStore('map', {
 
   actions: {
     initializeMapboxLayers () {
-      console.log('[MapStore] initializeMapboxLayers called')
       const locationsStore = useLocationsStore()
 
       // Collect all layer configs
       const allLayerConfigs = []
 
       // 1. Add locations layer from locations store
       const locationsLayerConfig = locationsStore.locationsLayerConfig
-      console.log('[MapStore] locationsLayerConfig:', !!locationsLayerConfig)
       if (locationsLayerConfig) {
         allLayerConfigs.push(locationsLayerConfig)
-        console.log('[MapStore] Added locationsLayerConfig to allLayerConfigs')
       }
 
       // 2. Add static layers (WMS/WMTS from config files if needed in future)
       allLayerConfigs.push(...this.staticLayerConfigs)
-      console.log('[MapStore] Total layer configs before transform:', allLayerConfigs.length)
 
       // Transform all configs to Mapbox format
       this.mapboxLayers = allLayerConfigs
         .map(layerConfig => buildMapboxLayer(layerConfig))
         .filter(layer => layer != null)
-      
-      console.log('[MapStore] mapboxLayers after transform:', this.mapboxLayers.map(l => l.id))
     },
 
     // Method to update layers when locations change
     refreshLayers () {
-      console.log('[MapStore] refreshLayers called')
       this.initializeMapboxLayers()
     },
   },