When adding new markers dynamically, all existing markers lose their labels

[style-x7]

Hi @tombatossals,

Using static image map, I managed to add marker at the point clicked on the map. However, the existing label message of the existing markers will teleport to the top left of the map.

Looking at the webpage source code, the "popup-label marker ng-binding" of the existing markers are outside of the "ol-viewport", only the "popup-label marker ng-binding" of the newly added marker is inside the "ol-viewport".

Code snippet (html):

<openlayers ol-center="center" ol-markers="markers" height="400px" width="100%">
    <ol-layer ol-layer-properties="staticlayer"></ol-layer>
    <ol-marker ng-repeat="marker in markers" ol-marker-properties="marker"></ol-marker>
</openlayers>

Code snippet (js):

  $scope.$on('openlayers.map.singleclick', function(event, coordinate) {
      $scope.$apply(function() {
        $scope.markers.push({
          coord: coordinate.coord,
          projection: 'pixel',
          label: {
              message: "asd",
              show: true          
          }
        });
      });
  });

[style-x7]

Managed to do a workaround:

• Whenever a new marker is dynamically added, store previously markers, clear all markers = [], recreate the markers including the new one.

[carpiediem]

It seems like it would be a lot better if the directive could be modified to respond to AngularJS' normal filtering techniques. I've created this gist as an example. Since I'm not smart enough to edit the directive myself, I'll follow style-x7's advice for now.

[jgastonraoul]

I have the same problem of label teleportation... Any update ?

[bharathnav]

Hi that sounds like a nice solution. But it has some problem like, if we have many markers say 1000, then it will iterate those many markers back to plot them on the map. Is it possible to replace only the changed/newly-added marker on the map. It would really boost the performance and also the look and feel for the end user.

[juristr]

Related to #222