Transform a flexible polyline into a list of GPS coordinates - Willing to pay for help

Yas-B · August 10, 2023, 2:44pm

Hi!

I’m trying to display a route on a map.

The route is created using the HERE Routing API. This API returns a flexible polyline.

This is an example:
BGwynmkDu39wZvBtFAA3InfAAvHrdAAvHvbAAoGzF0FnGoGvHsOvRAA8L3NAAkSnVAAoGjIsEzFAAgFvHkDrJAAwHrJoVvb0ezoBAAjInVAA3N_iBAAzJ_Z

The size of the flexible polyline depends on the length of the route. This flexible polyline corresponds to a route of 550 metres. For a route of 725 km, the flexible polyline is 71 001 characters long.

To display the route on a map, I need to transform a flexible polyline into two lists of GPS coordinates:

One list with latitudes,
One list with the longitude.

HERE provides the following JavaScript code (https://github.com/heremaps/flexible-polyline/tree/master/javascript) to transform a flexible polyline into a list of GPS coordinates (list of “latitude and longitude” pairs).

I suppose it’s possible to use the “Toolbox” plugin to run this code, but that’s beyond my skills.

Is this possible and would someone be available to do this?

Thanks

mishav · August 11, 2023, 8:21am

Looking at the docs, there is a util method to decode so you don’t need that github code.

Doc for util method: H.util.flexiblePolyline

The points it returns need to be converted into lat,lng objects , example:

var flexiblePolylineData = H.util.flexiblePolyline.decode("BGwynmk...");

var lineString = new H.geo.LineString();
flexiblePolylineData.polyline.forEach(p => lineString.pushPoint({lat: p[0], lng: p[1]}));

map.addObject(new H.map.Polyline(
    lineString, { style: { lineWidth: 10 } }
));

Yas-B · August 11, 2023, 9:57pm

Hi @mishav

Thanks for your help!

In Settings > SEO / metatags > Script/meta tags in header, I’ve added:

<script src="https://js.api.here.com/v3/3.1.45.0/mapsjs-core.js"></script>

I created a JavaScript function called bubble_value_fn.

I also created a custom state called “coordinates” (a text list) and a workflow with the “Run javascript” action. In this action I added the following code:

var flexiblePolylineData = H.util.flexiblePolyline.decode(Input Polyline’s value);

var lineString = new H.geo.LineString();
flexiblePolylineData.polyline.forEach(p => lineString.pushPoint({lat: p[0], lng: p[1]}));

Bubble_fn_value(lineString.getLatLngArray());

I then added a “Set state” action to give to the custom state “coordinates” the value of the JavaScript function Bubble_fn_value.

When I run the workflow, I get the following error.

Any idea about what I’ve done wrong?

Here is the link to my test page : flexible-polyline-test | Bubble Editor

mishav · August 12, 2023, 1:33am

hi @Yas-B

What do you want to do with the array of points that you are sending from JS to Bubble? The answer will help determine how to represent the data.

For example, if they are only used to draw on the map, then there is no need to send them to Bubble.

Fixing your test app …

Run javascript - turn off “Asynchronous” so that subsequent steps don’t look for a value that has been deferred
Run javascript - fixes to the script

var flexiblePolylineData = H.util.flexiblePolyline.decode(Input Polyline’s value);
// need quotes around the string parameter
var flexiblePolylineData = H.util.flexiblePolyline.decode("Input Polyline’s value");

Bubble_fn_value(lineString.getLatLngArray());
// change Bubble_fn to bubble_fn
// change getLatLngArray to getLatLngAltArray
bubble_fn_value(lineString.getLatLngAltArray());

Change Javascript to Bubble to output list of numbers
Change custom state to store list of numbers

You’ll find javascript is pedantic about its syntax!

mishav · August 12, 2023, 5:04am

Another issue to fix,

SEO settings are applied to the live version of your app, available on paid plans

The test app won’t load the SEO header because it’s not on a paid plan. Yes I know that’s weird!

To fix, assuming the test app remains unpaid, move the script to a HTML element on the page.

Yas-B · August 12, 2023, 8:49am

It works!

Thanks a lot for your help!

My goal was to :

transform a flexible polyline into a list of GPS coordinates.
use the GPS coordinates to display the route on a map using the Leafy Map plugin.

Initially, I wanted to use a feature of the plugin that takes a polyline and automatically plots the route, but this feature no longer works and probably won’t be fixed.

mishav · August 12, 2023, 10:20am

Great that it works!

You can simplify the javascript, LineString is not needed as a middle step. And JStoBubble can output two lists, to send to the leafy plugin.

What sort of routes are you mapping?

Yas-B · August 13, 2023, 9:01pm

Truck routes.

Yas-B · August 16, 2023, 9:41pm

Hi @mishav

I’m trying to get two lists but I’m experiencing something strange.

I tried it in a test application and it worked.

I’ve done exactly the same thing in the application I’m working on and it doesn’t work.

In the example above, I’ve displayed two lists: one for latitudes and the other for longitudes. But both lists are completed with the latitude values.

In the example above, I have tried to display three lists: the first for GPS coordinates (Lat Lng Alt), the second for latitudes and the third for longitudes. But all three lists are completed with the GPS coordinates values.

I can’t see what I’m missing. What do you think?

Here are some captures of my app (I’m sorry I can’t share the link to the app).

mishav · August 16, 2023, 10:46pm

There were some bugs in the older version of Toolbox plugin, so sorry!! To get the fixes to multi output lists, update the plugin to the latest version.

I notice your list of numbers is displaying a comma as the decimal point, i.e. 52,8886

This is fine so long as you keep the numbers in number form. But if sending the number as text to for example an API or plugin that takes a number in a text form, take care to format to text with a period for the decimal, for example 52.8886

Yas-B · August 17, 2023, 9:05pm

Hi Mishav

My mistake! I missed the last version of the plugin.

Thanks for your help. It works!