The map has three pages: Basketball Location, Airbnb Location and Tourist Destination.  It is originally created for my grad school applicaiton, but I have been updating the project with new knowledge and idea ever since.

Overview

The map is created with Leaflet.js. I also set up a PostgreSQL on VM to host API and store data I use for this project. 

Demonstrations of the app can be seen in the GIFs below.

Basketball Court Finder:

Users can pinpoint a location on the map to display the five nearest basketball courts or select from the dropdown list to filter courts by districts.

Airbnb Finder With Superhost Filter:

An Airbnb heat map (quantity) is displayed upon loading.  When clicked, the location of the 5 nearest Airbnb units will be displayed.

Four criteria including sanitation score, price value score, review score accuracy score, and location score are used as toggle filters for superhost selection (if the score is above 4.8). 

The Aribnb data is obtained from the internet and it is solely used for simulation purposes.

Tourist Attraction, Geocoding, and Collaborative Mapping:

Users can search for a destination in HK such as Central or Causeway Bay, and its photo will be displayed. A marker will also show up at the entered location on the map. Clicking on the location will also render the image. 

Data is obtained from Hongkong Geodata Store, or manually entered since the website only provided 7 destinations. This resembles a mini version of geocoding in essence.

A 500m radius buffer area is allowed for users to pinpoint the "exact" destinations.

The pop-up comment box allows users to input comments about the destination. Comments will be stored in the database and displayed in the textbox below.

Photos are fetched from Unsplash using API.