[PLUGIN] - VideoMap Sync (telemetry / drones / dashcams)

Showcase Plugins
1

Hi all,

Another new plugin, this one’s called “VideoMap Sync”.

It links a video player to a Google map so the two move together. It allows you to add points/cues onto the map at specific moments within a video’s timeline, and as the video plays the map flies to each point at the exact second it belongs to. You can also load pre-recorded routes or other telemetry data and a marker tracks the video’s position along the route as it plays.

It’s perfect for drone and dashcam footage, walking and travel videos, property tours or anything where telemetry data was recorded against a video or you want to add your own telemetry data for existing videos.

For importing, supported formats are GPX, KML, KMZ (zipped KML), GeoJSON, plain JSON, SRT (the subtitle files some drones produce, with GPS data inside), TCX, CSV, FIT and IGC. The CSV support covers DJI flight logs exported by PhantomHelp, Flight Reader and CsvView, as well as Litchi, Airdata and generic GPS spreadsheets, whether comma or tab separated.

Adding your own data provides you with a custom made popup on all markers added to the map. When a video is loaded, the current time of the video gets pulled into the position. All data stored in a state to save and load whenever needed.

image
image1588×705 304 KB

Demo and Instructions:
https://demo-plugins-13689.bubbleapps.io/version-test/videomap-sync

Plugin:
https://bubble.io/plugin/videomap-sync-1780199271651x777336205165985800

Have a play with the demo to see the video and map moving together, it shows it off far better than I can describe it to be honest.

How it’s built

The plugin contains two visual elements that talk to each other. A VideoMap Player (uses the latest videoJS) and a VideoMap Map (uses Google Maps). You give both elements the same “Sync ID” and that binds them. You can then create you own cues/points on the map through a custom popup I’ve created, or you can do the same entirely through workflows and actions.

Features

Core experience

  • Two-way sync between video time and map position.

  • Drop time-coded points on the map by pausing and clicking, with the map flying to each one on playback.

  • Drag the position marker along a route to scrub the video, or seek the video to move the marker.

Points

  • Editable point popups with title, description, video time, zoom and a lock toggle, or turn them off and build your own from the states.

  • Add, update, remove, clear and load points from your own workflows.

  • Drag a point to reposition it.

Routes and telemetry

  • Import routes from GPX, KML, KMZ, GeoJSON, JSON, SRT (including DJI drone subtitles), TCX, CSV (including DJI, Litchi and Airdata flight logs), FIT and IGC, with automatic format detection and route simplification.

  • Export your points and route as GPX, GeoJSON, KML or JSON.

  • A position marker that tracks the video along the route, with an optional follow mode that keeps it centred during playback.

Map movement

  • Vector-rendered, smooth camera flights with adjustable duration and easing.

  • Option for loading 2D or 3D maps.

  • An option to frame every point in view in a single move.

  • Customisable markers, route styling and map controls.

Optional AI

  • Look at the current video frame and have AI write a description for a point.

  • Works with OpenAI, Anthropic (Claude) or Gemini (Google), which you can choose from.

  • Can run server-side so your API key never reaches the browser. The AI side is entirely optional and the plugin is fully usable without it.

Building your interface

  • A full set of states and events for status and chat-style UIs, with no JSON parsing needed.

  • Events fire when points are added, reached and moved, when the map is ready, when an import finishes, when a frame is captured, when a description is generated, and more.

  • Debug mode that logs to the browser console while you set things up.

Actions

  • Points: Add Cue, Update Cue, Remove Cue, Clear Cues, Load Cues.

  • Movement: Fly to Cue, Set Zoom, Clear Route, Load Route, Clear All.

  • Data: Import Telemetry, Export Telemetry.

  • AI: Capture Frame, Generate Description, plus a server-side Generate Description for more secure contexts.

  • Player: Load Video, Play, Pause, Seek To.

What you’ll need

The map needs a Google Maps API key and an optional Map ID if you want to include further map styling. If you use the AI feature you’ll need a key for your chosen provider. Video.js requires no additional setup.

I’ll be supporting the plugin and improving it over time (might end up a 3D map), so if you have any questions, ideas, or run into any issues, just give me a shout. A full demo, setup instructions and support are included.

I hope it is useful.

Paul

2 Likes