Drone Image Overlap Estimator and Heatmap App (Wix)

1. Overview

2. The Challenge: Complex Drone Data, Made Visual

3. The Solution: A Precision Tool for Flight Monitoring

4. Technical Challenges and Solutions

5. Results & Impact

6. Technologies Used

7. Helping Drone Teams Capture Data Smarter

Image Overlap Estimator Video Demonstration

Overview

When a U.S.-based aerial data company specializing in drone services reached out, they had a very specific need:

They needed a tool to monitor drone pilots' photo captures—specifically checking if images were taken at the correct locations and at proper distance intervals. They couldn’t risk pilots missing spots or capturing images too far apart.

Their idea was to create an Overlaps Estimator—a smart web app that would visually map how drone images overlapped by displaying a heatmap on Google Maps.

And that’s exactly what we built.

Visit Live Website

The Challenge: Complex Drone Data, Made Visual

The app needed to:

• Allow users to input the flight altitude.

• Process folders of drone images uploaded by users (drag and drop or select manually).

• Extract and read the EXIF metadata (GPS coordinates, altitude, camera parameters) for each image.

• Perform complex calculations to figure out each image's ground coverage and how much it overlapped with others.

• Render a visual heatmap on Google Maps, showing overlap intensity using colored rectangles, sorted by overlap density—least overlapped images first, most overlapped last.

• Allow users to toggle between heatmap view and simple coordinate pointers

• Optional KML file upload to draw intended flight boundaries on the map for comparison

• Handle invalid uploads with clear error messages (e.g., unsupported file types, unsupported drone sensors)

• Integrate with Google Maps API for real-time, dynamic mapping.

• And all of this needed to be embedded inside their existing Wix website, even though Wix doesn’t natively support such complex functionality.

The Solution: A Precision Tool for Flight Monitoring

Here’s how the Overlaps Estimator web app works:

1. Flight Altitude Input: Users first enter the drone's flight altitude, which influences ground coverage calculations.

2. Image Upload: Users can either drag and drop or select a folder/set of images captured by the drone.

3. Metadata Extraction: The app automatically reads each image’s EXIF metadata to pull the necessary details for mapping and calculations.

4. Overlap Calculations: Complex algorithms determine each image's ground coverage and how much overlap there is between images.

5. Google Maps Visualization:

   1. Each image is represented by a rectangle on Google Maps.

   2. The rectangles are layered intelligently—least overlapped images appear first, making the heatmap easier to analyze.

6. Toggle Heatmap/Pointer View: Users can switch between full heatmap mode and a simpler coordinate-only mode if they want a cleaner view.

7. KML Boundary Upload: Users can upload a KML file to show the intended area of operation, helping to verify if images were captured inside the designated boundaries.

8. Robust Error Handling: If users upload unsupported file formats or images captured by unsupported drone sensors, the app displays clear error messages along with instructions to correct the issue.

   
   

All of this was designed with performance in mind—large folders of drone images could be uploaded and processed without lag.

Technical Challenges and Solutions

Because Wix doesn’t natively allow direct access to EXIF metadata parsing, real-time complex calculations, or custom Google Maps rendering, we built the Overlaps Estimator as a standalone web app.

Then we embedded it inside a Wix page using an iframe, achieving full integration while keeping Wix as the main platform.

This approach allowed the client to maintain their Wix website's structure and design while delivering highly custom functionality seamlessly.

Results & Impact

✅ High Accuracy: Drone captures could now be monitored for precision and consistency.

✅ Actionable Heatmaps: Management could instantly spot any gaps or inconsistencies in image captures.

✅ Smooth User Experience: Drag-and-drop uploads, clear error messages, and toggleable views made it user-friendly for drone pilots and project managers alike.

✅ Custom Integration with Wix: By embedding the app through an iframe, we overcame Wix’s technical limitations without sacrificing functionality or visual integration.

✅ Future-Proof Architecture: The client can continue expanding or updating the app separately without affecting their Wix site.

Technologies Used

• JavaScript – For client-side logic, metadata parsing, calculations

• EXIF Reader Libraries – To pull GPS data from images

• Google Maps API – For heatmap rendering and KML overlays

• Custom Algorithms – For overlap detection and heatmap layering

• iframe Integration – iframe embedding for seamless user access

Helping Drone Teams Capture Data Smarter

Through intelligent visualization and precision mapping, this project helped aerial data teams fly smarter, avoid missed shots, and deliver better data to their clients.

📩 Got a custom web app idea that seems too complex for Wix? Let’s find a creative solution together!