How to Filter Markers with Angular-Leaflet-Directive and a Custom Filter

Question

I'm using the Angular-Leaflet Directive and trying to figure out how to filter the markers using data from a input text box and the data property of the marker object. Everything I try results in an angular infinite digest loop.

This is what I have so far:

var app = angular.module('mapApp', ['leaflet-directive']);

//Filter
$scope.filterTerm;

//Controller
    app.controller("mapController", ['$scope', function ($scope) {

        $scope.center = {
            lat: 53.4239,
            lng: -7.9407,
            zoom: 7
        };
        //declare sample points
        $scope.samplePoints = [
              {
                  lat: 53.37,
                  lng: -9.48,
                  data : 'K',
                  hidden: true
              },
            {
                lat: 54.2314131,
                lng: -8.5744558,
                data: 'L',
                hidden: true
            }
        ];

    }]);

And the html

 <input type="text" ng-model="filterTerm" />

 <leaflet center="center" markers="markers| markers="markers | filter: filterTerm " style="height: 900px;"></leaflet>

I've used this Stack Overflow answer, and have been trying for hours but everything I try gets the same error. Help greatly appreciated.

I should have mentioned that I'm working in Visual Studio. This Plunker example plnkr.co/edit/gcxmAkAPutjN47NsO3Aa?p=preview works fine until I put it into Visual Studio (both with and without layout) — user3722622

Unknown Unknown · Accepted Answer · 2016-06-15T09:33:14

This was a Visual Studio 2013 issue - I performed a fresh install of Visual Studio 2013 and problem solved.

How to Filter Markers with Angular-Leaflet-Directive and a Custom Filter

1 Answers