edit geo map UI

src/views/settings/locations/card/MapTooltip.js

@@ -10,12 +10,13 @@ import {
   Rectangle,
   TileLayer,
   FeatureGroup,
+  LayerGroup,
   MapContainer as LeafletMap,
   Tooltip
 } from 'react-leaflet'
 import { EditControl } from "react-leaflet-draw"
 import L from 'leaflet'
-import { useLeafletContext } from '@react-leaflet/core'
+import { useLeafletContext} from '@react-leaflet/core'
 
 import '@styles/map/leaflet.draw.css'
 
@@ -55,6 +56,7 @@ const MapTooltip = ({gis, handleGis}) => {
     let numEdited = 0
     e.layers.eachLayer((layer) => {
       numEdited += 1
+      layer._enableLayerEdit = true
       console.log(layer)
       handleGis(layer._latlngs[0])
     })
@@ -117,33 +119,18 @@ const MapTooltip = ({gis, handleGis}) => {
     console.log('_onDeleteStop', e)
   }
 
-  const _onFeatureGroupReady = (reactFGref) => {
-    console.log(reactFGref)
+  const _onFeatureGroupReady = (ref) => {
+    console.log('_onFeatureGroupReady')
+    // console.log(ref)
+    // if (ref === null) {
+    //     return
+    // }
+    // console.log('importing service area from state')
+    //     const leafletGeoJSON = new L.GeoJSON(gis)
+    //     const leafletFG = ref.leafletElement
+    //     leafletGeoJSON.eachLayer(layer => leafletFG.addLayer(layer))
   }
-  const showAdd = gis.length < 1 
-  
-  useEffect(() => {
-    // const test = gis + ''
-  
 
-  }, [gis])
-
-  // const regExp = /(-?\d+(\.\d+)?)\s*(-?\d+(\.\d+)?)(,?)/
-  // const matches = gis.match(regExp)
-  // console.log(matches)
-
-  const polygon = [
-    [
-      [51.51, -0.12],
-      [51.51, -0.13],
-      [51.53, -0.13]
-    ],
-    [
-      [51.51, -0.05],
-      [51.51, -0.07],
-      [51.53, -0.07]
-    ]
-  ]
   const purpleOptions = { color: 'purple' }
 
   return (
@@ -172,13 +159,17 @@ const MapTooltip = ({gis, handleGis}) => {
             onDeleteStop={_onDeleteStop}
             draw={myControl}
           />
+             {/* <LayerGroup id="lg1"> */}
+                  <Polygon enable={true} pathOptions={purpleOptions} positions={gis} />
+              {/* </LayerGroup> */}
         </FeatureGroup>
 
             <TileLayer
               attribution='&ampcopy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
               url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
             />
-            <Polygon pathOptions={purpleOptions} positions={gis} />
+           
+          
           </LeafletMap>
       </CardBody>
     </Card>
@@ -297,7 +288,7 @@ function getGeoJson() {
     ]
   }
 
-  _onFeatureGroupReady = (reactFGref) => {
+  _onFeatureGroupReadyZ = (reactFGref) => {
     // populate the leaflet FeatureGroup with the geoJson layers
 
     const leafletGeoJSON = new L.GeoJSON(getGeoJson())

src/views/settings/locations/card/index.js

@@ -137,7 +137,12 @@ const handleError = (text) => {
      
       matches.map(point => {
         const cords = point.replace(',', '').split(' ')
-        polygon.push(cords)
+        // polygon.push(cords)
+       
+        polygon.push({
+          lat: cords[0],
+          lng: cords[1]
+        })
         console.log(cords)
       })
        console.log(matches)