Creating polylines in Thunkable with the Google Maps element

Polylines allow you to draw lines on the Google Map element in thunkable and can be used for a variety of reasons, for example you might want to highlight a historic shipping route, and with polylines you can draw the path on the map.

Polylines are not to be confused with directions, a polyline is a static line which is drawn from a collection of coordinates.

Creating a polyline

The first thing you need before creating a polyline is a list of coordinates and a variable to hold the ID of the polyline, the ID will allow you to update the line and move it to a different location, this isnt always nessecary though so it depends on what you are trying to make.

1. Create a global variable and initialize it as an empty list. Also create a variable to hold the ID of the polyline (optional)
   
2. The points variable needs to hold the coordinates in a specific format for it to work, ensure when you add coordinates you add a list item to the points list. The first item in the list should be the latitude and the second item should be the longitude. A good way to do this is to use the "Add items to list" block.
   
3. Once you have your variables set and a list of coordinates you can now use the "Add Polyline" block for Google Maps, If you need to keep track of the Polyline ID, set the value of your variable to this block as shown below.
   
4. Thats it, you've added a polyline to Google Maps in Thunkable.

Updating a polyline

If you need the ability to update a polyline then be sure you have the ID saved like in the previous guide.

1. Updating a polyline is pretty easy as all the work has been done, just drag in the "Update Polyline" block for the Google Maps element.
2. Now you just need to set the attributes, set the polylineId to the variable you have it saved in. The propertyName attribute needs to be set to "points" if you are updating the coordinates, and lastly the value should be set to the new list of coordnates for the polyline.
   

Example

If you'd like to see an example of how this works in practice I've created an example app that tracks your location and draws polylines on the map, if your location updates a new polyline is drawn.

Download the aia file here: CreatingPolylineExample.aia

Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY