build fix and updated myportal layout

2022-04-07 11:47:25 +01:00
parent d63d87aa3e
commit bc41924c85
35 changed files with 1308 additions and 58 deletions
@@ -0,0 +1,43 @@
+import GoogleMapReact from "google-map-react";
+const GoogleMapComponent = (props) => {
+    const { center, zoom } = props;
+
+    let data = [center];
+
+    const ModelsMap = (map, maps) => {
+        //instantiate array that will hold your Json Data
+        let dataArray = [];
+        //push your Json Data in the array
+        {
+            data.map((markerJson) => dataArray.push(markerJson));
+        }
+
+        //Loop through the dataArray to create a marker per data using the coordinates in the json
+        for (let i = 0; i < dataArray.length; i++) {
+            let marker = new maps.Marker({
+                position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
+                map,
+                label: dataArray[i].id,
+            });
+        }
+    };
+    return (
+        <GoogleMapReact
+            options={function (maps) {
+                return {
+                    overviewMapControl: true,
+                    mapTypeControl: true,
+                };
+            }}
+            bootstrapURLKeys={{
+                key: "AIzaSyCzeVrHt544bp_72YCFkw21eDsmI2JEsQo",
+            }}
+            defaultCenter={center}
+            defaultZoom={zoom}
+            yesIWantToUseGoogleMapApiInternals
+            onGoogleApiLoaded={({ map, maps }) => ModelsMap(map, maps)}
+        ></GoogleMapReact>
+    );
+};
+
+export default GoogleMapComponent;
@@ -0,0 +1,38 @@
+import L from "leaflet";
+import { useRef, useMemo } from "react";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+
+const OSMapComponent = (props) => {
+    const { center, zoom } = props;
+    const markerRef = useRef(null);
+    let data = [center];
+
+    // const ModelsMap = (map, maps) => {
+    //     //instantiate array that will hold your Json Data
+    //     let dataArray = [];
+    //     //push your Json Data in the array
+    //     {
+    //         data.map((markerJson) => dataArray.push(markerJson));
+    //     }
+
+    //     //Loop through the dataArray to create a marker per data using the coordinates in the json
+    //     for (let i = 0; i < dataArray.length; i++) {
+    //         let marker = new maps.Marker({
+    //             position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
+    //             map,
+    //             label: dataArray[i].id,
+    //         });
+    //     }
+    // };
+
+    return (
+        <MapContainer center={center} zoom={zoom}>
+            <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+
+            <Marker position={center} ref={markerRef}>
+                <Popup>hello</Popup>
+            </Marker>
+        </MapContainer>
+    );
+};
+export default OSMapComponent;