andres-osorio / pathwaypilot-3d

Web app to create and simulate drone flight paths, define camera tasks and persist routes to a real-time database

Pathway Pilot 3D

Drone route planning and simulation web app

A web app to plan drone routes, create camera tasks associated with waypoints and simulate the expected behavior of the UAV in a 3D web environment. This app is one component of an [architecture]) of 3d space route planning and automatic/supervised execution for DJI drone flight paths.

This development corresponds to the red square in the following diagram:

The 3D map environment is supported by the Google Maps Javascript API, the use of custom map styles from the Google Cloud Platform, and the use of dynamic SVG icons.

All the information about routes and their tasks can be stored in a real-time Firebase database. The data scheme of the database should be compatible with your Android app client that connects to the drone.

The UI has components of the Angular Material project

How to run

before compiling make sure you enter your own variables for using the Google Maps API (mandatory), Map style (optional), and Firebase endpoint (optional)

in the index.html file replace {YOUR_GOOGLE_API_KEY} with your own API KEY. to get one follow these esteps. Is very important that you keep the label "&v=beta" otherwise 3D building and tilt options won't be available

<script src="https://maps.googleapis.com/maps/api/js?key={YOUR_GOOGLE_API_KEY}&v=beta"></script>

int the file path.component.ts replace {YOUR_MAP_ID} with your own MAP id that you can get by following this guide

options: google.maps.MapOptions = {mapId: '{YOUR_MAP_ID}'} as google.maps.MapOptions;

in the file data.service.ts replace the URL with your firebase real-time endpoint

private url = '{hhtps://your_firebase database endpoint.net}}';

in a terminal navigate to the the folder "app-rutas-web", Inside that folder execute the command

npm install --legacy-peer-deps

Once all the dependencies are installed you can deploy and open the app by using the command:

ng serve -o

Contribute:

Contributions are welcomed to make this a visible open-source project and improve its capabilities and integrations.

References:

• Official google maps component by the Angular contributors https://github.com/angular/components/tree/master/src/google-maps

• Google Maps JavaScript API Guides & Reference https://developers.google.com/maps/documentation/javascript/overview