A desperate request for addPolylines in iOS

[d3mac123]

First of all, I would like to thank @EddyVerbruggen for all the amazing plugins he builds. I've been using several of them and they are well documented, ready to use and constantly updated.

I am a designer, self-thought on how to code in Nativescript and who, thru try-and-error, learned also a few things to edit some of NS plugins (including Mapbox to auto-rotate maps).

Saying that, I am getting desperate because I really need my app (https://itunes.apple.com/us/app/ppg-finder/id1244768482?ls=1&mt=8) to render route paths (via addPolylines), as it does in Android.

I've been monitoring this open issue #41, having offered my time, payment, whatever, to get it implemented but, unfortunately, nobody seems to be checking that issue anymore.

If you have tried in the past to code it without success, please share your code and I will do my best to re-evaluate/test/pray/fast/whatever!!!!

Sorry for opening another case for the same topic but, like I said "it is desperation time".
Cheers,
Alex

[EddyVerbruggen]

The problem is:

As you can see here the iOS SDK expects an Array of coordinate objects, and those are exposed like this through NativeScript's metadata.

I haven't had the need to specify an array through this kind of pointer or reference construct so I don't know how to do that.

[EddyVerbruggen]

I've added the code (to GitHub) that comes close to what should be done, but it doesn't do much because of my previous remarks.

[d3mac123]

Thanks for sharing Eddy! Have you talked about this with someone at Progress/Telerik? Is this something that needs to be address by the NS team or Mapbox?

[EddyVerbruggen]

Not yet, but I think asking in the #ios channel on Slack would be a good start. I'm not able to do that atm though.

[d3mac123]

You mean Slack channel of NS or Mapbox iOS?

[EddyVerbruggen]

NativeScript Slack

[EddyVerbruggen]

Or https://discourse.nativescript.org/latest?order=activity

[d3mac123]

@EddyVerbruggen I did some adjustments to your code and I finally got some polylines in the map (yeah!!!):

However, as you can see above, the route path is not the same as it should be (see the Android results). Any ideas why? I think it is related to this line (which I couldn't figure out how to write in plain JS - your sample is in TS):
const coordRef = new interop.Reference<CLLocationCoordinate2D>(coord);

Here's the modification I did to your code:

var coord;
for (var p in points) {
      var point = points[p];
      coord = CLLocationCoordinate2DMake(point.lat, point.lng);
}
const polyline = MGLPolyline.polylineWithCoordinatesCount(coord, points.length);
theMap.addAnnotation(polyline);

[EddyVerbruggen]

That's a start! 😍

Can you share the app code to generate that "circle" on Android please?

[d3mac123]

The "circle" is a real path saved on a Firebase database (thanks to your great Firebase plugin). App is huge, with several pages, Facebook login, etc. What is the best way to share it with you (I have no idea on how to use Github "repos/whatever you call them" :))? Will a zip file be enough for you? Do you have an email/dropbox I can share?

Also, in order to get the same results of the "circle" you are going to have to log with my Facebook credentials. SO, let me know the best way to share it with you and I will gladly do that.

[EddyVerbruggen]

Ah, ok, I was just wondering what you're doing to get that circle.. do simply call addPolyline several times, or only once with several points? Perhaps you can console.log how you're calling the method and share that?

[d3mac123]

I got it. In fact, I just call it once, after finishing a flight (having saved it on FB database):

map.addPolyline({
     id: 1, // optional, can be used in 'removePolylines'
     color: '#30BCFF', // Set the color of the line (default black)
     width: 5, //Set the width of the line (default 5)
     points: JSON.parse(JSON.stringify(flightData))
});

flightData is an array built by data from FB Realtime DB (full code below):

var onQueryEvent = function(result) {
      var flightData;
      if (!result.error) {   
         flightData = result.value["data"] 
         map.addPolyline({
                                id: 1, // optional, can be used in 'removePolylines'
                                color: '#30BCFF', // Set the color of the line (default black)
                                width: 5, //Set the width of the line (default 5)
                                points: JSON.parse(JSON.stringify(flightData))
         });
      }; //end if onQuery
                
} //end onQuery

firebase.query(
                onQueryEvent,
                "/flights/"+fbUID+"/"+fid,
                {
                    // set this to true if you want to check if the value exists or just want the event to fire once
                    // default false, so it listens continuously.
                    // Only when true, this function will return the data in the promise as well!
                    singleEvent: true,
                    // order by company.country
                    orderBy: {
                        type: firebase.QueryOrderByType.CHILD,
                        value: 'fid' // mandatory when type is 'child'
                    }
                }
);

[EddyVerbruggen]

So if you're also using that on iOS then I don't get why this:

var coord;
for (var p in points) {
      var point = points[p];
      coord = CLLocationCoordinate2DMake(point.lat, point.lng); // reassign
}
const polyline = MGLPolyline.polylineWithCoordinatesCount(coord, points.length);
theMap.addAnnotation(polyline);

.. produces multiple lines (as per your screenshot).

Because in the for loop that coord variable seems to be reassigned every time and only the last state is passed to polylineWithCoordinatesCount... so I expect that coord variable to be an Array. So weird..

[d3mac123]

Using your code below "as is" did not produced any lines, as you probably know:

// TODO this is not sufficient
 for (let p in points) {
      let point = points[p];
      const coord = CLLocationCoordinate2DMake(point.lat, point.lng);
      const coordRef = new interop.Reference<CLLocationCoordinate2D>(coord);
      const polyline = MGLPolyline.polylineWithCoordinatesCount(coordRef, 1);
      theMap.addAnnotation(polyline);
}

this was the reason I tried to move the last two lines out of the "for" loop.

I also tried to simply leave the last 2 lines into the loop (commenting the coordRef one) without any success. Reason why I think there is "something" related with the line:

const coordRef = new interop.Reference<CLLocationCoordinate2D>(coord);

I think the solution is really close but, not being a "pro developer", I believe your knowledge can get the trick faster.

[EddyVerbruggen]

@d3mac123 I've spent the morning taking the geojson route and seem to have something working. Don't worry, the API won't change as I'm leveraging geojson internally, that stuff will be hidden for the user.

[EddyVerbruggen]

This took me way longer than I hoped, but it's working now! Please update to 3.0.2.

[d3mac123]

i think i am going to cry! :) thank you very much!