@pork1977gm Thanks for putting all of this documentation together! Love your work.
I lead the Technology Partnerships team here at what3words. We’re really keen to learn a bit more about how the plugin works and whether there is anything we can do to support. Wondering if there is a way to get in touch to run a few thoughts past you?
Best wishes,
Patrick
Hi Patrick,
Nice to hear from you! and no problems at all.
Happy to meet up, I’m free for a bit today if you are? Maybe via a Google Meet?
Regards, Paul
Hi Paul,
Thanks for this. Unfortunately I’m quite tied up today (just back from a week’s holiday 
) but would be great to get on a Google Meet on either Thursday/Friday if that could work? Feel free to drop me an email on patrick@what3words.com if that’s easier and we can get something set up 
Best wishes,
Patrick
Hi everyone!
Maybe someone can help me.
I need to obtain data on what the user clicks on a map that has a KML file loaded. Precisely I need to keep the name of the polygon that is clicking. I have tried a lot of options and combinations, without success. Any ideas?
Thanks, and excellent plugin!
Hi @brian.lauget
Right now, when you load some KML onto the map, none of the objects which are contained within that KML, for example, markers, shapes etc have no events tied to them, meaning when you click one of them nothing is reported back. It’s the only feature which doesn’t have this, drawing shapes using the tools or running any of the actions which create/change shapes all have the data available when you interact with them.
I’ll take a look at adding these events in for you and see what I can come up with. In the meantime, would you mind just sending me a quick screenshot showing what you mean? It will help me understand exactly what it is you’re trying to do that’s all.
Thanks!
Paul
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.
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.
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
Hey @brian.lauget
I’ve added the following 4 states for you… (and an event which triggers upon clicking an item on the map that was put there from a KML file)
Paul
Hi Paul!
I am really impressed by the fast and effective response. Thanks!!
I’ll mark those 5 stars for this amazing plugin.
This solved the initial problem, now I’m here to bother you with something else!
As I get to know the plugin more, I find better ways to do things, but I’m mainly having a problem with a one-off scenario.
I have a form for the user to draw a polygon, and save it in the DB associated with a group of polygons. On another screen, when I select that group of polygons, I need to map them all by taking the coordinates of different lines from the databases, in a single map. Currently I get the error attached.
Is it possible to do something like that?
Thank you very much!
No probs! Glad all is working out for you.
So for polygons, they’re a closed shape which means the first set of coordinates need to match the end set of coordinates. Are you able to take the first pair of latitude and longitude values and append them to the end of what you have already? That should hopefully resolve that error.
Thank you for the review! too kind
Somehow they appear, but I can’t interact with each polygon as an individual object. Take everything as a single polygon. In this case, it would be ideal for me to load them as individual polygons, that when I click on them I will show different information from the DB related to them. Do you see this feasible?
I think I also don’t have the option for when a polygon is clicked
Thanks again for the fast response!
Can you elaborate more on what you mean by this?
I have a form for the user to draw a polygon, and save it in the DB associated with a group of polygons.
Send us a few screenshots as I need to understand how you’re drawing the polygons onto the map, especially if you’re not getting any events or you can’t interact with them.
Send us an image of the action which you’re running too if you can, it will help me see what’s going on a bit more.
First of all, I create a row with the main information. This line will serve as a grouper for other n lines, which will have polygons.
These new lines, related to the main line, will have extra information besides the polygon drawn when inserting it.
To load these new lines I use a simple form where I ask them to select the grouper, and then add information in addition to drawing the polygon.
So far I think we’ve been doing everything right. Now, in another map, I want to read all the loaded polygons related to the initial grouper, “Trigo Durazno”
Once the dropdown changes value, I execute the draw action.
In the drawing I do a simple search on the table where a column is equal to my grouper, selected in the dropdown.
What I hope is to have several polygons drawn on the map, and to be able to interact with each one of them obtaining more information from the database.
I don’t know if I’m being very clear. Thanks!
Ah ok, I understand you now. I think you’re problem is with that dynamic value within the Shape coordinates field. You’re specifying a list of Polygons where it’s not designed to draw multiple polygons. It will only draw a single polygon at a time. You may need to run that action multiple times to get them all drawn. Just as a test change that to read Search for Chacrass: each item’s Polygon: first item and see if it draws one of them.
Yes, that work. Work if i have only one record too. I’ll try to iterate somehow to execute the action more than once.
That action has been on my list of things to do for a while now to make it work with a list of shapes but I haven’t got around to modifying it. So yeh try using ListShifter plugin or the JStoBubble looping mechanism to run the loop on each of your Polygons and you should be fine.
I can finally draw all the polygons with the Iterate plugin. Thanks!
Now I am trying to interact with polygons. when I click on any of these, I want to display information from the after mentioned “chacras” table. Do I have some state inside the plugin that saves me information about the polygon I am clicking on?
It doesn’t matter if it’s the coordinates, it may not be very performant but it works.
Thanks for everything Paul!
So for that, when you click on a polygon you’ll get the shape is clicked event trigger and to get the coordinates, you can reference the Drawing polygon coordinates state within that event.
Hi Paul! I couldn’t find a way to make it work.
When I click on the polygon, it shows me only the coordinates of one. I think the last one he drew, regardless of which one I click on.
Same coordinates both cases. Any ideas?
Thanks!
If you drag it slightly does it update the coordinates then? I’ll double check I’ve added the click event on the shapes.
In the map element, I’ve included a new area as seen below. If you toggle that new option to Yes, then when a shape is drawn onto the map (through any means) and you proceed to click it, those drawing coordinates states will be updated for shape that was clicked.
I’ve set the default to No because it may have an effect on some others who maybe using the plugin.
That should make things work for you when you update.
Paul
