Show label on click.

[that1guy]

mouseOver is working, but I'm aiming to keep the label viewable and static when the user clicks on the icon.

  //Init when user clicks on a marker.  Opens the property details side pane
  $scope.$on('leafletDirectiveMarker.click', function(event, marker){

    //Zoom in on marker
    $scope.map.center = {
      lat: marker.model.lat,
      lng: marker.model.lng,
      zoom: 14
    };

    //How can I programatically show the label and keep it static?????????
    $scope.map.markers[marker.modelName].label.options.noHide = true;

    //Change marker icon to indicate it's been clicked
    $scope.map.markers[marker.modelName].icon.className = $scope.map.markers[marker.modelName].icon.className + ' clicked';
  });

Also, I assume once someone answers this that I can hide the label after the user "blurs" from the icon?

[MattSidor]

I'm struggling with this same issue right now. I want the labels to appear on mouseover AND I want the labels to become static on click. I'll let you know if I find a good solution to this.

[MattSidor]

@that1guy, I got this working.

First, I think it's important to note that you and I are both using AngularJS, as evidenced by your use of the $scope variable. I assume you're also using either angular-leaflet-directive or angular-ui/ui-leaflet?

It's a little counter-intuitive, but when I initialize the markers, I omit the label. Then, I create/destroy the label properties dynamically on events, like this:

$scope.marker[key] = {
  lat: xx.xxxx,
  lng: yy.yyyy,
};

$scope.$on('leafletDirectiveMarker.click', function (event, args) {
  $scope.markers[args.modelName].label = {    //args.modelName = key
    message: 'This is the label',
    options: {
      noHide: true
    }
  };
});

When I need to remove the label, I just delete the property:

delete $scope.markers[key].label;

Hope this helps you!