🗺 OSM

components/Map/Map.tsx

@@ -0,0 +1,83 @@
+import React, { useRef, useCallback } from 'react'
+import { View, ViewStyle } from 'react-native'
+import {
+  WebViewLeaflet,
+  WebviewLeafletMessage,
+  WebViewLeafletProps,
+  AnimationType,
+} from '@uclapi/react-native-webview-leaflet'
+import { generate } from 'shortid'
+
+// eslint-disable-next-line quotes
+interface Props extends Omit<WebViewLeafletProps, "onMessageReceived" | "mapMarkers"> {
+  style?: ViewStyle,
+  mapMarkers?: {
+    position: {
+      lat: number,
+      lng: number,
+    },
+    animation?: {
+      delay: number,
+      duration: number,
+      iterationCount: number,
+      type: AnimationType,
+    },
+  }[],
+}
+
+const defaultPosition = {
+  lat: 51.52411,
+  lng: -0.13282,
+}
+
+const defaultMarker = {
+  animation: {
+    delay: 0,
+    duration: 0.5,
+    iterationCount: 1,
+    type: AnimationType.BOUNCE,
+  },
+  icon: `📌`,
+  id: generate(),
+  size: [24, 24],
+}
+
+const Map: React.FC<Props> = ({
+  zoom = 16,
+  style,
+  mapCenterPosition = defaultPosition,
+  mapMarkers,
+}) => {
+  const onMessageReceived = useCallback((message: WebviewLeafletMessage) => console.log(`Map received: `, message), [])
+
+  const map = useRef(null)
+
+  return (
+    <View style={style}>
+      <WebViewLeaflet
+        ref={map}
+        mapLayers={[
+          {
+            baseLayer: true,
+            baseLayerIsChecked: true,
+            baseLayerName: `OpenStreetMap`,
+            url: `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`,
+          },
+        ]}
+        mapCenterPosition={mapCenterPosition}
+        onMessageReceived={onMessageReceived}
+        zoom={zoom}
+        mapMarkers={mapMarkers.map((marker) => ({
+          ...defaultMarker,
+          ...marker,
+          animation: {
+            ...defaultMarker.animation,
+            ...marker?.animation,
+          },
+        }))}
+      />
+    </View>
+  )
+}
+
+export default Map

components/Map/index.ts

@@ -0,0 +1 @@
+export { default } from './Map'

package.json

@@ -58,6 +58,7 @@
     "@react-navigation/material-top-tabs": "^5.2.17",
     "@react-navigation/native": "^5.7.3",
     "@react-navigation/stack": "^5.9.0",
+    "@uclapi/react-native-webview-leaflet": "^5.0.3",
     "axios": "^0.20.0",
     "base-64": "^0.1.0",
     "expo": "^38.0.10",

screens/Timetable/TimetableDetailScreen/TimetableDetailView.tsx

@@ -1,9 +1,8 @@
 import React from "react"
-import { StyleSheet, View } from "react-native"
-import MapView, { Marker } from "react-native-maps"
-
+import { Dimensions, StyleSheet, View } from "react-native"
 import Button from "../../../components/Button"
 import { Page } from "../../../components/Containers"
+import Map from "../../../components/Map/Map"
 import {
   BodyText,
   ErrorText,
@@ -15,7 +14,6 @@ import { LocalisationManager, MailManager, MapsManager } from "../../../lib"
 import type {
   MailManagerComposeAsyncReturnType,
 } from "../../../lib/MailManager"
-import MapStyle from "../../../styles/Map"
 import type { Region, TimetableEvent } from "../../../types/uclapi"
 import type { TimetableNavigationType } from "../TimetableNavigator"
 
@@ -27,6 +25,13 @@ const styles = StyleSheet.create({
   emailButton: {
     marginTop: 10,
   },
+  map: {
+    height: 300,
+    marginBottom: 10,
+    marginLeft: -20,
+    marginTop: 10,
+    width: Dimensions.get(`screen`).width,
+  },
 })
 
 interface Props extends TimetableEvent {
@@ -186,7 +191,17 @@ class TimetableDetailView extends React.Component<Props> {
             &nbsp;so the map may be incorrect.
           </ErrorText>
         )}
-        <MapView
+        <Map
+          style={styles.map}
+          mapCenterPosition={{
+            lat: latitude,
+            lng: longitude,
+          }}
+          mapMarkers={[{
+            position: { lat: latitude, lng: longitude },
+          }]}
+        />
+        {/* <MapView
           style={MapStyle.wideMap}
           initialRegion={initialRegion}
           region={{
@@ -197,7 +212,7 @@ class TimetableDetailView extends React.Component<Props> {
           }}
         >
           <Marker coordinate={{ latitude, longitude }} />
-        </MapView>
+        </MapView> */}
         <Button onPress={this.navigateToLocation({ address, lat, lng })}>
           Directions
         </Button>

screens/Timetable/TimetableScreen/components/WeekView.tsx

@@ -159,10 +159,12 @@ class WeekView extends React.Component<Props> {
       module: {
         name: moduleName,
         module_id: moduleId,
+        lecturer,
       },
       location: {
         name: locationName,
       },
+      session_type_str: sessionTypeStr,
       session_type: sessionType,
       start_time: startTime,
       end_time: endTime,
@@ -178,8 +180,8 @@ class WeekView extends React.Component<Props> {
         moduleCode={moduleId}
         startTime={`${dateISO} ${startTime}`}
         endTime={`${dateISO} ${endTime}`}
-        location={locationName || `TBA`}
-        lecturer={contact || `Unknown Lecturer`}
+        location={(/online/gi).test(sessionTypeStr) ? sessionTypeStr : (locationName || `TBA`)}
+        lecturer={contact || lecturer?.name || `Unknown Lecturer`}
         pastEvent={past}
         key={`${dateISO}-${moduleId}-${startTime}-${endTime}-${sessionType}`}
         navigation={navigation}

tsconfig.json

@@ -14,6 +14,7 @@
     "sourceMap": true,
     "esModuleInterop": true,
     "checkJs": false,
+    "types": []
   },
   "include": [
     "./types/customTypes.d.ts",