Ignore:
Timestamp:
02/14/22 01:41:41 (2 years ago)
Author:
Tasevski2 <39170279+Tasevski2@…>
Branches:
master
Children:
747e0ab
Parents:
e8b1076
Message:

Push before video

File:
1 edited

Legend:

Unmodified
Added
Removed

  • sources/client/src/components/GoogleMaps/index.js

    re8b1076 rbc20307  
    11import GoogleMapReact from 'google-map-react';
     2import { useEffect, useRef } from 'react';
    23
    34import { Wrapper, Marker } from './styles';
    45
    5 const ParkingSpaceMarker = ({ text, free }) => (
    6   <Marker $free={free}>{text}</Marker>
     6const ParkingSpaceMarker = ({ text, isTaken }) => (
     7    <Marker $isTaken={isTaken}>{text}</Marker>
    78);
    89
    9 const GoogleMaps = ({ location, parkingSpacesLocation, zoneAreaColor }) => {
    10   const defaultProps = {
    11     zoom: 18,
    12   };
    13   const drawZonePolygon = (map, maps) => {
    14     var zoneArea = new maps.Polygon({
    15       paths: location.coords,
    16       strokeColor: zoneAreaColor,
    17       strokeOpacity: 0.8,
    18       strokeWeight: 2,
    19       fillColor: zoneAreaColor,
    20       fillOpacity: 0.2,
    21     });
    22     zoneArea.setMap(map);
    23   };
    24   return (
    25     <Wrapper>
    26       <GoogleMapReact
    27         defaultCenter={location.center}
    28         defaultZoom={defaultProps.zoom}
    29         yesIWantToUseGoogleMapApiInternals={true}
    30         onGoogleApiLoaded={({ map, maps }) => drawZonePolygon(map, maps)}
    31       >
    32         {parkingSpacesLocation.map((p, index) => (
    33           <ParkingSpaceMarker
    34             key={index}
    35             lat={p.lat}
    36             lng={p.lng}
    37             free={p.free}
    38             text={p.parkingSpaceNumber}
    39           />
    40         ))}
    41       </GoogleMapReact>
    42     </Wrapper>
    43   );
     10const GoogleMaps = ({
     11    location = {},
     12    parkingSpaces = [],
     13    zoneAreaColor = '',
     14    zoom,
     15}) => {
     16    let refMap = useRef(null);
     17    let refZone = useRef(null);
     18    const defaultProps = {
     19        zoom: 15,
     20    };
     21    const drawZonePolygon = (map, maps) => {
     22        if (!maps) return;
     23        var zoneArea = new maps.Polygon({
     24            paths: location?.coords ?? [],
     25            strokeColor: zoneAreaColor ?? '',
     26            strokeOpacity: 0.8,
     27            strokeWeight: 2,
     28            fillColor: zoneAreaColor ?? '',
     29            fillOpacity: 0.2,
     30        });
     31        refZone.current = zoneArea;
     32        zoneArea.setMap(map);
     33    };
     34    useEffect(() => {
     35        if (refMap.current) {
     36            refZone.current.setMap(null);
     37            drawZonePolygon(refMap.current.map, refMap.current.maps);
     38        }
     39    }, [location?.centre]);
     40    return (
     41        <Wrapper>
     42            <GoogleMapReact
     43                center={location?.centre}
     44                zoom={zoom ?? defaultProps.zoom}
     45                yesIWantToUseGoogleMapApiInternals={true}
     46                onGoogleApiLoaded={({ map, maps, ref }) => {
     47                    refMap.current = { map, maps };
     48                    drawZonePolygon(map, maps);
     49                }}
     50            >
     51                {parkingSpaces.map((p, index) => (
     52                    <ParkingSpaceMarker
     53                        key={index}
     54                        lat={p.lat}
     55                        lng={p.lng}
     56                        isTaken={p.taken}
     57                        text={p.psName}
     58                    />
     59                ))}
     60            </GoogleMapReact>
     61        </Wrapper>
     62    );
    4463};
    4564
Note: See TracChangeset for help on using the changeset viewer.