[AngularJS] Filtering geojson change dynamically in table and on map

[igorhola853]

Right now i try to figure out how to make geojson filter with ng-model 
search

I know that geojson has attribute filter, so my question is how should it 
be done ? I assume there is no way to do simple geojson | filter:search, so 
it should be done on the side of angular?

I found good solution but it works only with mapbox, it is possible to do 
something like below with leaflet-angular-directive?

<mapbox map-id="examples.map-i86l3621" lat="11.403569" lng="8.329453" zoom="3">

    <div ng-repeat="hf in hf_directory |filter:search">
 <marker lat="{{hf.geometry.coordinates[1]}}" 
lng="{{hf.geometry.coordinates[0]}}" color="#39cccc">
    </marker>
    </div>

</mapbox>



I use simple filtering 

<input ng-model="search.properties.Primary_Name" placeholder="Primary Name" >



<tr ng-repeat="hf in hf_directory| filter:search">



My Template:

<leaflet id="map" center="center" defaults="defaults" geojson="geojson">


</leaflet>



I use leaflet-angular-directive and it looks like this:

    

var AppMapDirectory = angular.module('DirectoryAppMap', ['ngResource', 
'leaflet-directive']);

AppMapDirectory.factory("Directory", function($resource) {
   return $resource("json/result.json", {}, {
       get: {
           method: "GET",
           cache: true
       }
   });
});



AppMapDirectory.controller("DirectoryMapList", ["$scope", "Directory", 
"$filter", function($scope, Directory, $filter) {




    Directory.get(function(data) {

       $scope.hf_directory = data.features;


        function onEachFeature(feature, layer) {
                layer.bindPopup("<b>Name:</b> " + feature.properties.Name +
                    "<br><b>Category:" + feature.properties.Category +
                    "<br>Primary Name:" + feature.properties.Primary_Name + "");
            }


         angular.extend($scope, {
           geojson: {

               onEachFeature: onEachFeature,
               data: $scope.hf_directory
           }

       });

       });


    angular.extend($scope, {
        defaults: {
            tileLayer: 
"https://dnv9my2eseobd.cloudfront.net/v3/foursquare.map-ikj05elx/{z}/{x}/{y}.png";,
            maxZoom: 14,
            minZoom: 1
        },
        center: {
            lat: 8.1238,
            lng: 11.8777,
            zoom: 2
        }
    });


-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.