[GIS] Changing list-item css class using ng-class when mousing over Leaflet Map Markers

leaflet

I have an app with a map/markers on the right and a list-item menu on the left with info about the markers (like Yelp or Foursquare).

With some of my beginner hacking, I got the hover events to sort of work:

Map examp

But it's odd, the list-item (pink background on hover) only works when I mouseout of the marker. I'm trying to set it up so that when you mouse over the marker, the appropriate list-item's background changes and when you mouseout, it goes back to white. Most of the other ng-class examples/questions I read through seem to work quite differently (they're going for a different functionality).

Ok, to the code:

HTML

<div class="col-md-6" id="leftCol">
<div class="list-group" ng-controller="ShowsCtrl">
    <div class="nav nav-stacked list-group-item" id="sidebar" ng-repeat="(key, show) in shows.features" ng-mouseover="menuMouse(show)" ng-mouseout="menuMouseout(show)" ng-class="{hover: $index == hoveritem}">

The key part there is the ng-class="{hover: $index == hoveritem}"

Now I'll show you where hoveritem comes from

Controller

$scope.hoveritem = {};

    function pointMouseover(leafletEvent) {
        var layer = leafletEvent.target;
        //console.log(layer.feature.properties.id);
        layer.setIcon(mouseoverMarker);
        $scope.hoveritem = layer.feature.properties.id;
        console.log($scope.hoveritem);
    }

    function pointMouseout(leafletEvent) {
        var layer = leafletEvent.target;
        layer.setIcon(defaultMarker);
    }

    $scope.menuMouse = function(show){
        var layer = layers[show.properties.id];
        //console.log(layer);
        layer.setIcon(mouseoverMarker);
    }

    $scope.menuMouseout = function(show){
        var layer = layers[show.properties.id];
        layer.setIcon(defaultMarker);
    }




    // Get the countries geojson data from a JSON
    $http.get('/json/shows.geojson').success(function (data, status) {

        angular.extend($scope, {
            geojson: {
                data: data,
                onEachFeature: function (feature, layer) {
                    layer.bindPopup(feature.properties.artist);
                    layer.setIcon(defaultMarker);
                    layer.on({
                        mouseover: pointMouseover,
                        mouseout: pointMouseout
                    });
                    layers[feature.properties.id] = layer;
                    //console.log(layers);
                }
            }

        });
    });

}]);

So mousing over a marker
(layer.on({
mouseover: pointMouseover,
mouseout: pointMouseout
});)

fires the appropriate functions which then changes the icon colors.

I connected the layer.feature.properties.id; to $scope.hoveritem so that my HTML can then use that as the index (for ng-class). When you mouseover a marker, it then feeds the marker id through to $scope.hoveritem which then it turn goes into the $index part of the HTML, thus changing it's CSS class.

But something is awry. It only changes to the correct list item on mouseout instead of mouseover. Furthermore, I can't figure out to get it to return to the default white state. None of the list items should look active if the mouse is not on a marker.

Best Answer

The reason for the delay was because of the angular $apply digest cycle. Angular basically wasn't aware of the changes to hoveritem. Wrapping it with $scope.$apply did the trick:

$scope.$apply(function () {
            $scope.hoveritem = layer.feature.properties.id;
        })
Related Question