Another update…
Two new actions have been included and a new control added to enable/disable the W3W Grid API requests. See below for details.
The first action just provides a way to toggle visibility of shapes without the need to actually remove and redraw them onto the map. It’s less intrusive.
New control added here:
The second action is more advanced and hooks up to my other VideoJS plugin allowing you to load telemetry data onto the map and draw/animate the route from a video which may have come from a GoPro/Dashcam. Thanks to @marcus for allowing us to show his video! and with the help with the functionality. Tagging you in @justinnnnnn so you have visibility too.
-
Set shape visibility
This action allows you to set the visibility of a shape on the map. It doesn’t remove the shape entirely which is what the remove shape actions will do, it simply toggles the visibility.
-Shape Id
Enter the shape Id for which you want to set the visibility for.
-Is visible
Yes makes it visible, No make it not visible. -
Load telemetry
This action loads telemetry data from a GPX/KML file onto the map and will draw a polyline with a symbol outlining the route. If you have the ‘VideoJS Advanced + MUX (All Media)’ plugin installed, you can enter the player’s element Id by referencing the exposed state called ‘This element Id’ and playback will be sync’d with the movement of the symbol on the polyline. Note: This action cannot extract the required GPX/KML file from a video, you must use some external software like ‘Exiftool’ to generate it.
-GPX/KML file
Enter the URL to your GPX or KML file. Instructions on how to generate this type of file are further down this post.
-VideoJS element Id
Enter the element Id of the VideoJS player. This can be found in the 'This element Id' exposed state of the VideoJS player. You should make sure the player has a video loaded before hand.
.
Polyline options
-Stroke weight
Stroke weight (line thickness) for the polyline in pixels, minimum value that can be set is 1.
-Stroke color
Stroke color for the polyline, this is the line color.
-Stroke weight (select)
When the polyline is selected, the stroke weight (line thickness) can be specified here.
-Stroke color (select)
When the polyline is selected, the stroke weight color (line color) can be specified here.
-Fit to bounds
This will zoom the map to the appropriate position and pan to the polyline.
-Measure length
When set to Yes, will populate the 'Measured length (polyline)' exposed state with a value in the specified units.
-Units
Select the unit to measure the length calculations in.
.
Symbol options
-Symbol
Choose one of the default symbols to display, selecting Custom will allow for the custom symbol field below to be used. Values: Circle, Backward closed arrow, Forward closed arrow, Backward open arrow, Forward open arrow and Custom.
-Custom symbol
Use SVG path notation here to generate a vector based icon (symbol), for example: M -2,-2 2,2 M 2,-2 -2,2
-Draggable
Allow the symbol to be dragged to a new position on the polyline.
-Rotation
The angle by which to rotate the symbol, expressed clockwise in degrees.
-Scale
Sets the amount by which the symbol is scaled by in size.
-Fill color
Fill color for the symbol inside the borders.
-Fill opacity
Fill color transparency, values range from 0.0 (fully transparent) to 1.0 (fully opaque).
-Stroke weight
Stroke weight (outline thickness) for the symbol.
-Stroke color
Stroke color for the symbol, this is the outline.
-Loop animation
When set to Yes, the movement of the symbol will be looped when it reaches the end of the route.
-Play video on load
When set to Yes, the video will play automatically and the animation will start.
-Keep marker centered
When set to Yes, the map will move accordingly to keep the symbol centered whilst the animation is in progress.
-Pause on drag
When the marker is dragged to a new position on the polyline, having this option set to Yes will keep the video paused.
Generating a GPX/KML file from the required video.
Unfortunately, there isn’t a way to generate the required data file through this plugin (as of yet) but you can do through an external tool called Exiftool. The file can then be fed into the action. The command line for doing this is as follows.
To generate a GPX file from the data held within your video file:
exiftool -p gpx.fmt -ee yourVideoFile.mp4 > telemetry_file.gpx
To generate a KML file from the data held within your video file:
exiftool -p kml.fmt -ee yourVideoFile.mp4 > telemetry_file.kml
You’ll notice in that command, there is a file called gpx.fmt and kml.fmt
Depending on which one you use, you can download these using the following links.
gpx.fmt
kml.fmt
At some point, I’ll attempt to create a server action which generates these for you but for the time being it’s a manual process.
How to show the data on your page
On the demo page, there’s a new button in the top right that shows like this.
The workflows for this are all the PURPLE ones and it’s important to know, since we’re utilising the VideoJS plugin, the correct events are used to run actions in the correct sequence. You can choose to not have a video and the animation for the symbol on the polyline will still occur.
Once loaded, you should see the following where the video player overlays the map and the route is drawn. The players progress bar is bound to the symbol shown on the polyline so when you scrub to a new position in the video, the animation should also reflect the current playtime. It also works the other way round where the symbol can be dragged to a new position on the polyline and the video time is reflected so it shows the point at which it is dragged to. The marker will snap to the polyline when it is moved.
Paul