0

I already search through the web but no clue on how to use Leaflet.MultiOptionsPolyline and leaflet.motion plugins together for same polyline.

There are two functions, one is:

L.motion.polyline([[50,0], [60,10]], {
    color: "transparent"
}, {
    auto: true,
    duration: 3000,
    easing: L.Motion.Ease.easeInOutQuart
}, {
    removeOnEnd: true,
    showMarker: true,
    icon: L.divIcon({html: "<i class='fa fa-car fa-2x' aria-hidden='true'></i>", iconSize: L.point(27.5, 24)})
}).addTo(map);

Another one is :

L.multiOptionsPolyline(points, {
    multiOptions: {
        optionIdxFn: function (latLng) {
            var i,
                altThresholds = [800, 900, 1000, 1100, 1200, 1300, 1400, 1500];

            for (i = 0; i < altThresholds.length; ++i) {
                if (latLng.alt <= altThresholds[i]) {
                    return i;
                }
            }
            return altThresholds.length;
        },
        options: [
            {color: '#0000FF'}, {color: '#0040FF'}, {color: '#0080FF'},
            {color: '#00FFB0'}, {color: '#00E000'}, {color: '#80FF00'},
            {color: '#FFFF00'}, {color: '#FFC000'}, {color: '#FF0000'}
        ]
    },
    weight: 5,
    lineCap: 'butt',
    opacity: 0.75,
    smoothFactor: 1}).addTo(map);

But I really can't figure out how to call these two one after another.

https://github.com/hgoebl/Leaflet.MultiOptionsPolyline
https://github.com/Igor-Vladyka/leaflet.motion

*** update *** My purpose is to create a polyline that can get the latitude and longitude of API records, and create a multicolor polyline that shows different intensity of the typhoon between each node of that polyline, and also shows the animation of the typhoon.

There is two function that I need to call (or maybe extend by another?)

Is there any way to call/initialize this two function, L.multiOptionsPolyline and L.motion.polyline?

1
  • hi i just edit the question again Sep 14, 2021 at 6:06

1 Answer 1

1

The two plugins can be combined by using the same points source for both.

Since you didn't describe the format/structure of your data, the example below uses [lat, lng, alt] structure for point.

Code could then look something like this:

var map = L.map('map').setView([46.2, 14.5], 8);

var points = [[46.0, 14.0, 700], [46.3, 14.2, 950], [46.2, 14.4, 1250], [46.3, 14.8, 1550], [46.5, 15, 1750]];
var altThresholds = [800, 900, 1000, 1100, 1200, 1300, 1400, 1500];

L.multiOptionsPolyline(points, {
  multiOptions: {
    optionIdxFn: function (latLng) {
      var i;
      for (i = 0; i < altThresholds.length; ++i) {
        if (latLng[2] <= altThresholds[i]) return i;
      }
      return altThresholds.length;
    },
    options: [
      {color: '#0000FF'}, {color: '#0040FF'}, {color: '#0080FF'},
      {color: '#00FFB0'}, {color: '#00E000'}, {color: '#80FF00'},
      {color: '#FFFF00'}, {color: '#FFC000'}, {color: '#FF0000'}
    ]
  },
  weight: 5,
  lineCap: 'butt',
  opacity: 0.75,
  smoothFactor: 1
}).addTo(map);      

L.motion.polyline(points, {
  color: "transparent"
}, {
  auto: true,
  duration: 3000,
  easing: L.Motion.Ease.easeInOutQuart
}, {
  removeOnEnd: true,
  showMarker: true,
  icon: L.divIcon({html: "<i class='fa fa-car fa-2x' aria-hidden='true'></i>", iconSize: L.point(27.5, 24)})
}).addTo(map);

This gives the following result:

enter image description here

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.