ENGO 651 - Adv. Topics on Geospatial Technologies
This website is the project for the (Adv. Topics on Geospatial Technologies) course. The website is specified in providing the best path, either the shortest path or has the least number of traffic signals, to a hospital or clinic. Moreover, you can find the favorite Hospitals/Clinics in Calgary, if a user clicks on any one of the favorites, the system will locate it on the map of Calgary. Furthermore, users' reviews of each hospital are included in the website, which exists on the pop-up message of each hospital/clinic, and you can add your review for any hospital you like.
- Any platform you like such as Windows, Linux, and so on.
- Use any browsers (Firefox, Google Chrome,...) to display the html pages.
- Python 3.6 or higher
- psycopg2==2.8.5
- psycopg2-binary==2.8.6
- SQLAlchemy==1.3.19
- Flask==1.1.2
- requests==2.24.0
- Flask_SocketIO==5.0.1
- Flask_JSGlue==0.3.1
- Flask-Session==0.3.2
- click==7.1.2
- click-plugins==1.1.1
- Jinja2==2.11.2
- gunicorn==20.1.0
You can find the libraries in therequirements.txt
and install them by running this commandpip3 install -r requirements.txt
in the terminal window.
- HTML 5
- CSS
- Python Flask
- Javascript
- Leaflet
- GeoJSON
- Turf.js
- Leaflet.GeometryUtil
- Location of hospitals and clinics in Calgary dataset
- Location of traffic control signals in Calgary dataset
- Mapbox Studio Editor
- Dataset: Location of traffic control signals is converted to vector tiles to be used in the map.
- Style: "Satellite" style and some useless layers is removed to optimize the map.
- Heatmap: represents the traffic dataset, which red circle represents the highest density of traffic control signals at its location on the map, but the outer blue circle represents the lowest density of the traffic control signals. and the heat map configuration are:
- Radius of heatmap circle: 30 px
- Opacity: 0.68
- You can open the website by two methods:
- Because the website is deployed on public domain in heroku, you can open the website by clicking on this link
https://path2hospital.herokuapp.com
- Run this website in your local server by installing all libraries required in your environment and run application.py in any IDE you like. Then, you will find a line in the console
Running on <server link>
where<server link>
is the link of the server of the flask where is working on. In my case, the server link ishttp://127.0.0.1:5000/
. After that, copy and paste it in the link box of any browser you like to surf the website.
- Because the website is deployed on public domain in heroku, you can open the website by clicking on this link
- The first page of the website is the login page, as you see in the image below. Type your username and password to surf the map page.
- If you don't have an account, click Don't have account? link to go to the registration page where you can write your (first name, last name, username, and password), then click on submit.
- Go back again to the login page and write your username and password and click on login.
- After logining in, you will get the map page as you see below
- On the map page, if you'd like to check the favorite hospitals, click on
Favorite Hospitals/Clinics
to see them on a collapsible side panel. Then, click on any one of them to get its location on the map, it will be highlighted by blue circle, see the image below.
- Specify your location by drawing marker on the map as you see below.
- If you hover over any hospital/clinic, you will get the name of it and a link another page, namely View/Add Review.
- Once you click on the View/Add Review link, a new page is opened which has the information of the hospital/clinic, see the image below. Also, you can see other users' reviews and submit your review. If you'd like to return back to the map page, click on Return back to map page button.
- Moreover, you can toggle between two layers, namely Gray layer and Satelitte layer . If you click on the Satellite map (on the bottom left of the web page), you will see that map is replaced with our published map layer, as you see in the image below. If you want to return back to the first layer, click on Gray map.
-
You can get multiple types of paths from a marker to a hospital/clinic:
1- The shortest path between a marker and nearest hospital to the marker along with alternative routes paths (if exist) --where the shortest is highlighted in red, but others in grey-- by clicking onShortest Path
dropdown on the navbar and chooseTo Nearest Hospital/Clinic
.2- Shortest path with the alternative route between a marker and any hospital/clinic you select on the map by choosing
To Selected Hospital/Clinic
under theShortest Path
dropdown. Any hospital/clinic is selected by double-clicking on it. To remove a selection, double click on it again.3- The path that has the least number of traffic control signals from a marker to the nearest hospital by clicking on
Least Traffic Path
dropdown on the navbar and chooseTo Nearest Hospital/Clinic
, where the least traffic one is highlighted by green color and the other alternative routes (if exist) by grey color.4- The same path that is mentioned in
3
, but between a marker and selected hospital/clinic. This is created by choosingTo Selected Hospital/Clinic
under theLeast Traffic Path
dropdown. -
Moreover, the user can click on the delete button, as indicated below, to delete the marker on the map to add a new one.
-
If you'd like to leave the map page, click on
Logout
button on the top right of the page.
import.py
: is utilized for creating a table for hospitals/clinincs in postgresql database, which all values are inserted from Location of hospitals and clinics in Calgary dataset. Also, it creates a table for users and another one for reviews. The attributes of the users table are (id,firstName, lastName, username, password), but the attributes of the reviews table are (id, rate, commment, hospital_clinic_id, and user_id)application.py
: is responsible for python flask coding and database transactions. Also, import JSON data from Open Calgary API datasets and then passes it to thesearch_for_nearest_hospital.js
templates/login_registration_layout.html
: this is a layout for the login and registration pages.login_page.html
andregistration.html
files inherit structure from it.templates/login_page.html
: this HTML file is specified for the login page.templates/registration.html
: contains structure of the registration page.templates/search_for_nearest_hospital.html
: has the structure of the map page.templates/hospital_clinic_details.html
:has the structure of all information about the hospital/clinic, reviews, and adding reviews.templates/messages_layout.html
: contains the layout of the messages either a successful submit message or an error message.success_submit.html
anderror.html
inherit structure of the messages from it.templates/success_submit.html
: has the strcuture of any successful submit.templates/error.html
: is specified for any type of the error message.static/styles/login_registration_page.css
: this is a specified style sheet file forlogin_page.html
andregistration.html
files.static/styles/search_for_nearest_hospital.css
: it is a style sheet for thesearch_for_nearest_hospital.html
.static/styles/hospital_clinic_details.css
: similarily, it is a style sheet for thehospital_clinic_details.html
.static/js/search_for_nearest_hospital.js
: creating leaflet map and toggling between two layers are located in this file. Moreover, all algorithms related to draw the shortest path and the least traffic control signals path and view the favorite hospitals are included, also.static/js/Polyline.encoded.js
: this is considered to be a library that utilized to decode/encode the polyline and is imported in thesearch_for_nearest_hospital.html
Procfile
andruntime.text
: These files are used to deploy the website on public domain (heroku).
- You can find the demo video for this website at this Link