Flowline using arrays

[JulienSchanen]

Hi,

I try to make a flowline like in the runmap example but instead of using json data I have arrays. So, firstly I tried to recreate the structure of json file in my array :

var jsondata = [];
                            var wpt = new Object();
                            for (var i = 0; i < arrayspeed.length; i++) {
                                jsondata.push({
                                    "gpx": {
                                        "wpt": [
                                            {
                                                "latitude": arraylatitude[i],
                                                "longitude": arraylongitude[i],
                                                "speed": arrayspeed[i]
                                            }
                                        ]
                                    }
                                });
                            }

And then add the good parameters to the Flowline :

var dataLayer = new L.FlowLine(jsondata, {
                                    recordsField: 'gpx.wpt[0]',
                                    locationMode: L.LocationModes.LATLNG,
                                    latitudeField: 'gpx.wpt[0].latitude',
                                    longitudeField: 'gpx.wpt[0].longitude',
                                    gradient: true,
                                    displayOptions: {
                                        speed: {
                                            displayName: 'Vitesse (km/h)',
                                            weight: new L.LinearFunction([0, 0], [140, 14]),
                                            color: new L.HSLHueFunction([0, 120], [120, 0])
                                        }
                                    },
                                    tooltipOptions: {
                                        iconSize: new L.Point(100, 65),
                                        iconAnchor: new L.Point(-5, 65)
                                    },
                                    layerOptions: {
                                        fillOpacity: 1,
                                        opacity: 1,
                                        weight: 1,
                                        width: 6
                                    }
                                });

But it is not working and I have no error in the console. So, I don't understand what I miss.

thanks you for your help

[sfairgrieve]

It looks like the issue is with recordsField. recordsField tells the FlowLine what field in your data contains the records to be processed. In this case, jsonData is the records that you want to process, so you can set recordsField to null. Also, under displayOptions, the speed reference should be changed to gpx.wpt[0].speed.

var dataLayer = new L.FlowLine(jsondata, {
                                    recordsField: null,
                                    locationMode: L.LocationModes.LATLNG,
                                    latitudeField: 'gpx.wpt[0].latitude',
                                    longitudeField: 'gpx.wpt[0].longitude',
                                    gradient: true,
                                    displayOptions: {
                                        'gpx.wpt[0].speed': {
                                            displayName: 'Vitesse (km/h)',
                                            weight: new L.LinearFunction([0, 0], [140, 14]),
                                            color: new L.HSLHueFunction([0, 120], [120, 0])
                                        }
                                    },
                                    tooltipOptions: {
                                        iconSize: new L.Point(100, 65),
                                        iconAnchor: new L.Point(-5, 65)
                                    },
                                    layerOptions: {
                                        fillOpacity: 1,
                                        opacity: 1,
                                        weight: 1,
                                        width: 6
                                    }
                                });

If you don't mind changing the structure of jsonData a bit, I would simplify the code to this:

var jsondata = [];
                            for (var i = 0; i < arrayspeed.length; i++) {
                                jsondata.push({
                                    "latitude": arraylatitude[i],
                                    "longitude": arraylongitude[i],
                                    "speed": arrayspeed[i]
                                });
                            }

var dataLayer = new L.FlowLine(jsondata, {
                                    recordsField: null,
                                    locationMode: L.LocationModes.LATLNG,
                                    latitudeField: 'latitude',
                                    longitudeField: 'longitude',
                                    gradient: true,
                                    displayOptions: {
                                        'speed': {
                                            displayName: 'Vitesse (km/h)',
                                            weight: new L.LinearFunction([0, 0], [140, 14]),
                                            color: new L.HSLHueFunction([0, 120], [120, 0])
                                        }
                                    },
                                    tooltipOptions: {
                                        iconSize: new L.Point(100, 65),
                                        iconAnchor: new L.Point(-5, 65)
                                    },
                                    layerOptions: {
                                        fillOpacity: 1,
                                        opacity: 1,
                                        weight: 1,
                                        width: 6
                                    }
                                });

[valerio-bozzolan]

@JulienSchanen can you please mark as resolved if the answer was somehow useful? :) thank you so much!