Skip to main content Link Menu Expand (external link) Document Search Copy Copied
YVR EMA Project Docs

Map Page Components

Table of contents

  1. MapPage
  2. MapMarker
  3. MapSelectedDevices
  4. MapSelectedDeviceElement
  5. MapSelectedDevicesFooter
  6. MapSelection
  7. MapSelectionMarker

MapPage

MapPage is a component which renders the entirety of the map page.

States implemented:

  • mapRef: Holds a reference of the map. Used in the MapSelection component.
  • hasLoaded: Indicates if the map has finished loading.
  • deviceList: A list of all devices in the system. This is set by the useEffect inside this component, based on data grabbed from the Firestore.
    • These devices should have an “id”, “longitude”, “latitude”, and “name” value.
  • noticeElement: Holds the notice element which is displayed on the map. This value is null if there is no notice to be displayed.
  • areaSelectActive: Indicates if the area select is currently enabled.
  • areaSelectDevices: A list of all devices within the selection area.

Props used:

  • selectedDevices: A list of IDs corresponding to devices which the user has selected.
    • Example: [“1”, “9”, “3”]
  • updateSelectedDevices: A function which can be used to overwrite the selectedDevices list.
    • This function is used in another function, condUpdateSelDevices, which either adds or removes a given device from the list depending on whether it’s already present.

Functions implemented:

  • getColouring: Takes a device as an argument and returns a green colour, a black colour, or a blue colour value depending on whether that device’s id is in selectedDevices, or whether that device is in the selection area.
    • This is used in the MapMarker component to determine the colour.
  • condUpdateSelDevices: Takes a device as an argument and adds or removes that device from the selectedDevices list depending on whether it’s already present.
    • This is used in the MapMarker component so that a MapMarker can be clicked on to select/deselect a device.

Noteworthy components used:

  • Map: A component from react-map-gl which renders a Mapbox map. More information here.
  • MapMarker: A component which renders a marker on the map. More information in the MapMarker section of this page.
  • MapSelectedDevices: A component which renders a list of selected devices on the map page. More information in the MapSelectedDevices section of this page.
  • MapNoticeElement: A component which displays a status notice overtop of the map. More information in the MapNoticeElement section of this page.
  • MapSelection: A component which allows the user to select devices by area on the map. More information in the MapSelection section of this page.

MapMarker

MapMarker is a component which renders a pin marker on the map for a device’s location.

Its colour is black if the device is not selected, green if selected, and blue if highlighted within a selection area. It has a red circle in the top left corner if the device has a notification.

MapMarkers should be nestled within the Map component, like so: <Map></Map>. The props given to Map and MapMarker in that example have been omitted for simplicity.

Props used:

  • device: An object representing a device. This device object should have an “id”, “longitude”, “latitude” value.
  • getColouring: A function which takes a device object as an argument and returns a colour value for the device. More information under MapPage’s “functions implemented” section.
  • condUpdateSelDevices: A function which takes a device object as an argument and selects/deselects the device. More information under MapPage’s “functions implemented” section.

Functions implemented:

  • getNotification: Takes a device as an argument and returns either a red CircleFill component (representing a notification badge) or undefined.
    • getNotification’s functionality is not currently implemented, and so it always returns a notification badge for devices with id 3 or 9, and no other device.

Noteworthy components used:

  • Marker: A component from react-map-gl which renders a marker on the map. More information here.
  • CircleFill: A component from react-bootstrap-icons which renders a filled circle. More information here.
  • GeoAltFill: A component from react-bootstrap-icons which renders a map pin. More information here.

MapSelectedDevices

MapSelectedDevices is a component which renders a list of the components which are currently selected. The list can be collapsed by clicking on the header. Devices can be deselected by pressing the red - button next to the device’s name.

States implemented:

  • listOpen: A boolean dictating whether the list is expanded or collapsed.

Props used:

  • selectedDevices: A list of IDs corresponding to devices which the user has selected.
  • removeDevice: A function which takes a device as an argument and removes said device from the selectedDevices list.
  • deviceList: A list of all devices in the system.
  • selectOrDeselectAll: A function which selects or deselects all devices in the system (depending on whether the devices are currently all selected).
  • areAllDevicesSelected: Indicates whether all devices are selected or not.
  • areaSelectActive: Indicates whether area select is active or not.
  • flipAreaSelectActive: Inverts the current state of areaSelectActive.
  • confirmSelection: Adds any devices within the selected area to the selectedDevices list of IDs, and turns off area select.
  • cancelSelection: Wipes the areaSelectDevices value (stored in MapPage), and turns off area select.

Functions implemented:

  • collapseListStyle: Returns an object with a style which differs depending on whether listOpen is true or false.
    • The style object returned by this function is applied to the div which holds the list of devices itself.
    • If listOpen is false, { height: 0 } will be returned, collapsing the list.
    • If listOpen is true, {} will be returned, expanding the list to its default height.
  • collapseSectionStyle: Returns an object with a style which differs depending on whether listOpen is true or false.
    • The style object returned by this function is applied to the div which holds the entire section, including both the header and list.
    • If listOpen is false, { height: “52px” } will be returned, collapsing the section to be the size of just the header.
    • If listOpen is true, {} will be returned, expanding the section to its default height.
  • getDeviceFromId: Takes a device id as an argument and returns the device from the deviceList which has that id.

Noteworthy components used:

  • MapSelectedDeviceElement: A component which is used to render a single device’s list element in the selected device list. More information in the MapSelectedDeviceElement section of this page.
  • MapSelectedDevicesFooter: A component which renders the footer of this component. More information in the MapSelectedDevicesFooter section of this page.

MapSelectedDeviceElement

MapSelectedDeviceElement is a component which renders a single device’s list element in the list of selected devices found in MapSelectedDevices.

This element displays as a red - button, which can be used to remove the given device from the selectedDevices list, and the name of the device.

Props used:

  • device: An object representing a device.
  • removeDevice: A function which takes a device as an argument and removes said device from the selectedDevices list.

Noteworthy components used:

  • DashCircleFill: A component from react-bootstrap-icons which renders a filled circle with a dash inside of it. More information here.

MapSelectedDevicesFooter

MapSelectedDevicesFooter is a component which is used to be a footer for the MapSelectedDevices component.

It contains two options for selecting devices en masse: a select/deselect all devices button, and a button that enables a mode where the user may select devices by an area.

Props used:

  • selectOrDeselectAll: A function which selects or deselects all devices in the system (depending on whether the devices are currently all selected).
  • areAllDevicesSelected: Indicates whether all devices are selected or not.
  • areaSelectActive: Indicates whether area select is active or not.
  • flipAreaSelectActive: Inverts the current state of areaSelectActive.
  • confirmSelection: Adds any devices within the selected area to the selectedDevices list of IDs, and turns off area select.
  • cancelSelection: Wipes the areaSelectDevices value (stored in MapPage), and turns off area select.

Noteworthy components used:

  • BoundingBoxCircles: A component from react-map-gl which renders a bounding box with circles in the corner. More information here.
  • Check2All: A component from react-bootstrap-icons which renders two check marks. More information here.
  • CheckSquare: A component from react-bootstrap-icons which renders a check mark in a box. More information here.
  • XLg: A component from react-bootstrap-icons which renders an X. More information here.
  • XSquare: A component from react-bootstrap-icons which renders an X in a box. More information here.
  • MapSelectedDevicesFooterElement: Renders an element in the footer, with a click function. There is not anything more to this component, so it will not get its own section.

MapSelection

MapSelection is a component which is rendered on the map, and handles the display and functionality of the area select tool, which allows users to select devices by an area.

States implemented:

  • markerACoords: Holds the coords for one corner of the selection area.
  • markerBCoords: Holds the coords for the other corner of the selection area.
  • boxCoordinateList: Holds the coordinates required to make the lines for the selection area’s box.

Props used:

  • mapRef: A reference to the map. This is used to get the current longitude/latitude borders of the current map view, which is used for the starting position of the two selection markers.
  • deviceList: A list of all devices in the system.
  • setAreaSelectDevices: A function which sets the areaSelectDevices value (from the MapPage).

Noteworthy components used:

  • Source: A react-map-gl component which renders a MapBox feature. More information here
  • Layer: A react-map-gl component which determines the style that is used to render a source. More information here.
  • MapSelectionMarker: A marker which can be dragged, and will set coordinates to its new location as it is being dragged. More information in the MapSelectionMarker section of this page.

MapSelectionMarker

MapSelectionMarker is a component which is rendered on the map, and is displayed as a + sign. It’s used to denote a corner of the map selection.

It can be dragged, and it will call a function to update coordinates based on its new location.

Props used:

  • latitude: The latitude at which the marker is displayed.
  • longitude: The longitude at which the marker is displayed.
  • setCoords: A function which is called to update the longitude and latitude of the marker, based on the new location of the marker upon being dragged.
    • Its argument is taken like so: setCoords({latitude: 20.324212, longitude: 57.781236})