Fix layer toggle bug causing ghost markers to persist

- Update Layer.tsx to use stable React keys instead of array index
- Use format: featureCollection.name-feature.id for unique identification
- Fix typo: visbilityMap -> visibilityMap in App.tsx
- Remove debug console.log statement

Fixes #173

Author: oscar-edomex

src/App.tsx

@@ -26,13 +26,12 @@ function App() {
 
         // Take the name property of each collection and set it's initial visibility to true
         const layerNames = collections.map((fc) => fc.name )
-        const visbilityMap = layerNames.reduce((map, name) => { map[name] = true; return map }, {} as LayerVisibilityMap)
-        setLayerVisibility({...visbilityMap})
+        const visibilityMap = layerNames.reduce((map, name) => { map[name] = true; return map }, {} as LayerVisibilityMap)
+        setLayerVisibility({...visibilityMap})
       },)
   }, [])
 
   const layersToRender = layers.filter((fc) => layerVisibility[fc.name])
-  console.log(layersToRender)
 
   return (
     <div className="app-container">

src/components/Map/Layer.tsx

@@ -11,7 +11,10 @@ interface LayerProps {
 export const Layer: React.FC<LayerProps> = ({ featureCollection }) => {
   return (
     featureCollection.features.map((feature, idx) => (
-      <GeoJSON key={idx}  data={feature}/>
+      <GeoJSON
+        key={`${featureCollection.name}-${feature.id || idx}`}
+        data={feature}
+      />
     ))
   )
 }