2015년 1월 6일 화요일

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

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        }
    });





Actually i wrote simple filter function for geojson, but maybe somebody could show me direction how to make that this function will work together with input ng-model search?
The  way as i did it is not dynamic

function filter(feature) {
    return feature.properties.PrimaryName == "somename";
}

         angular.extend($scope, {
           geojson: {
              onEachFeature: onEachFeature,               data: $scope.hf_directory,               filter:filter           }

       });


댓글 없음:

댓글 쓰기