Merge pull request #473 from bcgov/update-map-package-06

Update map package
bcgov · Aug 30, 2023 · 6649530 · 6649530
2 parents 0b191f5 + e207ca4
commit 6649530
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 32 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -29,7 +29,7 @@
     "react-icons": "^4.6.0",
     "react-leaflet": "^4.2.1",
     "react-oidc-context": "^2.2.0",
-    "react-parcelmap-bc": "^1.0.4",
+    "react-parcelmap-bc": "^1.1.4",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.4.1",
     "react-scripts": "5.0.1",

diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
@@ -19,7 +19,7 @@ it('renders log in panel', () => {
         <App />
       </Provider>
       );
-  const loginPanel = screen.getByText(/Log In to my LRS Account/i);
+  const loginPanel = screen.getByText(/Login/i);
   expect(loginPanel).toBeInTheDocument();
 
 });
@@ -33,7 +33,7 @@ test('Renders LRS Form Accordion', () =>{
         <App />
       </Provider>
     );
-  const formAccordion = screen.getByText(/This is the first sample lrs form, please use this for lrs things/i)
+  const formAccordion = screen.getByText(/Welcome./i)
   expect(formAccordion).toBeInTheDocument()
 })
 
diff --git a/frontend/src/app/features/Map/Map.jsx b/frontend/src/app/features/Map/Map.jsx
@@ -3,7 +3,7 @@ import Map from "../../../../node_modules/react-parcelmap-bc/dist/Map";
 
 export default React.memo(() => {
   const [data, setData] = useState();
-  const [location, setLocation] = useState([49, -123]);
+  const [location, setLocation] = useState([48.41974533439947, -123.36781242160622]);
   const [readOnly, setReadOnly] = useState(false);
 
   useEffect(() => {

diff --git a/map-package/package.json b/map-package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-parcelmap-bc",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "private": false,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",

diff --git a/map-package/src/map/Map.js b/map-package/src/map/Map.js
@@ -12,28 +12,33 @@ const Map = (props) => {
   let map;
   let routeLayer, waypointsLayer;
   const identifyBufferDistance = 4;
-  const [show, setShow] = useState(true);
+  const [show, setShow] = useState(false);
   const [address, setAddress] = useState("");
-  const [location, setLocation] = useState([ 48.419, -123.37]);
+  const [location, setLocation] = useState([ 48.46762, -123.25458  ]);
   const [zoom, setZoom] = useState(13);
+  const [searchTrue, setSerachTrue] = useState(true);
   //const [info, setInfo] = useState({});
   let info;
 
   useEffect(() => {
-    if (props.initLocation.length > 0 && props.initLocation !== null && props.initLocation !== undefined) {
-
-      if(props.readOnly)
-      {
-        setShow(false);
-      } 
+    if (props.initLocation.length > 0 && props.initLocation !== null && props.initLocation !== undefined && ( location[0] !== props.initLocation[0] ||   location[1] !== props.initLocation[1]   )) {
+
+
 
-      const timer = setTimeout(() => {
-        setZoom(13);
+      const timeoutId =  setTimeout(()=>{
+        //setSerachTrue(false);
+        setZoom(18);
         setLocation(props.initLocation);
-      }, 1000); // 3000 milliseconds (3 seconds)
-
-      // Clean up the timer to avoid memory leaks
-      return () => clearTimeout(timer);
+        if(!props.readOnly)
+        {
+          setShow(true);
+        } 
+
+      },1000);
+
+      return () => {
+        clearTimeout(timeoutId);
+      };
     }
   }, [props]);
 
@@ -178,7 +183,7 @@ const Map = (props) => {
                     .setLatLng(e.latlng)
                     .setContent(
                       "Site ID:" +
-                        feature.properties[targetLayer.topLineProperty] +
+                        feature.properties[targetLayer.tsopLineProperty] +
                         "<br/>" +
                         "Lat: " +
                         feature.properties[targetLayer.latitude] +
@@ -302,11 +307,12 @@ const Map = (props) => {
     getGeoCode(address).then((x) => {
       if (x.features.length > 0) {
         console.log(x.features[0].geometry.coordinates);
-        setZoom(50);
+        setZoom(20);
         setLocation([
           x.features[0].geometry.coordinates[1],
           x.features[0].geometry.coordinates[0],
         ]);
+        setSerachTrue(true);
       }
     });
   };
@@ -345,14 +351,19 @@ const Map = (props) => {
 
   const RecenterAutomatically = () => {
     const map = useMap();
-    useEffect(() => {
-       //map.setZoom(zoom);
+    useEffect(() => {    
+      map.setZoom(zoom);
+
+      if(searchTrue)
+      {
       map.setView(location,zoom);
+      }
 
       map.fire("click", {
         latlng: L.latLng(location),
       });
-    }, [location]);
+
+    }, [map]);
     return null;
   };
 
@@ -433,7 +444,7 @@ const Map = (props) => {
         )}
       </div>
       <br />
-      <MapContainer center={location} zoom={zoom}   minZoom={10} scrollWheelZoom={false}  maxBounds={maxBounds} bounds={maxBounds} maxBoundsViscosity={1.0}>
+      <MapContainer center={location}  zoom={zoom} minZoom={10}  maxBounds={maxBounds} bounds={maxBounds} maxBoundsViscosity={1.0} >
         <TileLayer
           attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"