Mobile Apps 2 - BSC30922 - Semester 1 & 2

Individual Project

• Lecture Name: Saravanabalagi Ramachandran
• Students Name: Josue Santos
• Student Number: 24061
  
  

Map places in Ireland

Description

The objective of this project is to develop a mobile app to showcase in map places of literary importance in Ireland and surrounding areas, related to poets, patrons, publishers in Ireland who lived in the 16th and 17th century. The requirements are as follows and all requirements carry equal weightage:

• Display markers on the map
  

  • Load places and place types JSON data.
    
  • Display marker for all places using GPS coordinates.
    
  • Use different colours, one for each place type.
    
  • When marker is tapped, place name should be displayed on a pop-up info window.
    

• Show extended information
  

  • When the pop up info window is tapped, show in full screen all details of the place (id, name, Gaelic name, type, GPS coordinates).
    
  • Show the image of the place loaded from the internet**
    
  • [bonus] Show relevant image using any free web service, or search engine.
    
  • Show a back button, when pressed, go back to map view.
    

• Allow filtering by Place Type
  

  • Show dropdown for selecting Place Type, default value should be all.
    
  • When a specific Place Type is selected, show only the places with this Place Type on the map.
    

• Allow custom marker
  

  • Long Press anywhere on map to show a draggable marker.
    
  • Show distance*** to the nearest place (from the downloaded data), and on drag marker, update this info.
    
  • Draw a semi-transparent blue circle around this marker with a radius of 10 km and show number of places within this radius.
    
  • [bonus] Create a slider to control the above radius in km (1-1000, default 10) and on change, update the circle on the map and update number of places within the radius info shown accordingly.
    

URLs:

Make GET request on the following URLs (do NOT download and include in source):

Places

Place Types

Notes:

Bonus requirements do not carry any marks, but will be used to compensate any marks you have lost, if any

*Places data was taken from MACMORRIS

**You can hardcode an array of image URLs and randomly load one of them

***Use Haversine formula to obtain the great-circle Distance between two points on a sphere given their longitudes and latitudes.

Report

The .apk file is not working, although the build was successful and in the Expo Go the application is running perfectly, when I downloaded the .apk and installed on my Android phone it is not opening the app.

This project was very difficult for me because I’ve never developed in React Native, so I had to search and watch videos about most of the basic things and study in parallel while developing the project. I was able to do most of the requirements and for the ones I couldn’t do I tried hard, and the code can be seen in my repository.

An explanation about the requirements I couldn’t accomplish. In the requirements, second section, the third item is about to load a relevant image using any free service, I tried to use Unsplash but for some reason that I couldn’t figure out it is not loading the correct image, for now it is loading a typing machine image. The code is available in the repository at Utils> GetPlacePhoto.

In the last requirements section, I was able to create the draggable marker and the semi-transparent blue circle around it, but when I insert the code to load the places in range, the application got super slow, in a point that I couldn’t even see if it was loading the correct places in range. I remove the code responsible for the places in radius and left just the draggable marker.

It was a fun time and a good learning time developing in React Native even though sometimes it was very frustrating trying to figure out an error, going to the internet and Stack Overflow, for later find out it was a “semicolon or an interrogation mark” that was missing. Jokes a part, developing in React Native made me a bit more focus and brought me attention to the details as I said before, sometimes is just a “silly thing” that is making the application to crash. I enjoyed a lot React Native I hope I can keep learning about it.

In the reference section is the videos and documentation I used for this project and all the code seen is referenced.

Reference

React Native Documentation
React Documentation
Expo Documentation
React Navigation
React Native Maps
React Native Vector Icons
Adrian Twarog - React Navigation
Adrian Twarog - React Native Maps
Mosh Hamedani - Fetch API
Unsplash Documentation
Random Photos website
Search Filter
Dropdown Menu
Circle and draggable mark
Stack Overflow