react-leaflet#Map JavaScript Examples

function ProviderMap({ mapProps, markers }) {
  return (
    <MapContainer>
      <div>
        <Map
          center={mapProps.coords}
          zoom={mapProps.zoom}
          className="leaflet-map"
        >
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          {markers}
        </Map>
      </div>
    </MapContainer>
  );
}

AddShapesToMap = () => {
  const state = {
    lat: 28.365724898272077,
    lng: -81.55525436402367,
    zoom: 13,
  };
  const position = [state.lat, state.lng];
  return (
    <Map center={position} zoom={state.zoom}>
      <TileLayer
        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Circle
        color="yellow"
        opacity={1}
        fillOpacity={0.8}
        dashArray={12}
        fillColor="cyan"
        radius={500}
        center={position}
      />
    </Map>
  );
}

function MapView(props) {
  const position = [props.values.lat, props.values.long];

  return (
    <Map center={position} zoom={15} style={MapStyle} className="data-test-leaflet-mapview">
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <Marker position={position}>
        <Popup>Start from here</Popup>
      </Marker>
    </Map>
  );
}

function App() {
  /**
   * @lesson-05-todo
   * In order to access our Map instance, we need to create
   * a ref. How can we use React's useRef hook to add a ref?
   */

  useEffect(() => {
    delete L.Icon.Default.prototype._getIconUrl;

    L.Icon.Default.mergeOptions({
      iconRetinaUrl: require( 'leaflet/dist/images/marker-icon-2x.png' ),
      iconUrl: require( 'leaflet/dist/images/marker-icon.png' ),
      shadowUrl: require( 'leaflet/dist/images/marker-shadow.png' ),
    });
  }, []);

  /**
   * @lesson-05-todo
   * Once we create our ref, we need to add a useEffect hook in order
   * to access that ref. How can add our hook and use it to access
   * our Map instance and recreate adding a marker to the map?
   */

  return (
    <Layout>
      <Map center={[38.907132, -77.036546]} zoom={12}>
        <TileLayer
          url={`https://api.mapbox.com/styles/v1/${MAPBOX_USERID}/${MAPBOX_STYLEID}/tiles/256/{z}/{x}/{y}@2x?access_token=${MAPBOX_API_KEY}`}
          attribution="Map data &copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors, <a href=&quot;https://creativecommons.org/licenses/by-sa/2.0/&quot;>CC-BY-SA</a>, Imagery © <a href=&quot;https://www.mapbox.com/&quot;>Mapbox</a>"
        />
        <Marker position={[38.888369, -77.019900]}>
          <Popup>Smithsonian National Air and Space Museum</Popup>
        </Marker>
      </Map>
    </Layout>
  );
}

render() {
    if (this.state.updated) {
      const position = [this.props.lat, this.props.lon];
      return (
        <Map
          center={position}
          zoom={this.state.zoom}
          style={{ height: "400px" }}
        >
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <Marker position={position}>
            <Popup>{this.props.pointer}</Popup>
          </Marker>
        </Map>
      );
    } else {
      return <h4>Loading Map. Please wait.</h4>;
    }
  }

function App() {
  /**
   * @lesson-04-todo
   * When adding our Marker to the map, we notice that there's
   * a conflict that prevents our Marker icons from showing up.
   * What can we do to fix this?
   * See https://github.com/PaulLeCam/react-leaflet/issues/453#issuecomment-410450387
   */

  return (
    <Layout>
      <Map center={[38.907132, -77.036546]} zoom={12}>
        <TileLayer
          url={`https://api.mapbox.com/styles/v1/${MAPBOX_USERID}/${MAPBOX_STYLEID}/tiles/256/{z}/{x}/{y}@2x?access_token=${MAPBOX_API_KEY}`}
          attribution="Map data &copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors, <a href=&quot;https://creativecommons.org/licenses/by-sa/2.0/&quot;>CC-BY-SA</a>, Imagery © <a href=&quot;https://www.mapbox.com/&quot;>Mapbox</a>"
        />
        { /**
           * @lesson-04-todo
           * We want to show our website visitors our favorite
           * local attraction. How can we make use of the Leaflet
           * Marker and Popup component to point our location out?
           */ }
      </Map>
    </Layout>
  );
}

MapWrapper = styled(Map)`
  width: 100%;
  height: 256px;
  z-index: 0;
`

Overview = ({ currentMission, missions, org, setSelectedMission, volunteers }) => {
  const classes = useStyles();

  const position = { lat: org.location?.lat, lng: org.location?.lng };

  const [viewport, setViewport] = useState({
    center: position,
    zoom: 12,
  });

  let filtered = missions?.filter((mission) => {
    return mission?.deliveryLocation?.lat && mission?.deliveryLocation?.lng;
  });

  const { groups, singleMissions } = Mission.getAllGroups(filtered);
  const sortedMissions = {
    groupUid: "",
    groupDisplayName: "Single Missions",
    missions: singleMissions,
  };
  groups.push(sortedMissions);
  useEffect(() => {
    if (currentMission && currentMission.deliveryLocation) {
      setViewport({ ...viewport, center: currentMission.deliveryLocation });
    }
    // eslint-disable-next-line
  }, [currentMission]);

  return (
    <Box height="100%">
      <Map
        viewport={viewport}
        onViewportChanged={setViewport}
        className={`${classes.map} data-test-leaftleft-map`}
      >
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        {filtered?.map((mission) => (
          <MissionMarker
            mission={mission}
            currentUid={currentMission?.uid}
            setSelectedMission={setSelectedMission}
            groups={groups}
            volunteers={volunteers}
          />
        ))}
      </Map>
    </Box>
  );
}

DroneControl = props => {

    const classes = useStyles();
    const state = {
        lat: 26.818123,
        lng: 87.281345,
        zoom: 17,
    };
    const drone = new Icon({
        iconUrl: Green,
        iconSize: [25, 25]
    });
    return <Grid container className={classes.root} >
        <Map
            center={[state.lat, state.lng]}
            zoom={state.zoom}
            style={{ width: '100%', height: '100%', zIndex: 0 }}
            zoomControl={false}
        >
            <Grid container className={classes.data}>
                <Grid item xs={3}>
                    <DroneData />
                </Grid>
                <Grid item xs={3}>

                </Grid>
                <Grid item xs={3}>

                </Grid>
                <Grid item xs={3} container alignItems='flex-end' >
                    <AttitudeIndicator size={120} roll={30} pitch={0} showBox={false} />
                    <HeadingIndicator size={120} heading={0} showBox={false} />
                </Grid>
            </Grid>
            <TileLayer
                attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <RotatedMarker icon={drone} position={[state.lat, state.lng]} rotationAngle={70} rotationOrigin={'center'}/>
            
        </Map>

    </Grid>
}

LocationModal = (props) => {
    const [isOpen, setIsOpen] = useState(false);
    const setLocationModal = props.setLocationModal;
    const position = [props.latitude, props.longitude];

    useEffect(() => {
        setIsOpen(props.isOpen);
    });

    return (
        <MDBModal
            isOpen={isOpen}
            toggle={() => setLocationModal(false)}
            className="modal-notify modal-info text-white"
            size="md"
        >
            <MDBModalHeader>Event Location</MDBModalHeader>
            <MDBModalBody>
                <MDBRow>
                    <MDBCol>
                        <Map
                            className="map-container"
                            center={position}
                            zoom={17}
                        >
                            <TileLayer
                                attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                            />
                            <Marker position={position}>
                                <Popup>Reported Location</Popup>
                            </Marker>
                        </Map>
                    </MDBCol>
                </MDBRow>
            </MDBModalBody>
            <MDBModalFooter>
                <MDBBtn
                    color="secondary"
                    onClick={() => setLocationModal(false)}
                >
                    Close
                </MDBBtn>
            </MDBModalFooter>
        </MDBModal>
    );
}

render() {


    return (

        <div className="cardContainer">
          <Card>
            <CardBody>

              <CardTitle tag="h4" className=" mb-2 mb-xl-2 font-weight-bold">
                Mapa Rio Grande do Sul
              </CardTitle> 

              </CardBody>

              <Map center={center} zoom={7} maxZoom={9}>

                <TileLayer
                  attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />

            <MarkerClusterGroup>
                  {array_obj_confirmed.map(({lat, lng, nome, confirmed, pop_estimada, data}, index) => (
                        <Marker position={[lat, lng]} key={index} icon={new L.NumberedDivIcon({number: confirmed})} attribution="confirmed" >
                            <Popup minWidth={250}>
                              <div className="popUp-container">
                                <div className="popUp-title">{nome}</div>
                                <div className="popUp-body">
                                  <ul>
                                    <li><FontAwesomeIcon icon={faVirus}/> Casos confirmados: {confirmed}</li>
                                    <li><FontAwesomeIcon icon={faUser}/> População Estimada 2019: {pop_estimada}</li>
                                    <li><FontAwesomeIcon icon={faCalendar}/> Data da ultima atualização: {data}</li>  
                                  </ul> 
                                </div>
                              </div>
                            </Popup>
                        </Marker>
                      

                      
                      ))}  
                      </MarkerClusterGroup> 
              </Map>
          </Card> 
        </div>
    );
  }

myMap = (center, positions, style) => {
  return (
    <div
      data-testid="mymap-container"
      //id="mapContainer"
      className={style ? style : "leaflet-container"}
    >
      <Map
        data-testid="mymap-map"
        zoomControl={false}
        center={center}
        zoom={14}
      >
        <LayersControl position="topleft">
          <LayersControl.BaseLayer
            checked="false"
            name="OpenStreetMap.BlackAndWhite"
          >
            <TileLayer
              attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url="https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png"
            />
          </LayersControl.BaseLayer>
          <LayersControl.BaseLayer checked="true" name="OpenStreetMap.Mapnik">
            <TileLayer
              data-testid="mymap-tilelayer"
              attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
          </LayersControl.BaseLayer>
          <FullScreenControl position="topright"></FullScreenControl>
        </LayersControl>

        <Polyline
          data-testid="mymap-polyline"
          color={"var(--color-primary)"}
          positions={positions}
        ></Polyline>
      </Map>
    </div>
  );
}

export default function TestMap() {
	const click = (e) => {
		console.info(e.latlng);
	};

	const [allExhibitors, setAllExhibitors] = useState([]);
	const [searchedExhibitors, setSearchedExhibitors] = useState([]);

	useEffect(() => {
		const loadExhibitors = async () => {
			if (allExhibitors.length > 0) return;
			const response = await fetch(
				"https://p18.jexpo.se/larv/exhibitors?getAttributes=true&filter=[%22workspace:2020%22,%22published:true%22]",
			);
			if (response.ok) {
				const json = await response.json();
				const sorted = json.results.sort((a, b) => {
					return a.name.toUpperCase() > b.name.toUpperCase() ? 1 : -1;
				});
				setAllExhibitors(sorted);

				//TEMP
				const placedExhibitors = sorted.filter((e) => {
					return e?.profile?.booth;
				});
				setSearchedExhibitors(placedExhibitors);
			} else {
				alert("Fetching exhibitors error");
			}
		};
		loadExhibitors();
	}, [allExhibitors.length]);

	const getCoordinates = (booth) => {
		const c = coordinates[booth];
		const ca = [c.lat, c.lng];
		return ca;
	};

	return (
		<Map center={[65.617721, 22.14452]} zoom={18} onClick={click} maxZoom={21}>
			<TileLayer
				attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
				url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
			/>
			<ImageOverlay
				url={fairArea}
				bounds={[
					[65.618571, 22.1426872],
					[65.616855, 22.145657],
				]}
			/>
			{searchedExhibitors.map((exhibitor) => (
				<Marker
					key={exhibitor.id}
					position={getCoordinates(exhibitor.profile.booth)}
					icon={transparentIcon}
				>
					<Popup>{exhibitor.name}</Popup>
				</Marker>
			))}
		</Map>
	);
}

render() {
    var center = [this.state.lat, this.state.lng];

    const basemapsDict = {
      dark: "	https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png",
      osm: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      hot: "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",

    }

    return (
      <Map zoom={this.state.zoom} center={center}>
        <div className="leaflet-bottom leaflet-right buttons-container">
          <Container>
            <Fab
              color="primary"
              aria-label="edit"
              tooltip="Add a new story!"
              onClick={this.showModal}>
              <FaPlus />
            </Fab>
          </Container>
        </div>
        {
          <Modal position={[this.state.lat, this.state.lng]} show={this.state.showModal} onHide={this.closeModal.bind(this)}>

            <form onSubmit={this.handleSubmit}>
              <h3> Add your Story. </h3>
              <label>
                <br />
                      Title:
                      <br />
                <input name="storyTitle" type="text" defaultValue={this.state.storyTitle} onChange={this.handleChange} />
                <br />
              </label>
              <label>
                <br />
                      Body:<br />
                <textarea name="storyBody" defaultValue={this.state.storyBody} onChange={this.handleChange} />
                <br />
              </label>
              <label>
                <br />
                      Add a photo: (optional) <br />
                <input type="file" style={{ marginRight: "-95px" }} ref={this.fileInput} />

                <br />
              </label>
              <br />
              <br />
              <input type="submit" value="Submit" />
            </form>
          </Modal>}


        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url={basemapsDict[this.state.basemap]}
        />
        <Basemap basemap={this.state.basemap} onChange={this.onBMChange} />


        <GeojsonLayer lat={center[0]} lng={center[1]} maxDist={5000} cluster={true} />

        <GeoWikipediaLayer lat={center[0]} lng={center[1]} maxDist={5000} cluster={true} />



        <Marker position={center} icon={MyLocationIcon}>
          <Popup>
            <div>Your Location - latitude: {Number(this.state.lat).toFixed(4)} - longitude: {Number(this.state.lng).toFixed(4)}</div>
          </Popup>
        </Marker>
      </Map>
    );
  }

function App() {
  const mapRef = useRef();

  useEffect(() => {
    delete L.Icon.Default.prototype._getIconUrl;

    L.Icon.Default.mergeOptions({
      iconRetinaUrl: require( 'leaflet/dist/images/marker-icon-2x.png' ),
      iconUrl: require( 'leaflet/dist/images/marker-icon.png' ),
      shadowUrl: require( 'leaflet/dist/images/marker-shadow.png' ),
    });
  }, []);

  useEffect(() => {

    const { current = {} } = mapRef;
    const { leafletElement: map } = current;

    if ( !map ) return;

    map.eachLayer((layer = {}) => {
      const { options } = layer;
      const { name } = options;

      if ( name !== 'Mapbox' ) {
        map.removeLayer(layer);
      };
    });

    /**
     * @lesson-07-todo
     * Using the default options of the Leaflet GeoJSON instance
     * only provides us with markers on our map. Luckily, it
     * includes the ability to pass in a configuration object
     * with options for how we want to set up our locations.
     * What option can we use to add popups to our markers?
     */

    const geoJson = new L.GeoJSON(locations);

    geoJson.addTo(map);
  }, [mapRef]);

  return (
    <Layout>
      <Map ref={mapRef} center={[38.907132, -77.036546]} zoom={12}>
        <TileLayer
          url={`https://api.mapbox.com/styles/v1/${MAPBOX_USERID}/${MAPBOX_STYLEID}/tiles/256/{z}/{x}/{y}@2x?access_token=${MAPBOX_API_KEY}`}
          attribution="Map data &copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors, <a href=&quot;https://creativecommons.org/licenses/by-sa/2.0/&quot;>CC-BY-SA</a>, Imagery © <a href=&quot;https://www.mapbox.com/&quot;>Mapbox</a>"
        />
      </Map>
    </Layout>
  );
}

function SelectedPane() {
  const history = useHistory();
  const { data, selectedIndex, setSelectedIndex, filteredData } = React.useContext(
    AppContext
  );
  const [selectedProvider, setSelectedProvider] = useState([]);

  useEffect(() => {
    if(!!data && selectedIndex != null) {
      const providerData = filteredData !== null ? filteredData : data;
      setSelectedProvider(providerData[selectedIndex]);
    }
  }, [selectedIndex, data, filteredData]);

  const mode = "list";

  const customIcon = L.icon({
    iconUrl: "https://unpkg.com/[email protected]/dist/images/marker-icon.png",
    iconSize: [35, 46],
    iconAnchor: [17, 46],
  });

  const handleCloseClick = () => {
    setSelectedIndex(null);
    history.push(`/`);
  };

  const buildAvailiblityString = (provider) => {
    const days = selectedProvider[OFFER_DAYS];
    const openTime = selectedProvider[OPEN_TIME];
    const closeTime = selectedProvider[CLOSE_TIME];

    return `${!!days ? `${days}: ` : ""}${!!openTime ? openTime : ""}${
      !!closeTime ? `- ${closeTime}` : ""
    }`;
  };

  const verifyUrl = (url) => {
    return url && url.startsWith("http");
  };

  return !data || selectedIndex == null ? null : (
    <SelectedPaneContainer isMapMode={mode === "map"}>
      <ProviderHeader>
        <HeaderTopRow>
          <ProviderName>{selectedProvider[NAME]}</ProviderName>
          <CloseButton onClick={handleCloseClick}>
            <IconClose />
          </CloseButton>
        </HeaderTopRow>
        <a
          href={`https://www.google.co.uk/maps/place/${buildAddressString(
            selectedProvider
          )}`}
          target="_blank"
          rel="noopener noreferrer"
        >
          {buildAddressString(selectedProvider)}
        </a>
      </ProviderHeader>
      <div style={{ height: "50%", width: "100%" }}>
        {selectedProvider["latitude"] && selectedProvider["longitude"] ? (
          <Map
            center={[
              selectedProvider["latitude"],
              selectedProvider["longitude"],
            ]}
            zoom={20}
            className="leaflet-map"
          >
            <TileLayer
              attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <Marker
              position={[selectedProvider.latitude, selectedProvider.longitude]}
              icon={customIcon}
            />
          </Map>
        ) : null}
      </div>
      {buildAvailiblityString(selectedProvider)}
      {selectedProvider[URL] && (
        <Block>
          <a href={selectedProvider[URL]}>{selectedProvider[URL]}</a>
        </Block>
      )}
      {selectedProvider[OFFERS] && (
        <Block>
          <SectionHeading>What's available?</SectionHeading>
          <span>{selectedProvider[OFFERS]}</span>
        </Block>
      )}
      {selectedProvider[INSTRUCTIONS] && (
        <Block>
          <SectionHeading>How to claim</SectionHeading>
          {selectedProvider[INSTRUCTIONS]}
        </Block>
      )}
      <small>
        {verifyUrl(selectedProvider[PROVIDER_SOURCE_URL]) ? (
          <>
            <strong>Source</strong>:{" "}
            <a href={selectedProvider[PROVIDER_SOURCE_URL]}>
              {selectedProvider[PROVIDER_SOURCE_URL]}
            </a>
          </>
        ) : null}
      </small>
    </SelectedPaneContainer>
  );
}

ViewReportModal = (props) => {
    const data = props.data;
    const [isOpen, setIsOpen] = useState(props.isOpen);
    const lat = data.incident.location_lat || 0.0;
    const long = data.incident.location_long || 0.0;
    const position = [lat, long];
    const setViewModal = props.setViewModal;

    useEffect(() => {
        setIsOpen(props.isOpen);
    });

    return (
        <React.Fragment>
            <MDBModal
                isOpen={isOpen}
                toggle={() => setViewModal(false)}
                className="modal-primary modal-notify text-white"
                size="lg"
            >
                <MDBModalHeader>
                    Incident #{data.incident.id} Report
                </MDBModalHeader>
                <MDBModalBody>
                    <MDBRow>
                        <MDBCol size="8">
                            <b>Reported Time : </b>
                            <Moment format="DD/MM/YYYY @ hh:mm:ss">
                                {data.incident.reported_time}
                            </Moment>{" "}
                            (
                            <Moment fromNow>
                                {data.incident.reported_time}
                            </Moment>
                            )
                        </MDBCol>
                        <MDBCol className="text-right text-danger">
                            <b>Not Verified</b>
                        </MDBCol>
                    </MDBRow>
                    <hr></hr>
                    <h4 className="mt-2">Patient Details</h4>
                    <MDBRow className="mt-1">
                        <MDBCol>
                            <b>Name : </b>
                            {data.incident.patient_name}{" "}
                        </MDBCol>
                        <MDBCol>
                            <b>Gender : </b>
                            {data.incident.gender === "m"
                                ? "Male"
                                : "Female"}{" "}
                        </MDBCol>
                    </MDBRow>
                    <MDBRow className="mt-1">
                        <MDBCol>
                            <b>Date of Birth : </b>
                            <Moment format="DD/MM/YYYY">
                                {data.incident.patient_dob}
                            </Moment>
                        </MDBCol>
                        <MDBCol>
                            <b>Status : </b>
                            {data.status.status}
                        </MDBCol>
                    </MDBRow>
                    <MDBRow>
                        <MDBCol>
                            <b>Description :</b>
                            <br></br>
                            <Truncate lines={2} ellipsis={<span>...</span>}>
                                {data.incident.description ||
                                    "No description available"}
                            </Truncate>
                        </MDBCol>
                    </MDBRow>
                    <hr></hr>
                    <h4 className="mt-2">Reported User</h4>
                    <MDBRow className="mt-1">
                        <MDBCol>
                            <b>Name : </b>
                            {data.user.first_name} {data.user.last_name}
                        </MDBCol>
                        <MDBCol>
                            <b>Contact : </b>
                            {data.user.telephone}
                        </MDBCol>
                        <MDBCol>
                            {data.user.email ? (
                                <span>
                                    <b>Email : </b>
                                    {data.user.email}
                                </span>
                            ) : (
                                ""
                            )}
                        </MDBCol>
                    </MDBRow>
                    <hr></hr>
                    <h4 className="mt-2">Incident Location</h4>
                    <MDBRow className="mt-1">
                        <MDBCol>
                            <b>Address : </b>
                            {data.incident.city}
                        </MDBCol>
                        <MDBCol>
                            {data.incident.province} | {data.incident.district}
                        </MDBCol>
                    </MDBRow>
                    {/* does not return the map if both lat and long are 0.0 */}
                    {lat !== 0.0 && long !== 0.0 ? (
                        <MDBRow>
                            <MDBCol>
                                <Map
                                    className="map-container"
                                    center={position}
                                    zoom={17}
                                >
                                    <TileLayer
                                        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                                    />
                                    <Marker position={position}>
                                        <Popup>Reported Location</Popup>
                                    </Marker>
                                </Map>
                            </MDBCol>
                        </MDBRow>
                    ) : (
                        ""
                    )}
                </MDBModalBody>
                <MDBModalFooter>
                    <MDBBtn
                        color="secondary"
                        onClick={() => setViewModal(false)}
                    >
                        Close
                    </MDBBtn>
                </MDBModalFooter>
            </MDBModal>
        </React.Fragment>
    );
}

MissionView = props => {
    const dispatch = useDispatch();
    const classes = useStyles();
    const modalStyle = getModalStyle();
    const [openMissionList, setOpenMissionList] = React.useState(false);
    const [draggable, setDraggable] = React.useState(false);
    const [create, setCreate] = React.useState(false);
    const [currWaypointIndex, setCurrWaypointIndex] = React.useState(0);
    const [action, setAction] = React.useState("create");
    
    const openMissionDetail = useSelector(({ mission }) => mission.missionDetail);
    const state = {
        lat: 26.818123,
        lng: 87.281345,
        zoom: 17,
    }
    const initialMissionDetail = { name: '', radius: null, speed: null, home: '', destination: '', waypoints: [] };
    const [missionDetail, setMissionDetail] = React.useState({ name: '', radius: null, speed: null, home: '', destination: '', waypoints: [] });
    

    //to update the localstate by the missionDetails sourced from server
    useEffect(() => {
        if (openMissionDetail !== null) {
            setMissionDetail(openMissionDetail);
            setCreate(true);
        }
    }, [openMissionDetail]);

    //close the modal after choosing the mission
    const handleCloseMission = () => {
        setAction('create');
        setOpenMissionList(false);
    };

    //callback function to update position after the marker is dragged
    const updatePosition = (event, index) => {

        if (event.target !== undefined && event.target !== null) {
            console.log(event.target.getLatLng());
            const m = { ...missionDetail };
            m.waypoints[index].lat = event.target.getLatLng().lat;
            m.waypoints[index].lng = event.target.getLatLng().lng;
            setMissionDetail(m);
        }
    }

    //callback function for placing markers on the map and update the latitude and longitude of the waypoint
    const handleClick = (event) => {

        if (create) {
            if (event.latlng !== undefined && event.latlng !== null) {
                console.log(event.latlng);

                const m = { ...missionDetail };

                m.waypoints.push({
                    altitude: 0, radius: 0,
                    action: 'waypoint', lat: event.latlng.lat,
                    lng: event.latlng.lng
                });
                // console.log(mission, m);
                setCurrWaypointIndex(m.waypoints.length - 1);
                setMissionDetail(m);

            }
        }
    }

    //on create mission
    const startMissionCreation = () => {
        setDraggable(true);
        setCreate(true);
        setAction('create');
    }


    //callback function for click on confirm button
    const createUpdateMission = () => {
        console.log("Create Mission");
        setCreate(false);
        setDraggable(false);
        setMissionDetail(initialMissionDetail);
        dispatch(actions.createUpdateMission(missionDetail,action));
        setAction('create');
    }

    //callback function for change in parameter of a particular waypoint provided by index
    const onChange = (event, key) => {
        console.log(event.target.value, key);
        console.log(currWaypointIndex);
        const m = {
            ...missionDetail,
        };
        m.waypoints[currWaypointIndex] = {
            ...m.waypoints[currWaypointIndex],
            [key]: event.target.value
        }
        console.log(m.waypoints[currWaypointIndex]);
        setMissionDetail(m);

    }

    //callback function for updating the change in details other than waypoints
    const onChangeMission = (event, key) => {
        const m = {
            ...missionDetail,
            [key]: event.target.value
        };
        console.log("value of m", m)
        setMissionDetail(m);

    }

    //callback function for click on a marker
    const onClick = (index) => {
        console.log("Marker Clicked", index);
        setCurrWaypointIndex(index);
        console.log(index, currWaypointIndex, "current waypoint")
    }

    //open mission list in a modal
    const openMission = () => {
        setOpenMissionList(true);
    }

    //set the mission details and waypoints to intial value of empty
    const onCancel = () => {
        setAction('create');
        setCreate(false);
        setDraggable(false);
        setMissionDetail(initialMissionDetail);
    }

    const selectMission = (missionId) => {
        setAction('edit');
        console.log(missionId);
        dispatch(actions.getMission(missionId));
        setOpenMissionList(false);
    }
    return (
        <Grid container className={classes.root}>
            <Grid item xs={3}>
                <MissionData data-test="missionData" 
                action={action} //touched
                onCancel={onCancel} 
                onChangeMission={onChangeMission} //done 
                onChange={onChange}  //done
                createUpdateMission={createUpdateMission} 
                mission={missionDetail} //done
                waypoint={missionDetail.waypoints[currWaypointIndex]} 
                onCreateMission={startMissionCreation} 
                openMission={openMission} //done
                create={create} //done  
                /> 
            </Grid>
            <Grid item xs={9}>
                <Map
                    center={[state.lat, state.lng]}
                    zoom={state.zoom}
                    style={{ width: '100%', height: '100%' }}
                    zoomControl={false}
                    onClick={handleClick} data-test="mapComp"
                >

                    <TileLayer
                        attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                    {missionDetail !== null && missionDetail !== undefined ?
                        missionDetail.waypoints.map((miss, i, array) => {
                            // console.log(miss);
                            return (<span key={i}><Marker
                                draggable={draggable}
                                onDragend={(event) => updatePosition(event, i)}
                                position={[miss.lat, miss.lng]}
                                data-test="markerComp"
                                onClick={() => onClick(i)}>
                                <Popup minWidth={90}>
                                    <span >
                                        <span>{miss.action} </span>
                                        <br />
                                        <span>Alt: {miss.altitude}m</span><br />
                                    </span>
                                </Popup>
                            </Marker>
                                {/* for lines between markers */}
                                {array[i - 1] ? <Polyline weight={1} positions={[
                                    [array[i - 1].lat, array[i - 1].lng], [array[i].lat, array[i].lng],
                                ]} color={'red'} /> : null}

                            }
                            </span>
                            )
                        }) : null
                    }

                    <ZoomControl position="topright" />
                </Map>
            </Grid>
            <Modal
                aria-labelledby="transition-modal-title"
                aria-describedby="transition-modal-description"
                className={classes.modal}
                open={openMissionList}
                onClose={handleCloseMission}
                closeAfterTransition
                data-test="modalComp"
            >
                <Fade in={openMissionList}>
                    <div className={classes.paper} style={modalStyle}>
                        <MissionList abort={handleCloseMission}  select={selectMission} data-test="missionList" />

                    </div>
                </Fade>
            </Modal>
        </Grid>)
}

// to aggregate data by state+country and sum up metrics


export default function MapContainer(props) {
  const {
    setDashboardData,
    setRootData,
    setPan,
    pan
  } = props;

  const [indiaData, setIndiaData] = useState(null);

  const [stateData, setStateData] = useState(null);
  const [countrySummary, setCountrySummary] = useState(null);

  const [districtData, setDistrictData] = useState(null);

  const [internationalData, setInternationalData] = useState([]);
  const [countryStats, setCountryStats] = useState(null);
  const [worldStats, setWorldStats] = useState(null);

  const [viewTestCenters, setViewTestCenters] = useState(false);
  const [showInfoHead, setShowInfoHead] = useState(true);
  const [firstLoad, setFirstLoad] = useState(true);

  const [mapPan, setMapPan] = useState(pan);

  useEffect(()=>{
    setMapPan(pan)
    console.log("Pan: " + JSON.stringify(pan.geoJson))
  },[pan])

  useEffect(()=>{
    setRootData({data: internationalData})
  },[internationalData])
  useEffect(() => {
    fetch("https://stats.coronasafe.live/covid_data_json/kerala_covid_data.json")
      .then(res => res.json())
      .then(
        result => {
          console.log("Received Response" + result);
          setDistrictData(result);
          }
      );
    
    fetch("https://stats.coronasafe.live/covid_data_json/other_countries_covid_data.json")
      .then(res => res.json())
      .then(
        result => {
          setInternationalData(result.reduce((acc,cur) => {
            return {
              ...acc,
              [cur.Country]:{
                geojson_feature: JSON.parse(cur.geo_json_feature.split("'").join("\"")), 
                confirmed: cur['Confirmed'], 
                deceased: cur['Deaths'],
                recovered: cur['Recovered'], 
                active: cur['Active'],
                latitude: cur['Lat'],
                longitude: cur['Long_']
              }
            }
          },{}));
          }
      );

  }, []);

  const findRadius = cases => {
    return (Math.cbrt(cases)) * 1500
  }

  const geoJSONStyle = (feature) => {return {
    color: '#FFFFFF',
    weight: 1,
    fillOpacity: 0.5,
    fillColor: '#A73829',
  }}
  const renderTooltip = (feature) => {
    return `Details Unavailable`
  }
  const onEachFeature = (feature, layer) => {
    const tooltipChildren = renderTooltip(feature);
    const popupContent = `<Popup> ${tooltipChildren} </Popup>`
    layer.bindPopup(popupContent)
  }
  const focusLocation = (latlng) => {
    const [closest,closestData] = findClosest(latlng, internationalData);
    const newGeo = closestData.geojson_feature
    setPan({geoJson:newGeo, location:closest})
    setDashboardData({...closestData, name: closest})
  }
  return (
      <Map 
        className="h-full w-full md:w-4/5 fixed" 
        center={mapPan.position} 
        zoom={mapPan.zoom} 
        minZoom={2}
        maxBounds={[[-85,-180],[85,180]]}
        onClick={e=>{focusLocation(e.latlng)}}
        onMoveend={e=>{focusLocation(e.target.getCenter())}}
      >
        {
          mapPan.geoJson &&
          <GeoJSON
            key={mapPan.location}
            data={mapPan.geoJson}
            style={geoJSONStyle}
            onEachFeature={onEachFeature}
          />
        }
        <TileLayer
          attribution='&amp;copy <a href="https://carto.com">Carto</a>'
          url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
        />
        {districtData &&
          Object.entries(districtData.data).map(([location,data]) =>
            // console.log(location.state + "|" + JSON.stringify(indiaData.stateData[location.state]))
              <Circle
                key={location}
                center={[data.latitude, data.longitude]}
                fillColor="#d14f69"
                fillOpacity={0.6}
                stroke={false}
                radius={15000 + findRadius(data.active)}
              />
          )}
        {Object.entries(internationalData).map(([country,location], index) => {
          if (location.country_region === "India") {
            if (countryStats === null) setCountryStats(location);
            return null;
          }
          return (
            <Circle
              key={
                country
              }
              center={{lat: location.latitude, lng: location.longitude}}
              fillColor="#d14f69"
              fillOpacity={0.6}
              stroke={false}
              radius={15000 + findRadius(location.confirmed)}
              onMouseOver={e => {
                e.target.openPopup();
              }}
            >
              <Popup>
                {country}
                {location.confirmed}
                {/* <h3>
                  {location.province_state
                    ? location.province_state
                    : location.country_region}
                </h3>
                {location.province_state && (
                  <span>
                    {location.country_region}
                    <br />
                  </span>
                )}
                    Cases: {location.confirmed}
                    Cured/Discharged: {location.recovered}
                    Deaths: {location.deaths}
                <hr />
                Last Update: {location.last_update}
                <br /> */}
              </Popup>
            </Circle>
          );
        })}
        {viewTestCenters &&
          testCenters.map(testCenter => {
            return (
              <Marker
                key={testCenter.institution}
                position={[testCenter.latitude, testCenter.longitude]}
                onMouseOver={e => {
                  e.target.openPopup();
                }}
              >
                <Popup>
                  <h3>{testCenter.institution}</h3>
                  <a
                    href={
                      "https://www.google.com/maps/search/?api=1&query=" +
                      testCenter.institution +
                      "&query_place_id=" +
                      testCenter.place_id
                    }
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Open in Maps
                  </a>
                </Popup>
              </Marker>
            );
          })}
      </Map>
  );
}

function DeliveryStep({ dispatch, state }) {
  const classes = useStyles();
  const profile = useSelector((state) => state.firebase.profile);
  const org = useOrganization();
  const [validate, setValidate] = useState(false);
  const [showSignup, setShowSignup] = useState(false);

  async function submit() {
    setValidate(true);

    if (!state.details.location) {
      if (state.details.curbsidePickup) {
        dispatch({ type: "UPDATE_DETAILS", payload: { location: org.location, instructions: "" } });
      } else {
        dispatch({ type: "ERROR", payload: "Please fill out the required fields" });
        return;
      }
    }

    if (profile.isEmpty || !profile.phoneNumber) {
      setShowSignup(true);
      return;
    }

    const { displayName, phoneNumber, uid } = profile;
    dispatch({ type: "UPDATE_USER", payload: { uid, displayName, phoneNumber } });

    dispatch({ type: "NEXT" });
  }

  if (showSignup) {
    return <SignupStep onBack={() => setShowSignup(false)} dispatch={dispatch} />;
  }

  return (
    <div>
      <Body1 className={classes.body1}>
        We offer curbside pick up on Sunday mornings. If you are unable to pick up, volunteers carry
        out deliveries once a week on weekends.
      </Body1>
      <H2 align="left" color="textPrimary" gutterBottom>
        Delivery / Pick Up Details
      </H2>
      <FormControlLabel
        className={classes.checkBox}
        control={
          <Checkbox
            color="primary"
            checked={state.details.curbsidePickup}
            onChange={(e) => {
              const checked = e.target.checked;
              dispatch({ type: "UPDATE_DETAILS", payload: { curbsidePickup: checked } });
            }}
            name="curbsidePickup"
          />
        }
        label="I can pick up from curbside location"
      />
      {state.details.curbsidePickup ? (
        <>
          <CurbsideDetailsPaper elevation={0}>
            <Grid container spacing={2} direction="column">
              <Grid item container spacing={1} wrap="nowrap">
                <GridIconStyled item>
                  <LocationOnIcon />
                </GridIconStyled>
                <Grid item>
                  <H4>Pick Up Location:</H4>
                  <Body1>{org.location.label}</Body1>
                  <Body1>{org.location.address}</Body1>
                </Grid>
              </Grid>

              <Grid item container spacing={1} wrap="nowrap">
                <GridIconStyled item>
                  <AccessTime />
                </GridIconStyled>
                <Grid item>
                  <H4>Pick Up Time:</H4>
                  <Body1>Sunday morning between 8:00am–11:00am</Body1>
                </Grid>
              </Grid>
            </Grid>
          </CurbsideDetailsPaper>
          <Box height="200px">
            <Map center={org.location} zoom={16} style={{ width: "100%", height: "100%" }}>
              <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
              <Marker position={org.location} />
            </Map>
          </Box>
        </>
      ) : (
        <>
          <AddressAutocomplete
            label="Location"
            defaultLocation={org.location ? org.location : state.details.location}
            onChangeLocation={(location) =>
              dispatch({ type: "UPDATE_DETAILS", payload: { location } })
            }
            showMap={true}
            error={validate && !state.details.location}
            required
          />
          <TextField
            className={classes.textArea}
            fullWidth
            helperText="By default we leave food boxes at your door"
            label="Drop off Instructions / Comments"
            multiline
            name="instructions"
            onChange={(e) =>
              dispatch({ type: "UPDATE_DETAILS", payload: { instructions: e.target.value } })
            }
            placeholder="Knock loudly, leave in front, etc."
            rows={5}
            value={state.details.instructions}
            variant="outlined"
          />
          <DeliveryCautionPaper elevation={0}>
            <Grid container spacing={2} direction="column">
              <Grid item container spacing={1} wrap="nowrap">
                <GridIconStyled item>
                  <LocationOnIcon />
                </GridIconStyled>
                <Grid item>
                  <Box paddingBottom="16px">
                    <Body1>
                      Please note that our delivery service is a pilot program and should only be
                      used for <b>extreme cases</b>, such as for the immunocompromised, as our
                      volunteer services are limited.
                    </Body1>
                  </Box>
                  <Body1>
                    <b>
                      Delivery is currently only available to those in Studio City at this time.
                    </b>
                    This covers South of the 101 Freeway, West of Lankershim Blvd., East of Fulton
                    Ave. and North of Mulholland.
                  </Body1>
                </Grid>
              </Grid>
            </Grid>
          </DeliveryCautionPaper>
        </>
      )}

      <NavigationButtons
        onBack={() => dispatch({ type: "BACK" })}
        nextText="continue"
        onNext={submit}
      />
    </div>
  );
}

function App() {
  const mapRef = useRef();

  useEffect(() => {
    delete L.Icon.Default.prototype._getIconUrl;

    L.Icon.Default.mergeOptions({
      iconRetinaUrl: require( 'leaflet/dist/images/marker-icon-2x.png' ),
      iconUrl: require( 'leaflet/dist/images/marker-icon.png' ),
      shadowUrl: require( 'leaflet/dist/images/marker-shadow.png' ),
    });
  }, []);

  useEffect(() => {

    const { current = {} } = mapRef;
    const { leafletElement: map } = current;

    if ( !map ) return;

    map.eachLayer((layer = {}) => {
      const { options } = layer;
      const { name } = options;

      if ( name !== 'Mapbox' ) {
        map.removeLayer(layer);
      };
    });

    const geoJson = new L.GeoJSON(locations, {
      onEachFeature: (feature = {}, layer) => {
        /**
         * @lesson-08-answer
         * Now that we added our deliveryRadius to our GeoJSON locations, we
         * can now access it on our map. Using that, we can create a Circle
         * for each location that delivers and use mouseover and mouseout
         * events to add those Circles to the map on hover.
         */

        const { properties = {}, geometry = {}  } = feature;
        const { name, delivery, deliveryRadius, tags, phone, website } = properties;
        const { coordinates } = geometry;

        let deliveryZoneCircle;

        if ( deliveryRadius ) {
          deliveryZoneCircle = L.circle(coordinates.reverse(), {
            radius: deliveryRadius
          });
        }

        const popup = L.popup();

        const html = `
          <div class="restaurant-popup">
            <h3>${name}</h3>
            <ul>
              <li>
                ${tags.join(', ')}
              </li>
              <li>
                <strong>Delivery:</strong> ${delivery ? 'Yes' : 'No'}
              </li>
              <li>
                <strong>Phone:</strong> ${phone}
              </li>
              <li>
                <strong>Website:</strong> <a href="${website}">${website}</a>
              </li>
            </ul>
          </div>
        `;

        popup.setContent(html)

        layer.bindPopup(popup);

        layer.on('mouseover', () => {
          if ( deliveryZoneCircle ) {
            deliveryZoneCircle.addTo(map);
          }
        });

        layer.on('mouseout', () => {
          if ( deliveryZoneCircle ) {
            deliveryZoneCircle.removeFrom(map);
          }
        });
      }
    });

    geoJson.addTo(map);
  }, [mapRef]);

  return (
    <Layout>
      <Map ref={mapRef} center={[38.907132, -77.036546]} zoom={12}>
        <TileLayer
          url={`https://api.mapbox.com/styles/v1/${MAPBOX_USERID}/${MAPBOX_STYLEID}/tiles/256/{z}/{x}/{y}@2x?access_token=${MAPBOX_API_KEY}`}
          attribution="Map data &copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors, <a href=&quot;https://creativecommons.org/licenses/by-sa/2.0/&quot;>CC-BY-SA</a>, Imagery © <a href=&quot;https://www.mapbox.com/&quot;>Mapbox</a>"
        />
      </Map>
    </Layout>
  );
}

AddressInput = (props) => {
  const classes = useStyles();
  const { disabled, error, location, onClear, placeholder, setLocation, showMap, value } = props;

  const [zoom, setZoom] = useState(0);
  const [position, setPosition] = useState([0, 0]);

  const placesRef = useRef();
  const setRef = (ref) => {
    placesRef.current = ref;
  };

  const handleLocation = (query) => {
    if (query.suggestion) {
      const { latlng, value } = query.suggestion;
      setLocation({
        address: value,
        lat: latlng.lat,
        lng: latlng.lng,
      });
    }
  };

  useEffect(() => {
    if (value && placesRef?.current) {
      placesRef.current.setVal(value);

      if (zoom === 0) {
        setZoom(16);
      }
    }
  }, [placesRef, value, disabled, zoom]);

  useEffect(() => {
    if (location) {
      if (zoom === 0) {
        setZoom(16);
      }
      if (location.lat !== position[0]) {
        setPosition([location.lat, location.lng]);
      }
    }
  }, [location, zoom, position]);

  const marker = location ? (
    <Marker
      position={location}
      draggable={true}
      riseOnHover={true}
      onMoveEnd={(e) => {
        setLocation({
          address: location.address,
          lat: e.target._latlng.lat,
          lng: e.target._latlng.lng,
        });
      }}
    ></Marker>
  ) : null;

  return (
    <div style={error ? { border: "solid red" } : {}}>
      <>
        {showMap && (
          <>
            <Box textAlign="left">
              <small>Input location and move the marker to correct address</small>
            </Box>
            <Box width="100%" height="200px" position="relative">
              <Box className={disabled && classes.disabledMap}></Box>
              <Map center={position} zoom={zoom} style={{ width: "100%", height: "100%" }}>
                <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
                {marker}
              </Map>
            </Box>
          </>
        )}
        {disabled ? (
          <TextField
            disabled
            value={value}
            fullWidth
            placeholder={placeholder || "Search address"}
            variant="outlined"
          />
        ) : (
          <AlgoliaPlaces
            placeholder={placeholder || "Search address"}
            name={location}
            options={{
              appId: ALGOLIA_APP_ID,
              apiKey: ALGOLIA_API_KEY,
            }}
            onChange={(query) => handleLocation(query)}
            onLimit={({ message }) => message && console.log(message)}
            onClear={onClear}
            placesRef={setRef}
          />
        )}
      </>
    </div>
  );
}

WeatherMap = ({ zoom, dark }) => {
  const MAP_CLICK_DEBOUNCE_TIME = 200; //ms
  const {
    setMapPosition,
    panToCoords,
    setPanToCoords,
    browserGeo,
    mapGeo,
    mapApiKey,
    getMapApiKey,
    markerIsVisible,
    animateWeatherMap,
  } = useContext(AppContext);
  const mapRef = useRef();

  const mapClickHandler = useCallback(
    debounce((e) => {
      const { lat: latitude, lng: longitude } = e.latlng;
      const newCoords = { latitude, longitude };
      setMapPosition(newCoords);
    }, MAP_CLICK_DEBOUNCE_TIME),
    [setMapPosition]
  );

  const [mapTimestamps, setMapTimestamps] = useState(null);
  const [mapTimestamp, setMapTimestamp] = useState(null);
  const [currentMapTimestampIdx, setCurrentMapTimestampIdx] = useState(0);

  const MAP_TIMESTAMP_REFRESH_FREQUENCY = 1000 * 60 * 10; //update every 10 minutes
  const MAP_CYCLE_RATE = 1000; //ms

  const getMapApiKeyCallback = useCallback(() => getMapApiKey(), [
    getMapApiKey,
  ]);

  useEffect(() => {
    getMapApiKeyCallback().catch((err) => {
      console.log("err!", err);
    });

    const updateTimeStamps = () => {
      getMapTimestamps()
        .then((res) => {
          setMapTimestamps(res);
        })
        .catch((err) => {
          console.log("err", err);
        });
    };

    const mapTimestampsInterval = setInterval(
      updateTimeStamps,
      MAP_TIMESTAMP_REFRESH_FREQUENCY
    );
    updateTimeStamps(); //initial update
    return () => {
      clearInterval(mapTimestampsInterval);
    };
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  // Pan the screen to a a specific location when `panToCoords` is updated with grid coordinates
  useEffect(() => {
    if (panToCoords && mapRef.current) {
      const { leafletElement } = mapRef.current;
      leafletElement.panTo([panToCoords.latitude, panToCoords.longitude]);
      setPanToCoords(null); //reset back to null so we can observe a change next time its fired for the same coords
    }
  }, [panToCoords, mapRef]); // eslint-disable-line react-hooks/exhaustive-deps

  const { latitude, longitude } = browserGeo || {};

  useEffect(() => {
    if (mapTimestamps) {
      setMapTimestamp(mapTimestamps[currentMapTimestampIdx]);
    }
  }, [currentMapTimestampIdx, mapTimestamps]);

  // cycle through weather maps when animated is enabled
  useEffect(() => {
    if (mapTimestamps) {
      if (animateWeatherMap) {
        const interval = setInterval(() => {
          let nextIdx;
          if (currentMapTimestampIdx + 1 >= mapTimestamps.length) {
            nextIdx = 0;
          } else {
            nextIdx = currentMapTimestampIdx + 1;
          }
          setCurrentMapTimestampIdx(nextIdx);
        }, MAP_CYCLE_RATE);
        return () => {
          clearInterval(interval);
        };
      } else {
        setCurrentMapTimestampIdx(mapTimestamps.length - 1);
      }
    }
  }, [currentMapTimestampIdx, animateWeatherMap, mapTimestamps]);

  if (!hasVal(latitude) || !hasVal(longitude) || !zoom || !mapApiKey) {
    return (
      <div className={`${styles.noMap} ${dark ? styles.dark : styles.light}`}>
        <div>Cannot retrieve map data.</div>
        <div>Did you enter an API key?</div>
      </div>
    );
  }
  const markerPosition = mapGeo ? [mapGeo.latitude, mapGeo.longitude] : null;

  return (
    <Map
      ref={mapRef}
      center={[latitude, longitude]}
      zoom={zoom}
      style={{ width: "100%", height: "100%" }}
      attributionControl={false}
      touchZoom={true}
      dragging={true}
      fadeAnimation={false}
      onClick={mapClickHandler}
    >
      <AttributionControl position={"bottomleft"} />
      <TileLayer
        attribution='© <a href="https://www.mapbox.com/feedback/">Mapbox</a>'
        url={`https://api.mapbox.com/styles/v1/mapbox/${
          dark ? "dark-v10" : "light-v10"
        }/tiles/{z}/{x}/{y}?access_token={apiKey}`}
        apiKey={mapApiKey}
      />
      {mapTimestamp ? (
        <TileLayer
          attribution='<a href="https://www.rainviewer.com/">RainViewer</a>'
          url={`https://tilecache.rainviewer.com/v2/radar/${mapTimestamp}/{size}/{z}/{x}/{y}/{color}/{smooth}_{snow}.png`}
          opacity={0.3}
          size={512}
          color={6} // https://www.rainviewer.com/api.html#colorSchemes
          smooth={1}
          snow={1}
        />
      ) : null}
      {markerIsVisible && markerPosition ? (
        <Marker position={markerPosition} opacity={0.65}></Marker>
      ) : null}
    </Map>
  );
}

function App() {
  const mapRef = useRef();

  useEffect(() => {
    delete L.Icon.Default.prototype._getIconUrl;

    L.Icon.Default.mergeOptions({
      iconRetinaUrl: require( 'leaflet/dist/images/marker-icon-2x.png' ),
      iconUrl: require( 'leaflet/dist/images/marker-icon.png' ),
      shadowUrl: require( 'leaflet/dist/images/marker-shadow.png' ),
    });
  }, []);

  useEffect(() => {

    const { current = {} } = mapRef;
    const { leafletElement: map } = current;

    if ( !map ) return;

    map.eachLayer((layer = {}) => {
      const { options } = layer;
      const { name } = options;

      if ( name !== 'Mapbox' ) {
        map.removeLayer(layer);
      };
    });

    const geoJson = new L.GeoJSON(locations, {
      onEachFeature: (feature = {}, layer) => {
        /**
         * @lesson-08-todo
         * Being able to access each feature gives us the ability to
         * access all of the data that we've created in our GeoJSON
         * file. How can we use it to show delivery zones on the map?
         */

        const { properties = {} } = feature;
        const { name, delivery, tags, phone, website } = properties;

        const popup = L.popup();

        const html = `
          <div class="restaurant-popup">
            <h3>${name}</h3>
            <ul>
              <li>
                ${tags.join(', ')}
              </li>
              <li>
                <strong>Delivery:</strong> ${delivery ? 'Yes' : 'No'}
              </li>
              <li>
                <strong>Phone:</strong> ${phone}
              </li>
              <li>
                <strong>Website:</strong> <a href="${website}">${website}</a>
              </li>
            </ul>
          </div>
        `;

        popup.setContent(html)

        layer.bindPopup(popup);
      }
    });

    geoJson.addTo(map);
  }, [mapRef]);

  return (
    <Layout>
      <Map ref={mapRef} center={[38.907132, -77.036546]} zoom={12}>
        <TileLayer
          url={`https://api.mapbox.com/styles/v1/${MAPBOX_USERID}/${MAPBOX_STYLEID}/tiles/256/{z}/{x}/{y}@2x?access_token=${MAPBOX_API_KEY}`}
          attribution="Map data &copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors, <a href=&quot;https://creativecommons.org/licenses/by-sa/2.0/&quot;>CC-BY-SA</a>, Imagery © <a href=&quot;https://www.mapbox.com/&quot;>Mapbox</a>"
        />
      </Map>
    </Layout>
  );
}