different markers groups in leaftlet

Question

I am using Angular and leaflet and want to build a map with different markers, eg.: ships and bridges. I want to update them individually without removing and setting all markers again. So when I have new ships, I just want to call the ship markers, update them and the bridge markers stay the same.

Right now, I tried something like this:

angular.module('angularMapApp')
  .controller('MainCtrl', ['$scope', 'RequestService', 'setShipMarkers', '$q', function($scope, RequestService, setShipMarkers, $q) {

    angular.extend($scope, {
      hamburg: {
        lat: 53.551086,
        lng: 9.993682,
        zoom: 13
      },
      markers: {
        ships: {
          m1: {
              lat: 42.20133,
              lng: 2.19110
          },
          m2: {
              lat: 42.21133,
              lng: 2.18110
          }

        },
        bridges: {
            m3: {
                lat: 42.19133,
                lng: 2.18110
            },
            m4: {
                lat: 42.3,
                lng: 2.16110
            }

        }
      },
      defaults: {
        tileLayer: 'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',
        zoomControlPosition: 'topright',
        tileLayerOptions: {
            opacity: 0.9,
            detectRetina: true,
            reuseTiles: true,
        },
        scrollWheelZoom: false
      }
    });

But this does not works, as I get the following error (after setting markers-nested: true in my view):

You must add layers to the directive if the markers are going to use this functionality.

However why do I need layers, if I just want to call different markers group on the same layer. I just do not want to update all of them at once.

So maybe someone can tell me, how to get separate marker groups and how to call them to update them.

Answer 1

For each kind of nested marker you have to create its own group layer like this, they can be empty:

layers: {
    overlays: {
        ships: { // use the same name as in the marker object
            name: "Ships",
            type: "group",
            visible: true
        },
        bridges: { // use the same name as in the marker object
            name: "bridges",
            type: "group",
            visible: true
        }
    } 
}

By doing that you will also have to move the OSM base layer into the layers.baselayers object, but markers-nested="true" works this way.

Demo: http://plnkr.co/edit/HQx8bQmmsFUGcLxYt95N?p=preview