Merge pull request #174 from OpenSourceFellows/issue-173-fix-layer-toggle-ghost-markers

Fix layer toggle bug causing ghost markers to persist

Author: DietBepis1

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}
+      />
     ))
   )
 }