Mapbox MapContainer

MapContainer.js

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;