Last active
June 18, 2020 00:50
-
-
Save rpdecks/eac936d2677ae2ed7a84281fd78e1f15 to your computer and use it in GitHub Desktop.
Mapbox MapContainer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
import ReactMapGL, { Marker, Popup } from 'react-map-gl'; | |
import '../App.css'; | |
const mapMarkers = (userData, setSelectedAppointments, setPopupState) => { | |
const nurses = mapNurses(userData.nurses, setSelectedAppointments, setPopupState) || []; | |
const patients = mapPatients(userData.patients, setSelectedAppointments, setPopupState) || []; | |
return nurses.concat(patients) || null; | |
} | |
const handleClick = (user, setSelectedAppointments, setPopupState) => { | |
setSelectedAppointments(user.id) | |
setPopupState(user) // put appt data into state to be displayed on popup's window | |
} | |
// const mapNurses = (nurses, setSelectedAppointments, setPopupState) => { | |
// } looks like mapPatients below... | |
const mapPatients = (patients, setSelectedAppointments, setPopupState) => { | |
if (patients) { | |
return patients.map(patient => { | |
return <Marker | |
key={patient.address} | |
latitude={patient.latitude} | |
longitude={patient.longitude} | |
> | |
<button className='marker-btn' onClick={() => handleClick(patient, setSelectedAppointments, setPopupState)}> | |
{/* get your own images to style your pins. nurses style != patient style */} | |
<img src='patient-pin.png' alt='patient-pin' /> | |
</button> | |
</Marker> | |
}) | |
} | |
} | |
const renderPopup = (stateObj, setPopupState, updateRenderedItem) => { | |
return ( | |
stateObj && ( | |
<Popup | |
className="popup" | |
tipSize={5} | |
anchor="top" | |
longitude={stateObj.longitude} // click on marker feeds lat/long to state which is passed | |
latitude={stateObj.latitude} // here as prop so popup shows up near the selected marker pin | |
closeOnClick={false} | |
onClose={() => setPopupState(null)} | |
> | |
<div> | |
<b>{ stateObj.name }</b><br /> | |
{ stateObj.address }<br /> | |
<button onClick={() => { | |
updateRenderedItem('apptDetails') // change from map view to appt view | |
setPopupState(null) // reset state which effectively closes popup | |
}}> | |
Appt Details | |
</button > | |
</div> | |
</Popup> | |
) | |
); | |
} | |
const MapContainer = props => { | |
return <ReactMapGL | |
{...props.viewport} | |
mapboxApiAccessToken={props.mapboxApiAccessToken} | |
mapStyle='mapbox://styles/rpdecks/ckbczsigy1q5m1ilf2qhgsphi' // lots of map styles available, or customize your own | |
onViewportChange={props.handleViewportChange} // allows to drag map inside grid | |
> | |
{props.userData.user_type !== 'patient' && mapMarkers(props.userData, props.setSelectedAppointments, props.setPopupState)} | |
{/* this renders the marker popup based on popupState which is set by clicking on a marker. If you click, it pops up. If you close, state is wiped. */} | |
{renderPopup(props.popupState, props.setPopupState, props.updateRenderedItem)} | |
</ReactMapGL> | |
} | |
export default MapContainer; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment