Extending markers

[nmccready]

From @rtp-calpoly on December 27, 2014 19:14

I am currently using both angular-leaflet-directive and some "fancy" markers called MovingMarkers that you can find in the following repository:

https://github.com/ewoken/Leaflet.MovingMarker

Right now, I think that angular-leaflet has no support for them (please correct me if I am wrong); so I was thinking on trying to extend angular-leaflet so that I can handle them as a regular marker and not apart. Could somebody help me with the following basic questions?

1. Is there any guide/example that I can use as a base for extending angular-leaflet in order to support this type of markers?
2. MovingMarker has not been registered in Bower yet, so I was wondering if doing that first would be appropriate for integrating them better later in angular-leaflet.

Thanks in advance for the help.

Copied from original issue: tombatossals/angular-leaflet-directive#583

[nmccready]

From @tombatossals on December 29, 2014 12:20

Hi @rtp-calpoly, really nice plugin MovingMarkers, I think it would be great to integrate it with angular-leaflet-directive.

I have registered some unregistered projects in bower, there's no problem about that. You could notice the author in github about this after that, he/she will agree with it for sure.

Unfortunately there's no guide about integrating plugins, some of them are really easy to integrate and others more complicated. I think this would be not much complicated, we can talk about how to integrate it here if you want.

First of all, I would decide how are you going to declare the movement inside a marker object, and after that, you can make use of the MovingMarker plugin to accomplish it. What do you think about this as a starting point?

markers: {
    london: {
        lat: 51.5,
        lng: 0,
        movement: {
            path: [{
                lat: 51.507222,
                lng: -0.1275
           }, {
               lat: 48.8567,
               lng: 2.3508
           }, 
           duration: 4000
        }
    }
}

If you like it we can continue integrating it inside angular-leaflet.

[nmccready]

From @rtp-calpoly on December 29, 2014 19:35

HI @tombatossals!

First of all, thanks for the quick reply and for the help! I think that the steps that you propose are the proper ones, so I will try to register the MovingMarker project within Bower as a first step.

For the structure, it looks good but I would also include the following options:

1. moving markers require the durations in between all the points of the path, therefore movement.duration should better be an array;
2. this library permits the following additional boolean parameters: loop and autostart;
3. I am also binding a label to the moving markers, so maybe including the options for the standard marker could also be an asset;
4. the initial latlng for the marker is the first element of the positions array.

Pretty much, the structure should look like your original one:

markers: {
    london: {
         label: {
              message: "Moving marker",
              options: {
                   noHide: true
              }
        },
        movement: {
            path: [{
                lat: 51.507222,
                lng: -0.1275
            }, {
               lat: 48.8567,
               lng: 2.3508
            }], 
            durations: [
                4000
            ]
        }
    }
}

Let me know what you think. I have already taken a look at your code for the angular-leaflet-directive project and my idea is to use the way you integrate the markers as an example. Do you think that that would be a good example to follow?

[nmccready]

From @tombatossals on December 30, 2014 7:42

It looks perfect to me, I only would re-add the "lat/lng" properties with the marker starting point into the marker root, so a moving marking could be compatible with a static marker, and viceversa. Maybe it's redundant but this way we will not need to change actual markers code. So this could be the structure:

markers: {
    london: {
         lat: 51.507222,
         lng: -0.1275,
         label: {
              message: "Moving marker",
              options: {
                   noHide: true
              }
        },
        movement: {
            path: [{
                lat: 51.507222,
                lng: -0.1275
            }, {
               lat: 48.8567,
               lng: 2.3508
            }], 
            durations: [
                4000
            ]
        }
    }
}

Next step would be what you say, make a simple example with the new marker structure, and after that make it work :)

1. Add MovingMarkers into bower.json
2. Create the example: "markers-moving-markers-example.html" (or some name like that).
3. Start coding.

I'm going to create a new branch into the project calling "movingmarkers". We could start pushing code there if this looks good to you.

[nmccready]

From @rtp-calpoly on December 30, 2014 7:49

Ok, looks great! I have already forked the repository and sent a message (through an issue) to the owner. I will start working on my forked code and, if in a couple of days I do not receive a reply, I will try to reach him through email directly.

Thanks for the advices! It looks like a good plan!

[nmccready]

From @jar04h on August 11, 2015 11:51

Hi ya'll. What is the status on this? I saw a commit to a branch named movingmarkers (afce4c5) but nowhere could I find the documentation on how to use the MovingMarker plugin with the ng-leaflet directive.

Sincerely,

[nmccready]

From @rtp-calpoly on August 12, 2015 6:40

Hi all,

I actually stopped working on this issue since I found it a bit complicated for the amount of time that I can potentially spend on it.

Best, Ricardo.