README.md

Geography information application (also known as GeoInf)

• Geography information application (also known as GeoInf)
  • Introduction
  • Preview
  • Application presentation
    • Maps
      • Here Maps
      • Outdoor activities
      • Bing Maps
      • High contrast
      • Slope map
      • OpenStreetMap
    • Layers
      • List of all layers
    • Legends
  • Client-server architecture
    • Tiles
    • Layers
    • Additional services
  • Installation
    • Download the repository
    • How to run the app on your computer
    • Installation in WAMP or MAMP
      • WAMP
      • MAMP
  • API keys
  • Suggestions

Introduction

The idea behind this application is to differentiate the different areas where it is allowed to fly his drone areas where it is prohibited.

Reliable data from the Swiss Confederation are used, as well as live weather data, to enhance and better organize your next flights.

This app was developped during the GeoInf course at the HEIG-VD school of Yverdon-les-Bains. While all comments in this code and ReadMe are in english, the content is displayed in french exclusively.

Preview

You can click here to preview the app directly in your browser with GitHub Pages or here on my mirror/backup website.

Application presentation

Maps

Here Maps

Here Maps is the default map for this app.

Outdoor activities

Outdoor activities is a map that contains all outdoors activities, perfect if you plan to go hiking for example, and you want to explore the best hiking trails and film them with your drone.

Bing Maps

Bing Maps is used to display a satellite view of Switzerland. This map is very useful to help you find your way around with the various visual elements surrounding you.

High contrast

High contrast is a map that is highly readable outside in a sunny place.

Slope map

Slope map is useful if you plan to go in the mountains. This map contains the elevation marking.

OpenStreetMap

OpenStreetMap is an alternative to the other maps and has a more flat appearance.

Layers

List of all layers

• Prohibited areas

  • Airports
  • Prohibited areas
  • Townships

• Meteorological

  • Wind direction (Live data)
  • Winds map (Statistics from the Swiss Confederation)
  • Intensity of rainfall (Live data)
  • Relative humidity (Live data)

Here is a view with all the possible layers activated:

Legends

In addition to the layers, you can display two legends. These legends make it possible to better interpret the "Relative humidity" and "Precipitation intensity" layers.

Client-server architecture

In order to offer the best user experience possible, some data are stored on external services. Thoses services, such as Swiss Confederation's Web Map Tiling Services (or WMTS) and CartoDB Services.

Tiles

Here is a list of all the tiles, their source and file format:

Tile name	Source	File format	API URL
Here Maps	Here Maps API	png	https://developer.here.com/documentation
Activités extérieures	Swiss Confederation's WMTS	png	https://api3.geo.admin.ch/api/doc.html
Bing Maps	Bing Maps API	jpeg	https://docs.microsoft.com/en-us/bingmaps/
Contraste élevé	Thunderforest API	png	https://www.thunderforest.com/docs/map-tiles-api/
Dénivelation	Thunderforest API	png	https://www.thunderforest.com/docs/map-tiles-api/
OpenStreetMap	OpenStreetMap API	png	https://wiki.openstreetmap.org/wiki/OpenLayers

Layers

Here is a list of all the layers, their source and file format:

Layer name	Source	File format	URL
Aéroports	CartoDB	GeoJSON	https://carto.com/developers/data-services-api/reference/
Zones interdites de vol	CartoDB	GeoJSON	https://carto.com/developers/data-services-api/reference/
Cantons	CartoDB	GeoJSON	https://carto.com/developers/data-services-api/reference/
Carte des vents	Swiss Confederation's WMS	png	https://api3.geo.admin.ch/api/faq/index.html
Intensité des précipitations	OpenWeatherMap	png	https://openweathermap.org/api/weather-map-2
Humidité relative	OpenWeatherMap	png	https://openweathermap.org/api/weather-map-2

Additional services

Service name	Use	Source	URL
Geocoder	Service used for the searchbox	Nominatim	https://wiki.openstreetmap.org/wiki/Nominatim
Reverse Geocoder	Used to get the adress when the user click on the map	Nominatim	https://wiki.openstreetmap.org/wiki/Nominatim
Geolocation	Location of the user's current position	OpenLayers Geolocation API	https://openlayers.org/en/latest/apidoc/module-ol_Geolocation-Geolocation.html

Installation

Download the repository

Download a copy of this repository here and unzip the folder.

How to run the app on your computer

In order to run this app locally on your computer, you'll need WAMP (or equivalent). You can download WAMP here if you're on a PC and MAMP here if you're on Mac OS

During the programming and tests, this is the version of WAMP and dependencies used:

Dependencies	Version used
WAMP for PC	3.1.0
Apache	2.4.27
phpMyAdmin	4.7.4
MySQL	5.7.19
MariaDB	10.2.8

Installation in WAMP or MAMP

WAMP

• Locate the www folder of WAMP on your computer. By default, the folder is located at C:\wamp\www\
• Paste the geoinf-app-master folder here
• Them you can launch WAMP
• Open localhost/geoinf-app-master in your favorite browser.

MAMP

• Locate the htdocs folder of WAMP on your computer. By default, the folder is located at /Applications/MAMP/htdocs
• Paste the geoinf-app-master folder here
• Them you can launch WAMP
• Open localhost/geoinf-app-master in your favorite browser.

API keys

In order to use this app and all resources, you'll need to provide your own API keys. You can find all the API keys you need here:

/api/api.sample.js

Replace every YOUR_API_KEY with your own API keys. Then, just paste this line in the index.html file:

<script src="api/api.sample.js"></script>

at the end of the HTML file, juste before the </body> tag.

Suggestions

If you find a bug, or have a suggestion on how to improve this code, do not hesitate to open an issue on GitHub, you can find a template for:

• Bug report
• Feature request
• Other