search

angular-ui / ui-leaflet

AngularJS directive to embed an interact with maps managed by Leaflet library
http://angular-ui.github.io/ui-leaflet
Other
314 stars 134 forks source link

Random automatic markers destruction #79

Open nmccready opened 9 years ago

nmccready commented 9 years ago

From @rtp-calpoly on June 24, 2015 23:41

Randomly, I add a marker to the map and Angular Leaflet destroys it just right after I add it, see the attached screenshot.

Why is this happening? Angular Leaflet does not say anything else... how can I found out what is going on? I have not started any JSFiddle since it is a random error and it does not happen all the time.

screenshot from 2015-06-24 16 41 18

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

nmccready commented 9 years ago

Use master #815

nmccready commented 9 years ago

From @rtp-calpoly on June 25, 2015 5:58

I am using the version directly from the master through the production CDN of rawgit.com. As far as I could found out, the issue #815 has already been merged with the master repository; therefore, I think that I am still "suffering" this issue.

Here it is my main .html file that loads the JavaScript files:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Operations Interface</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/l-lin/font-awesome-animation/master/dist/font-awesome-animation.css" />
    <link rel="stylesheet" href="http://localhost:8081/satnet-ng-operations.min.css" />
</head>
<body>
    <div class="m-app-loading" ng-animate-children>
        <div class="animated-container">
            <div class="messaging">
                <h2>Operations Interface</h2>
                <h2>(loading)</h2>
                <i class="fa fa-spinner faa-spin animated loading-spinner"></i>
            </div>
        </div>
    </div>
    <operations-app></operations-app>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <!-- Non-ng Libraries -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment-with-locales.min.js"></script>
    <script src="//cdn.jsdelivr.net/momentjs/latest/moment-with-locales.min.js"></script>
    <script src="https://js.pusher.com/2.2/pusher.min.js"></script>
    <!-- Angular Framework -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.js"></script>
    <!-- Angular Leaflet -->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
    <script src="https://cdn.rawgit.com/tombatossals/angular-leaflet-directive/master/dist/angular-leaflet-directive.min.js"></script>
    <!--<script src="https://github.com/tombatossals/angular-leaflet-directive/blob/master/dist/angular-leaflet-directive.min.js"></script>-->
    <script src="https://cdn.rawgit.com/joergdietrich/Leaflet.Terminator/master/L.Terminator.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/Leaflet/Leaflet.label/master/dist/leaflet.label.css" />
    <script src="https://cdn.rawgit.com/Leaflet/Leaflet.label/master/dist/leaflet.label.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/master/dist/MarkerCluster.css" />
    <script src="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/master/dist/leaflet.markercluster.js"></script>
    <!-- Angular Moment -->
    <script src="https://cdn.jsdelivr.net/angular.moment/latest/angular-moment.min.js"></script>
    <!-- Angular Pusher -->
    <script src="https://cdn.jsdelivr.net/angular.pusher/latest/pusher-angular.min.js"></script>
    <!-- Angular Material -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.js"></script>
    <!-- Angular JSON-RPC -->
    <script src="https://cdn.rawgit.com/ajsd/angular-uuid/master/uuid.min.js"></script>
    <script src="https://cdn.rawgit.com/ajsd/angular-jsonrpc/master/src/jsonrpc.js"></script>
    <!-- Angular Remote Validate -->
    <script src="https://cdn.rawgit.com/webadvanced/ng-remote-validate/master/release/ngRemoteValidate.0.6.1.min.js"></script>
    <script src="http://localhost:8081/satnet-ng-operations.js"></script>
    <script src="http://localhost:8081/satnet-ng-operations-tpls.js"></script>
    <script>
        window.setTimeout(
            function () {
                angular.bootstrap(document, ['operationsDirective']);
            }, 500
        );
    </script>
</body>
</html>
nmccready commented 9 years ago

Ok, well please reproduce this with a MVCE https://github.com/angular-ui/angular-google-maps/wiki/MCVE

use plunkr or jsfiddle. I have plenty examples from either account to fork and get started.

nmccready commented 9 years ago

Please try master again. I would like to know b4 0.8.5 is cut.

nmccready commented 9 years ago

From @jessertaylor on July 2, 2015 10:13

I'm sure I was having a similar issue with latest release, it was only when I specified a group on the marker. I turned off clustering by omitting the group until I can work out what's going on.

nmccready commented 9 years ago

:+1:

nmccready commented 9 years ago

From @rtp-calpoly on July 2, 2015 16:3

Actually, I found out the real problem: this issue only happens when I try to load in parallel several markers at the same time. The following is the code that is working right now perfectly:

    serverModels.initStandalone().then(function (server) {
        $log.log('maps.js@init: Server =' + JSON.stringify(server));
        gsModels.initAll().then(function (gss) {
            $log.log('maps.js@init: Ground Station(s) = ' + JSON.stringify(gss));
        });
    });

"serverModels.initStandalone()" initializes one marker in a given position and "gsModels.initAll()" initializes a bunch of additional markers. As you can see, now I load the markers from "gsModels" just after the marker from "serverModels" has been loaded.

The issue, in my case, occurred when I loaded those markers in this way:

    serverModels.initStandalone().then(function (server) {
        $log.log('maps.js@init: Server =' + JSON.stringify(server));
    });
    gsModels.initAll().then(function (gss) {
        $log.log('maps.js@init: Ground Station(s) = ' + JSON.stringify(gss));
    });

In this case, markers from "serverModels" and from "gsModels" are loaded in parallel theoretically.

The problem is that the function _seeWhatWeAlreadyHave@src/markers.js that checks for the existance of the markers in "markerModels" and "oldMarkerModels", cannot find the marker that has been added and, therefore, removes it by invoking _destroy@src/markers.js.

I could not go any further since I do not understand very well the nature of this automatic markers destruction that looks like code necessary to preserve the compatibility with older versions.

If you could provide me some clarifications about this issue, I might be able of solving this problem.

nmccready commented 9 years ago

Ahh, sounds like we need another promise to indicate that we are in progress. So currently, (your Promises)(getMap(Promise) -> edit markers.

Would then need a queueing promise manager (done this b4 in agm).

(your Promises)(getMap(Promise) -> (Promise.Queue (make sure what follows is in order) edit markers`.

Like you said for now StandAlone is ok. You could also do it async via $q.all, $q.all(server.get,server.get).then -> update markers model.

nmccready commented 9 years ago

Also if you wanted less watch overhead you could use directiveControl.create, and clean. Then you would have no watch race condition and you would draw once as well. 

leafletData.getDirectiveControls(mapId)
        .then (controls) =>
          @directiveControls = controls

$q.all(server.get,server.get) => 
    @directiveControls.markers.create(data)
nmccready commented 9 years ago

From @rtp-calpoly on July 2, 2015 17:49

@nmccready , ok, thank you so much for your help. It looks like there is nothing else that I can do to help you since the changes required to solve this issue involve a promises manager. Please, let me know if I can help somehow.

nmccready commented 9 years ago

The workaround for now is for u to us $q.all and then update all the markers at once.

nmccready commented 9 years ago

From @rtp-calpoly on July 2, 2015 18:40

Ok, perfect! Thank you so much @nmccready ... should we close this issue?

nmccready commented 9 years ago

No its valid, and needs to be fixed. But a workaround should help for now.