tombatossals / angular-leaflet-directive

AngularJS directive to embed an interact with maps managed by Leaflet library
http://tombatossals.github.io/angular-leaflet-directive
MIT License
1.5k stars 635 forks source link

Issue on watch for Objects when change it's sequence #1047

Open klederson opened 8 years ago

klederson commented 8 years ago

I had to create a system that refresh the objects from a map (will not explain the reason and I know that reload all paths can be heavy)...

Anyway this adapter separate everything like this:

{
  "markers": [],
  "circles": [],
  "lines": [],
  "polygons": []
}

Then in the time to generate a unique paths object i do something similar to this:

var objects = service._getDriverObjectsData(mapName);

var response = [];

var allowed = ["circles" , "lines", "polygons"];

for(var i in objects) {
    if(allowed.indexOf(i) > -1) {
        response = response.concat(objects[i]);
    }
}

return response;

So in the end what happen is if i keep adding elements in the order:

Add N lines: OK
than
Add N circles: OK
than
Add N polygons: OK

BUT if i follow that sequence and than try to add any line or circle i get:

TypeError: t.setLatLng is not a function
    at Object.d.circle.setPath (dependencies.min.js:14)
    at setPathOptions (dependencies.min.js:14)
    at Object.fn (dependencies.min.js:15)
    at p.$digest (dependencies.min.js:3)
    at p.$apply (dependencies.min.js:3)
    at HTMLButtonElement.<anonymous> (dependencies.min.js:5)
    at HTMLButtonElement.Zt.n (dependencies.min.js:1)

Same happens if i start adding a polygon and try to add a line or circle and also the same happens if i add a circle and try to add a line ( in that sequence ) so this is the scenario:

Add N circles: OK
than
Add N polygons: OK
than
Add N lines: ERROR
Add N polygons: OK
than
Add N lines: ERROR
than
Add N circles: ERROR
Add N polygons: OK
than
Add N circles: ERROR
than
Add N lines: ERROR

ONE of my theories is that happens because in the parse algorithm it changes the sequence from the directive ( example: in a case that in the array of paths index 1 was a circle ... now it became a line and the parse get the error when i "refresh" the paths object ).

Following attached a small video from what I just said:

https://www.dropbox.com/s/3fj93xni6hz0d2l/leaflet-directive-bug.mov?dl=0

klederson commented 8 years ago

By the way i know i can preserve the sequence by changing my code, the purpose of this bug is to explict that exists and it's wrong

klederson commented 8 years ago

By the way if anyone is interested the fix ( in my case ) to keep the sequence but keep the objects separated by type in my directive is the following.

getPolygons: function(mapName) {
                var objects = service._getDriverObjectsData(mapName);

                var response = [];

                var allowed = ["circles" , "lines", "polygons"];

                for(var i in objects) {
                    if(allowed.indexOf(i) > -1) {
                        response = response.concat(objects[i]);
                    }
                }

                //@see https://github.com/tombatossals/angular-leaflet-directive/issues/1047
                var sorter = function(a,b) {
                    if (a._timestamp < b._timestamp)
                        return -1;
                    else if (a._timestamp > b._timestamp)
                        return 1;
                    else
                        return 0;
                };

                response.sort(sorter);

                return response;
            },

Note that the same approach can be used inside the directive to avoid this kind of workarround...

My suggestion is to put a timestamp in each object ( in the angular-leaflet-directive core ) so the user does not have to handle this order.