improved map functionality

bcgov · Aug 30, 2023 · 54300ba · 54300ba
1 parent 97241c5
commit 54300ba
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 22 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.3",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.4.1",
     "react-scripts": "5.0.1",

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.4",
+  "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,20 +12,23 @@ 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(false);
   //const [info, setInfo] = useState({});
   let info;
 
   useEffect(() => {
-    if (props.initLocation.length > 0 && props.initLocation !== null && props.initLocation !== undefined) {
-      setZoom(13);
+    if (props.initLocation.length > 0 && props.initLocation !== null && props.initLocation !== undefined && ( location[0] !== props.initLocation[0] ||   location[1] !== props.initLocation[1]   )) {
+
+      setSerachTrue(false);
+      setZoom(18);
       setLocation(props.initLocation);
-      if(props.readOnly)
+      if(!props.readOnly)
       {
-        setShow(false);
+        setShow(true);
       } 
     }
   }, [props]);
@@ -171,7 +174,7 @@ const Map = (props) => {
                     .setLatLng(e.latlng)
                     .setContent(
                       "Site ID:" +
-                        feature.properties[targetLayer.topLineProperty] +
+                        feature.properties[targetLayer.tsopLineProperty] +
                         "<br/>" +
                         "Lat: " +
                         feature.properties[targetLayer.latitude] +
@@ -295,11 +298,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);
       }
     });
   };
@@ -338,14 +342,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;
   };
 
@@ -426,7 +435,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"