react-map-gl#Marker JavaScript Examples

Location = ({ lng, lat }) => (
  <Marker longitude={lng} latitude={lat}>
    <svg
      height={MARKER_SIZE}
      viewBox={`0 0 ${MARKER_SIZE} ${MARKER_SIZE}`}
      style={{
        fill: theme.colors.red["500"],
        stroke: "none",
        marginLeft: -MARKER_SIZE / 2,
        marginTop: -MARKER_SIZE / 2
      }}
    >
      <circle cx={MARKER_SIZE / 2} cy={MARKER_SIZE / 2} r={MARKER_SIZE / 2} />
    </svg>
  </Marker>
)

render() {
    const { data, onClick } = this.props;

    return data.map((city, index) => (
      <Marker
        key={`marker-${index}`}
        longitude={city.longitude}
        latitude={city.latitude}
      >
        <svg
          height={SIZE}
          viewBox="0 0 24 24"
          style={{
            cursor: 'pointer',
            fill: '#d00',
            stroke: 'none',
            transform: `translate(${-SIZE / 2}px,${-SIZE}px)`,
          }}
          onClick={() => onClick(city)}
        >
          <path d={ICON} />
        </svg>
      </Marker>
    ));
  }

Pins = ({ data, onClick, theme }) => {
  if (data) {
    return data.map(product =>
      product.siteLocations.map((location, index) => (
        <Marker
          key={`marker-${product.productId}-${index}`}
          longitude={location.lng}
          latitude={location.lat}
        >
          <svg
            height={SIZE}
            viewBox='0 0 24 24'
            style={{
              cursor: 'pointer',
              fill: `${theme.palette.secondary.main}`,
              stroke: 'none',
              transform: `translate(${-SIZE / 2}px,${-SIZE}px)`,
            }}
            // set clickedLocation since the click was on one of the locations from the array.
            onClick={() => onClick({ ...product, clickedLocation: location })}
          >
            <path d={ICON} />
          </svg>
        </Marker>
      ))
    )
  }
  return null
}

function SearchMap() {
    const [viewport, setViewport] = useState({
        latitude: 0,
        longitude: 0,
        zoom: 15,
        width: "100%",
        height: "100vh",
        position: "center"
    });
    //State for keeping track of the Markers long/lat
    const [marker, setMarker] = useState({
        latitude: 0,
        longitude: 0
    });
    useEffect(() => {
        // without this test will fail from not being able to run this function
        navigator.geolocation.getCurrentPosition(getUserLocation);
    }, []);
    const getUserLocation = (position) => {
        var crd = position.coords;

        setViewport({
            ...viewport,
            latitude: crd.latitude,
            longitude: crd.longitude
        });
        //When we Get users location we set the marker to the users current location
        setMarker({
            latitude: crd.latitude,
            longitude: crd.longitude
        });
    };

    const handleDragEnd = (event) => {
        setViewport({
            ...viewport,
            longitude: event.lngLat[0],
            latitude: event.lngLat[1]
        });
        //Update Users location on dragend
        setMarker({
            longitude: event.lngLat[0],
            latitude: event.lngLat[1]
        });
    };
    return (
        <div role="map-wrapper" className="map">
            <ReactMapGL
                {...viewport}
                mapboxApiAccessToken={mapboxAPI}
                onViewportChange={(viewport) => {
                    setViewport(viewport);
                }}
            >
                <Marker
                    latitude={marker.latitude}
                    longitude={marker.longitude}
                    offsetLeft={-10}
                    offsetTop={-10}
                    draggable={true}
                    onDragEnd={handleDragEnd}
                >
                    <img
                        src={`${Logo}`}
                        alt="marker"
                        style={{
                            width: "20px",
                            height: "20px",
                            borderRadius: "50%"
                        }}
                    />
                </Marker>
            </ReactMapGL>
        </div>
    );
}

function Map(props, { latitude, longitude, refresh }) {
  const [zoom, setZoom] = useState();
  const [viewport, setViewport] = useState({
    latitude: 40,
    longitude: -104.7,
    zoom: 11,
    width: "100%",
    height: "100%"
  });

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getMembers());
  }, [dispatch]);

  const location = useSelector(state => state.mem);

  const [locations, setLocations] = useState(location.membersArray);

  useEffect(() => {
    setLocations(props.locations);
  }, [props]);
  return (
    <MapContain>
      <ReactMapGL
        width="100%"
        height="100%"
        {...viewport}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        onViewportChange={viewport => {
          setZoom(viewport.zoom);
          setViewport(viewport);
        }}
      >
        {locations.map(location => (
          <Marker
            key={location.id}
            latitude={parseInt(location.latitude)}
            longitude={parseInt(location.longitude)}
          >
            {location.type === "neighbors" ? (
              <NeighborMarker
                setSelected={props.setSelected}
                selected={props.selected}
                location={location}
                zoom={zoom}
              />
            ) : (
              <FamMarker
                setSelected={props.setSelected}
                selected={props.selected}
                location={location}
                zoom={zoom}
              />
            )}
          </Marker>
        ))}
      </ReactMapGL>
    </MapContain>
  );
}

// https://github.com/visgl/react-map-gl/tree/master/docs

function MapContainer({
  latitude,
  longitude,
  queryLatitude,
  queryLongitude,
  transition,
  zoom,
  width,
  height,
}) {
  return (
    <div className="map-container" id="map-container">
      <ReactMapGL
        latitude={latitude}
        longitude={longitude}
        zoom={zoom}
        width={width}
        height={height}
        transitionDuration={transition}
        mapboxApiAccessToken={process.env.REACT_APP_MAP_API_TOKEN} // API access token from mapbox account
        mapStyle={process.env.REACT_APP_MAP_STYLE_TOKEN} // style from mapbox studio
        onViewportChange={(viewport) => {
          // When a user interacts with the viewport of the map window,
        }}
      >
        <Marker latitude={queryLatitude} longitude={queryLongitude}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
            focusable="false"
            width="24"
            height="29"
            preserveAspectRatio="xMidYMid meet"
            viewBox="0 0 24 24"
          >
            <path
              d="M12 11.5A2.5 2.5 0 0 1 9.5 9A2.5 2.5 0 0 1 12 6.5A2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7z"
              fill="#308257"
            />
          </svg>
        </Marker>
            <Marker
              key='mainMarker'
              latitude={latitude}
              longitude={longitude}
            >
              <svg
                className="map-marker"
                width="15"
                height="12"
                viewBox="0 0 24 29"
                fill="none"
                stroke="#00000022"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="7"
                  cy="7"
                  r="7"
                  fill="#53e0cd"
                />
                <circle
                  cx="7"
                  cy="7"
                  r="6.5"
                  stroke="black"
                  strokeOpacity="0.3"
                />
              </svg>
            </Marker>
      </ReactMapGL>
    </div>
  );
}

function LocationMap(){
  const { venue } = settingsData()
  const width = useWindowWidth()-15
  const [viewport, setViewport] = useState({
    latitude: venue.lat,
    longitude: venue.lng,
    zoom: 7,
    width: '100vw',
    height: "600px",
  })

  if(width != viewport.width){
    setViewport({
      ...viewport,
      width: width
    })
  }

  return(
      <Map
        mapStyle="mapbox://styles/mapbox/streets-v9"
        mapboxAccessToken={process.env.MAPS_KEY}
        onViewportChange={setViewport}
        scrollZoom={false}
        initialViewState={viewport}
        style={{ width:viewport.width, height:viewport.height }}
      >
        <Marker latitude={venue.lat} longitude={venue.lng} offsetLeft={-20} offsetTop={-10}>
          <LocationIcon fontSize="large" />
        </Marker>

        <div style={styles.navigationControl}>
          <NavigationControl />
        </div>

        <div className="card-of-venue-cls" style={styles.cardOfVenue}>
          <CardOfVenue />
        </div>
      </Map>
  )
}

render() {
  console.log(process.env.REACT_APP_MAPBOXAPI)
  const { address, displayName,patientId,residence} = this.state;
  return (
    <div>
      <div className="heading"> {
      displayName && address ? (
      <div>
        <h3>  {displayName} </h3>
        <h3> It is here - {address} </h3> 
      </div> )
        : (<h5> Fetching Ambulance Details.. </h5>
        )}

      {
        patientId && residence ? (
          <div>
            <h3> {patientId} needs your help</h3>
            <h3> Location - {residence} </h3>
          </div>
        ) : (<h5> Fetching Patient Requests...</h5>)
      }    
    </div>
      <button type="button" className="btn btn-success" onClick={this.requestforHelp}>Help Patient</button>

    <div className = "map">
      <ReactMapGL
        {...this.state.viewport}
        ref={this.mapRef}
        onViewportChange = {viewport => this.setState({
          viewport
        })}
        mapStyle = "mapbox://styles/mapbox/navigation-preview-day-v2"
        mapboxApiAccessToken = "pk.eyJ1Ijoia2cta2FydGlrIiwiYSI6ImNrOGdicTdwZjAwMGUzZW1wZmxpMDdvajcifQ.7FtdVDqPnZh4pCtTtcNf4g">

        <Geocoder
          mapRef={this.mapRef}
          onResult={this.handleOnResult}
          onViewportChange={this.handleGeocoderViewportChange}
          mapboxApiAccessToken= "pk.eyJ1Ijoia2cta2FydGlrIiwiYSI6ImNrOGdicTdwZjAwMGUzZW1wZmxpMDdvajcifQ.7FtdVDqPnZh4pCtTtcNf4g"
        />

        {Object.keys(this.state.userLocation).length !== 0 ? (
          <Marker
            latitude={this.state.userLocation.latitude}
            longitude={this.state.userLocation.longitude}
          >
            <img className="marker" src="patient.png"></img>
          </Marker>
        ) : ( 
          <div></div>
        )}
      </ReactMapGL>
    </div>
    </div>
  );
}

render() {
  const {displayName,address} = this.state;
  return (
    <div>
      <button type="button" className="btn btn-primary" onClick={this.requestforHelp}>Request For Help</button>
      <div class="heading">
      {displayName && address ? (
        <div>
           <h3>{displayName} is coming to take you</h3>
           <h3> It is here - {address}</h3> 
        </div>
      ) : (
        <h3> </h3>
      )}
      </div>
      <div className = "map">
        <ReactMapGL
          {...this.state.viewport}
          ref={this.mapRef}
          onViewportChange = {viewport => this.setState({
            viewport
          })}
          
          mapStyle = "mapbox://styles/mapbox/navigation-preview-day-v2"
          mapboxApiAccessToken ="pk.eyJ1Ijoia2cta2FydGlrIiwiYSI6ImNrOGdicTdwZjAwMGUzZW1wZmxpMDdvajcifQ.7FtdVDqPnZh4pCtTtcNf4g">
          

        <Geocoder
          mapRef={this.mapRef}
          onResult={this.handleOnResult}
          onViewportChange={this.handleGeocoderViewportChange}
          mapboxApiAccessToken="pk.eyJ1Ijoia2cta2FydGlrIiwiYSI6ImNrOGdicTdwZjAwMGUzZW1wZmxpMDdvajcifQ.7FtdVDqPnZh4pCtTtcNf4g"
        />

            {Object.keys(this.state.ambulanceLocation).length !== 0 ? (
          <Marker
            latitude={this.state.ambulanceLocation.latitude}
            longitude={this.state.ambulanceLocation.longitude}
          >
            <img className="marker" src="ambulancemarker.png"></img>
          </Marker>
        ) : ( 
          <Marker
            latitude={this.state.viewport.latitude}
            longitude={this.state.viewport.longitude}
          >
            <img className="marker" src="logo.png"></img>
          </Marker>
        )}

        </ReactMapGL>
      </div>
  </div>
  );
}

function MapBox(props) {
    const [viewport, setViewport] = useState({
        latitude: props.favoriteLocation[0].latitude,
        longitude: props.favoriteLocation[0].longitude,
        zoom: 15,
        width: "100%",
        height: "200px",
        position: "center"
    });
    //State for keeping track of the Markers long/lat
    const [marker, setMarker] = useState({
        latitude: props.favoriteLocation[0].latitude,
        longitude: props.favoriteLocation[0].longitude
    });
    useEffect(() => {
        if (
            props.favoriteLocation[0].latitude === 0 &&
            props.favoriteLocation[0].longitude === 0
        ) {
            navigator.geolocation.getCurrentPosition(getUserLocation);
        }
    }, []);

    const getUserLocation = (position) => {
        var crd = position.coords;
        setViewport({
            ...viewport,
            latitude: crd.latitude,
            longitude: crd.longitude
        });
        //When we Get users location we set the marker to the users current location
        setMarker({
            latitude: crd.latitude,
            longitude: crd.longitude
        });
    };

    const handleDragEnd = (event) => {
        setViewport({
            ...viewport,
            longitude: event.lngLat[0],
            latitude: event.lngLat[1]
        });
        //Update Users location on dragend
        setMarker({
            longitude: event.lngLat[0],
            latitude: event.lngLat[1]
        });
    };
    return (
        <div role="map-wrapper" className="map">
            <ReactMapGL
                {...viewport}
                mapboxApiAccessToken={mapboxAPI}
                mapStyle="mapbox://styles/carpal/ck9bvhge005yl1io1hpfp1q7z"
                onViewportChange={(viewport) => {
                    setViewport(viewport);
                }}
            >
                <Marker
                    latitude={marker.latitude}
                    longitude={marker.longitude}
                    offsetLeft={-10}
                    offsetTop={-10}
                    draggable={true}
                    onDragEnd={handleDragEnd}
                >
                    <img
                        src={`${Logo}`}
                        alt="marker"
                        style={{
                            width: "20px",
                            height: "20px",
                            borderRadius: "50%"
                        }}
                    />
                </Marker>
            </ReactMapGL>
        </div>
    );
}

function RideMap(props) {
    const [viewport, setViewport] = useState({
        latitude: 0,
        longitude: 0,
        zoom: 15,
        width: "100%",
        height: "100vh",
        position: "center"
    });

    const [locations, setLocations] = useState([]);

    //State for keeping track of the Markers long/lat

    const [marker, setMarker] = useState([-122.457827, 37.718436]);
    useEffect(() => {
        flyTo();

        if (props.start.length > 1 && props.end.length > 1) {
            const start = props.start.join(",");
            const end = props.end.join(",");

            getDirections(start, end);
        } else {
            navigator.geolocation.getCurrentPosition(getUserLocation);
        }
    }, [props.start, props.end, locations.length]);

    const getDirections = (start, end) => {
        Axios.get(
            `https://api.mapbox.com/directions/v5/mapbox/driving/${start};${end}?radiuses=40;100&geometries=geojson&access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`
        )
            .then((res) => {
                setLocations(res.data.routes[0].geometry.coordinates);
                //Set marker coordinates for the start and end location when a user selects their pickup and drop of points
                setMarker([props.start, props.end]);
            })
            .catch((err) => console.log(err));
    };

    //function for getting users coordinates using browsers geolocation API
    const getUserLocation = (position) => {
        var crd = position.coords;

        //Set the maps long and lat so that the map renders based on  the users current location.
        setViewport({
            ...viewport,
            latitude: crd.latitude,
            longitude: crd.longitude
        });

        //Set proximity coordinates to prioritize search location result based on users current location
        props.setProximityCords({
            longitude: crd.longitude,
            latitude: crd.latitude
        });
        //When we Get users location we set the marker to the users current location
        setMarker([crd.longitude, crd.latitude]);
    };

    const handleDragEnd = (event) => {
        setViewport({
            ...viewport,
            longitude: event.lngLat[0],
            latitude: event.lngLat[1]
        });
        //Update Users location on dragend
        setMarker([event.lngLat[0], event.lngLat[1]]);
    };

    const flyTo = () => {
        const newViewport = {
            ...viewport,
            longitude: props.start[0],
            latitude: props.start[1],
            zoom: 15,
            transitionDuration: 5000,
            transitionInterpolator: new FlyToInterpolator()
        };

        setViewport(newViewport);
    };

    // Function to render A Marker
    const renderMarker = (longLat, index = 0, pins = false) => {
        return (
            <Marker
                key={index}
                latitude={longLat[1]}
                longitude={longLat[0]}
                offsetLeft={-10}
                offsetTop={-10}
                draggable={true}
                onDragEnd={(e) => console.log(e)}
            >
                <img
                    src={pins ? `${pin}` : `${Logo}`}
                    alt="marker"
                    style={{
                        width: `${!pins && "20px"}`,
                        height: "20px",
                        borderRadius: "50%",
                        position: `${pins && "relative"}`,
                        bottom: `${pins && "11px"}`
                    }}
                />
            </Marker>
        );
    };
    return (
        <div role="map-wrapper" className="map">
            <ReactMapGL
                {...viewport}
                key="hello"
                mapboxApiAccessToken={mapboxAPI}
                mapStyle="mapbox://styles/carpal/ck9bvhge005yl1io1hpfp1q7z"
                onViewportChange={(viewport) => {
                    setViewport(viewport);
                }}
            >
                {/* start and end of route */}
                {Array.isArray(marker[0]) && Array.isArray(marker[1])
                    ? marker.map((cur, index) =>
                          renderMarker([cur[0], cur[1]], index)
                      )
                    : renderMarker(marker)}
                {/* stops along the way */}
                {props.stops &&
                    props.stops.map((cur, i) => {
                        // console.log(cur);
                        renderMarker([cur.long, cur.lat], i, true);
                    })}

                <PolyLineOverlay points={locations} />
            </ReactMapGL>
        </div>
    );
}

ProfileFields = (props) => {
  const textBoxClass = textBoxStyles();
  const dispatch = useDispatch();
  const classes = buttonStyles();
  const [gender, setGender] = useState("");
  const [photo, setPhoto] = useState("");
  const [mapOpen, setMapOpen] = useState(false);
  const [focusAddress, setFocusAddress] = useState(false);
  const addressLabel = useRef();
  const geoInput = useRef();

  const moveFocus = (e) => {
    e.preventDefault();
    setFocusAddress(true);
    addressLabel.current.focus();
  };

  const changePhoto = (photo) => {
    setPhoto(photo);
    props.setFieldValue("photo", photo);
  };
  const mapAccess = {
    mapboxApiAccessToken: process.env.REACT_APP_MAPBOX_ACCESS_TOKEN,
  };
  const mapStyle = {
    width: "40vw",
    height: "70vh",
  };
  const queryParams = {
    country: "us",
  };
  const [viewport, setViewport] = useState(Window.innerWidth);
  const [longLat, setLongLat] = useState("");

  const handleChange = (e) => {
    setGender(e.target.value);
    props.setFieldValue("gender", e.target.value);
  };

  const onSelected = (viewport, item) => {
    setMapOpen(true);
    setLongLat({ longitude: viewport.longitude, latitude: viewport.latitude });
    setViewport(viewport);
    props.setFieldValue("location", {
      address: item.place_name,
      latitude: item.center[1],
      longitude: item.center[0],
    });
  };

  useEffect(() => {
    let inputList = document.getElementsByTagName("input");
    // geoInput.current = inputList[2];
    geoInput.current = inputList[2];

    geoInput.current.classList.add(textBoxClass.addressInput);
    geoInput.current.addEventListener("focusin", () => {
      setFocusAddress(true);
    });
    geoInput.current.addEventListener("focusout", () => {
      setFocusAddress(false);
    });
    geoInput.current.addEventListener("change", (e) => {
      addressLabel.current.focus();
    });
    addressLabel.current = geoInput.current;
    // <!-- Just an absolute hack to get the phantom double-parent div to hide on mobile (ruled by media query in app.css) - please forgive / improve -->
    var registerMapParent = document.getElementsByClassName("register-map")[0]
      .parentElement.parentElement;
    registerMapParent.className = "register-map";
    // <!--End absolute hack -->
    // eslint-disable-next-line
  }, []);

  useEffect(() => {
    return () => {
      dispatch(changePage(1));
    };
  }, [dispatch]);

  return (
    <>
      <Field
        style={{ marginTop: "10px" }}
        component={TextField}
        type="name"
        name="firstName"
        className="firstName"
        label="First Name"
        required
      />
      <Field
        style={{ marginTop: "10px" }}
        component={TextField}
        type="name"
        name="lastName"
        className="lastName"
        label="Last Name"
        required
      />

      <div
        style={{
          display: "flex",
          justifyContent: "flex-start",
          marginTop: "-12%",
        }}
      >
        <label
          className={
            textBoxStyles({
              isFocus: focusAddress,
              addressValue: geoInput.current ? geoInput.current.value : null,
            }).addressLabel
          }
          onClick={moveFocus}
        >
          <Typography
            variant={
              focusAddress || (geoInput.current && geoInput.current.value)
                ? "body2"
                : "h6"
            }
          >
            Address*
          </Typography>
        </label>
        <IconButton
          className={`${
            textBoxStyles({
              isFocus: focusAddress,
              addressValue: geoInput.current ? geoInput.current.value : null,
            }).icon
          } toggle-map`}
          aria-label="toggle show map"
          onClick={() => setMapOpen(!mapOpen)}
        >
          <MapIcon />
        </IconButton>
      </div>

      <div className="geocoder-container">
        <Geocoder
          {...mapAccess}
          name="location"
          onSelected={onSelected}
          limit={2}
          viewport={viewport}
          hideOnSelect={true}
          queryParams={queryParams}
          updateInputOnSelect={true}
        />
      </div>

      <ReactMapGL
        className={`${mapOpen ? "" : "hidden"} register-map`}
        id="register-map"
        style={{
          position: "absolute",
          right: 50,
          top: 120,
        }}
        {...mapAccess}
        {...viewport}
        {...mapStyle}
        mapStyle="mapbox://styles/mapbox/streets-v11"
        onViewportChange={(newViewport) => setViewport(newViewport)}
      >
        {longLat && mapOpen && (
          <Marker {...longLat} offsetLeft={-15} offsetTop={-15}>
            <RoomIcon fontSize="large" />
          </Marker>
        )}
      </ReactMapGL>
      <Field
        style={{ marginTop: "10px", marginBottom: "10px" }}
        component={FormControl}
      >
        <InputLabel id="gender-label">Gender</InputLabel>
        <Select
          labelId="gender-label"
          value={gender}
          onChange={handleChange}
          label="Gender"
          name="gender"
        >
          <MenuItem value={"male"}>Male</MenuItem>
          <MenuItem value={"female"}>Female</MenuItem>
          <MenuItem value={"other"}>Other</MenuItem>
        </Select>
      </Field>
      <EventImageUpload
        avatar={photo}
        setPhoto={changePhoto}
        title="Upload a picture for your avatar (optional)"
      />
      <Button
        onClick={(e) => {
          e.target.innerHTML === "Add More Info"
            ? (e.target.innerHTML = "See Less Info")
            : (e.target.innerHTML = "Add More Info");
          let restrictions = document.querySelectorAll(".restriction");
          restrictions.forEach((restriction) => {
            restriction.style.display === "none"
              ? (restriction.style.display = "flex")
              : (restriction.style.display = "none");
          });
        }}
        className={classes.root}
      >
        <Typography variant="h6">Add More Info</Typography>
      </Button>
      <AddAllergens values={props.values} />
      <AddDietaryRestrictions values={props.values} />
      <AddDietaryPreferences values={props.values} />
      <AddChildren values={props.values} />
      <AddPets values={props.values} />
      <Divider style={{ marginTop: 20, marginBottom: 20 }} />

      {props.errMessage && (
        <p style={{ color: "crimson" }}>{props.errMessage}</p>
      )}
      <div
        style={{
          marginTop: "10px",
          display: "flex",
          justifyContent: "space-evenly",
        }}
      >
        <Button
          className={`${classes.root} ${classes.notActive}`}
          onClick={() => dispatch(changePage(1))}
        >
          <Typography variant="h5">Back</Typography>
        </Button>
        <Button
          className={`${classes.root} ${classes.active}`}
          variant="contained"
          color="primary"
          type="submit"
          disabled={props.submitting}
        >
          <Typography variant="h5">
            {props.submitting ? (
              <CircularProgress style={{ color: "white" }} />
            ) : (
              "Submit"
            )}
          </Typography>
        </Button>
      </div>
    </>
  );
}

// https://github.com/visgl/react-map-gl/tree/master/docs

function MapContainer({
  setViewport,
  quakes,
  latitude,
  longitude,
  queryLatitude,
  queryLongitude,
  transition,
  zoom,
  width,
  height,
}) {
  return (
    <div className="map-container" id="map-container">
      <ReactMapGL
        latitude={latitude}
        longitude={longitude}
        zoom={zoom}
        width={width}
        height={height}
        transitionDuration={transition}
        mapboxApiAccessToken={process.env.REACT_APP_MAP_API_TOKEN} // API access token from mapbox account
        mapStyle={process.env.REACT_APP_MAP_STYLE_TOKEN} // style from mapbox studio
        onViewportChange={(viewport) => {
          // When a user interacts with the viewport of the map window,
          setViewport(viewport); // it will adjust the values stored in state refreshing the map
        }}
      >
        <Marker latitude={queryLatitude} longitude={queryLongitude}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
            focusable="false"
            width="24"
            height="29"
            preserveAspectRatio="xMidYMid meet"
            viewBox="0 0 24 24"
          >
            <path
              d="M12 11.5A2.5 2.5 0 0 1 9.5 9A2.5 2.5 0 0 1 12 6.5A2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7z"
              fill="#308257"
            />
          </svg>
        </Marker>
        {quakes.map((quake, index) => {
          let roundedMag = Math.round(quake.properties.mag * 10) / 10;
          return (
            <Marker
              key={index}
              latitude={quake.geometry.coordinates[1]}
              longitude={quake.geometry.coordinates[0]}
            >
              <svg
                className="map-marker"
                width="24"
                height="29"
                viewBox="0 0 24 29"
                fill="none"
                stroke="#00000022"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="7"
                  cy="7"
                  r="7"
                  fill={
                    roundedMag < 1.5
                      ? "#53e0cd"
                      : roundedMag < 3
                      ? "#a5bf65"
                      : roundedMag < 4.5
                      ? "#e4912f"
                      : roundedMag < 6
                      ? "#f46428"
                      : roundedMag < 7.5
                      ? "#f13342"
                      : "#ef2073"
                  }
                />
                <circle
                  cx="7"
                  cy="7"
                  r="6.5"
                  stroke="black"
                  strokeOpacity="0.3"
                />
              </svg>
            </Marker>
          );
        })}
      </ReactMapGL>
    </div>
  );
}

Modal = ({ show, user, place }) => {
  const [local, setLocal] = useState(
    JSON.parse(localStorage.getItem("response")) || [50, 50]
  )
  const [selected, setSelected] = useState(false)

  const [viewPort, setViewPort] = useState({
    latitude: local.lat,
    longitude: local.lng,
    width: "30vw",
    height: "20vh",
    zoom: 12,
  })

  return (
    <div
      className="modal-wrapper"
      style={{
        transform: show ? "translateY(0vh)" : "translateY(-100vh)",
        opacity: show ? "1" : "0",
      }}
    >
      {place && (
        <div className="modal-header">
          <h3>
            {user.businessName} | {user.address}, {user.city}{" "}
            {user.state}, {user.zipcode}
          </h3>
          <p>Phone Number: {user.phone}</p>
          <p>Working Hours: {user.hours}</p>
          <p>Curb Hours: {user.curbHours}</p>
          <a
            href={`https://www.google.com/maps/search/?api=1&query=${place.geometry.location.lat},${place.geometry.location.lng}&query_place_id=${place.place_id}`}
          >
            Get Direction
          </a>
        </div>
      )}
      <div className="modal-body">
        {place ? (
          <div className="mapContainer">
            <ReactMapGL
              {...viewPort}
              mapboxApiAccessToken={mapboxApiToken}
              // mapStyle = "mapbox://styles/ariuka11/ckcgwlimk0ldc1iob71hc4s2h"
              mapStyle="mapbox://styles/ariuka11/ckcgwq30x0a8k1ip68ajqruoo"
              // mapStyle = "mapbox://styles/ariuka11/ckcb5g7ne3rbq1inu8kc7dqye"
              onViewportChange={(viewPort) => {
                setViewPort(viewPort)
              }}
            >
              <Marker
                latitude={place.geometry.location.lat}
                longitude={place.geometry.location.lng}
                offsetLeft={-20}
                className="marker"
              >
                <button
                  onClick={(e) => {
                    e.preventDefault()
                    setSelected(true)
                  }}
                >
                  <img src={location} alt="marker" />
                </button>
              </Marker>
              {selected && (
                <Popup
                  latitude={place.geometry.location.lat}
                  longitude={place.geometry.location.lng}
                  onClose={() => {
                    setSelected(false)
                  }}
                >
                  <h3>{user.address},</h3>
                  <p style={{ fontSize: "1.5rem" }}>
                    {user.city} {user.state}, {user.zipcode}
                  </p>
                </Popup>
              )}
              <div style={{ position: "absolute", right: 0 }}>
                <NavigationControl />
              </div>
              <div style={{ position: "absolute", left: 0 }}>
                <GeolocateControl
                  positionOptions={{ enableHighAccuracy: true }}
                  trackUserLocation={true}
                />
              </div>
            </ReactMapGL>
          </div>
        ) : (
          <div>No Map</div>
        )}
      </div>
    </div>
  )
}

export function MapLayer(props) {

    let clickedOnMarker = false;
    const {onMarkerClick, videoData, totalCities, desktopSize} = props;
    const [viewport, setViewport] = useState({
        latitude: 21.2787,
        longitude: 81.8661,
        width: 'calc(var(--vw, 1vw) * 100)',
        height: 'calc(var(--vh, 1vh) * 100)',
        zoom: (window.innerWidth < desktopSize ? 3 : 4)
    })
    const [mouseDownPoint, setMouseDownPoint] = useState({x: 0, y: 0})
    const [mouseUpPoint, setMouseUpPoint] = useState({x: 0, y: 0})

    const isZoomFriendly = (size) => {
        return (viewport.zoom < 6 && size <= 3) ? false : true;
    }

    useEffect(()=> {
        window.addEventListener('resize', () => {
            let newWidth = window.innerWidth;
            let newHeight = window.innerHeight;
            setViewport(prevState => {return {...prevState, width: newWidth, height: newHeight}});
          });
        window.addEventListener('mousedown', e => setMouseDownPoint({x: e.clientX, y: e.clientY}));
        window.addEventListener('mouseup', e => setMouseUpPoint({x:e.clientX, y:e.clientY}));
    }, [])

    return (
        <div
            onClick = {(e)=> {
                if(!clickedOnMarker &&
                    mouseDownPoint.x === mouseUpPoint.x &&
                    mouseDownPoint.y === mouseUpPoint.y
                    ){
                        onMarkerClick(e, null);
                        clickedOnMarker=false
                    }
                }
            }
        >
        <ReactMapGL
            {...viewport}
            mapboxApiAccessToken={"pk.eyJ1IjoiaGFja2VyZ3JhbSIsImEiOiJjazhpb3B3ODkwNGN4M21tajhzOGRjbXVrIn0.QKSLcjCgwRvSnwkCBXOaHQ"}
            onViewportChange = {viewport => {setViewport(viewport)}}
            mapStyle="mapbox://styles/hackergram/ck8ioxu2f1nss1iqdl9zxwymd"
        >
            {totalCities.map((city, index) => {
                return (
                    <Marker
                        key={index}
                        latitude = {Number(videoData[city].coordinates.latitude)}
                        longitude = {Number(videoData[city].coordinates.longitude)}
                        offsetLeft={-24}
                        offsetTop={-24}
                    >
                        <button className='marker_btn' onClick={e => {onMarkerClick(e, city); clickedOnMarker=true; PageView(city)}}>
                            <motion.div
                                className="marker_txt"
                                style = {{
                                    width: `calc(1rem + 0.2 * ${String(videoData[city].blocks.length)}rem)`,
                                    height: `calc(1rem + 0.2 * ${String(videoData[city].blocks.length)}rem)`,
                                    lineHeight: `calc(1rem + 0.2 * ${String(videoData[city].blocks.length)}rem)`
                                }}
                                initial = {{scale: 1}}
                                animate= {{scale: 1.05}}
                                transition = {{
                                    yoyo: Infinity,
                                    ease: 'easeOut',
                                    duration: 0.5
                                }}
                                ><p>{isZoomFriendly(videoData[city].blocks.length) && videoData[city].blocks.length}</p>
                            </motion.div>
                            {isZoomFriendly(videoData[city].blocks.length) && <p style={{color: '#fffcf2'}}>{city}</p>}
                        </button>
                    </Marker>
                )})
            }
        </ReactMapGL>
        </div>
    )
}