GeoMapper

Nicholas Garcia, Alex Sebastian Jong a kiem, Rodrigo Lopes, Christopher Alfonso, Alexander delgado

​

COLLEGE OF ENGINEERING AND COMPUTING

Purpose

• GeoMapper is a desktop application designed for managing and exporting geotagged media files (e.g., images and videos with GPS metadata). Users can upload media, annotate it, view its metadata, and export it in formats like KML/KMZ for use in mapping tools such as Google Earth.

​

FLORIDA INTERNATIONAL UNIVERSITY

COLLEGE OF ENGINEERING AND COMPUTING

GeoMapper

• This is the interface where the user interacts with the application. The top bar contains features pertaining to the upload, editing, saving and exporting of images.

​

• The “Add Media” button below allows the user to select an image file from their desired directory.

​

FLORIDA INTERNATIONAL UNIVERSITY

COLLEGE OF ENGINEERING AND COMPUTING

GeoMapper

• The user clicks “Add Media” to add images to the application

​

• The left sidebar houses all user uploaded images

​

FLORIDA INTERNATIONAL UNIVERSITY

COLLEGE OF ENGINEERING AND COMPUTING

GeoMapper

Image selection puts the image into the editor.

​

Users can edit the title and add annotations

​

GPS coordinates are pulled from the geolocation data in the geotagged image.

​

FLORIDA INTERNATIONAL UNIVERSITY

COLLEGE OF ENGINEERING AND COMPUTING

GeoMapper

Once the user is done editing their image, the export button will display dropdown options for exporting the image.

​

The user may select KML or KMZ files for export.

​

These files are supported for Google Earth interactivity.

​

FLORIDA INTERNATIONAL UNIVERSITY

COLLEGE OF ENGINEERING AND COMPUTING

GeoMapper

• The exported file may now be uploaded into Google Earth.

​

FLORIDA INTERNATIONAL UNIVERSITY

COLLEGE OF ENGINEERING AND COMPUTING

GeoMapper Development

The GeoMapper project is built using a full-stack approach combining a Spring Boot backend and an Electron-based frontend.

• Backend:
• Spring Boot: Handles API development and backend logic.

Gradle: Used for building and managing backend dependencies.

Languages: Java

• Frontend:
• Electron: Creates a cross-platform desktop application using web technologies.
• Bootstrap: Provides responsive styling for the user interface.
• Axios: Facilitates HTTP communication between the frontend and backend.
• Node.js and npm: Serve as the runtime environment and package manager for the frontend.
• Languages: JavaScript, CSS, HTML

​

FLORIDA INTERNATIONAL UNIVERSITY

COLLEGE OF ENGINEERING AND COMPUTING