This page documents how to set up the web interface as well as the main purpose of its parts.

To run the web map, you will need to have a python development environment set up at minimum, as this is what the back end (flask) runs on. Use this command for installing the requirement. The requirements.txt has provided in the repo

$ pip install -r requirements.txt

If you need assistance doing this, there are a few different guides here

You will need to install two packages into your python environment if you have not already in order to run the web map. These packages are:

• Flask
  
• requests
  

Installing these packages should be as simple as running both of these prompts in your python terminal
pip install Flask
and
pip install requests

If you are not sure if you have pip available to you, or you are not sure how to install packages in general, you can check about guidelines to installing packages onto python here

In order to run the flask server, you can simply use the command

flask run

Now this app is running on https://127.0.0.1:5000

Flask docs: https://flask.palletsprojects.com/en/2.2.x/
Leaflet docs: https://leafletjs.com/reference.html

The front end of the web map is a webpage built to make the toolboxes built for this project readily available online.

It features a large map on the right, and on the left a series of options to select the toolbox to use, location information, and extra hazard information to include when calculating routes.

The map shown on the webpage is displayed with leaflet, a flexible API that is built (in this case) to be able to overlay points and custom JSON data onto the world map.

The documentation for Leaflet can be found here

This is the System Topology of this App:

Backend acts as a relay station to send the content from Toolbox and ORS to the front-end. It also takes user input and sends it to Toolbox and ORS to get the information the user needs.

Use the fetch method in JavaScript to pass and receive data with the backend. The data format is all JSON type.

fetch('/route-to-place', {
                method: 'POST',
                body: JSON.stringify(input_data),
                headers: {
                        'Content-Type': 'application/json'
                }
        })
        .then(response => response.json())
        .then(data => {
                console.log('Success:', data);
                L.geoJSON(data).addTo(map);
        })

In some cases where the backend can't get the data, the backend will also send some error codes to the frontend to inform the frontend of the cause of the error.

        .catch((error) => {
                console.error('Error:', error);
        });

Two different types of services are provided in the application interface are:

• Directions to place
• Directions to a facility

The code will call the ORS (Open Routes Service) API when the user selects directions to place.

The code will call the ArcGIS Route API when the user selects adirections to facility.

OpenRoutes Service office site: https://openrouteservice.org/

This is an open source API.

The backend will provide the API with the coordinates of two points and a JSON file with polygon information.
Then the backend can get a reply with the route information from ORS

This is an API created by our group through the use of ArcGIS Pro.

It is still in the development progress. Discover more here: ArcGIS Route