0

So I have already created table with searching filters and pagination. Now I would like to make it interact with map as well. Problem is I am trying to access geojson in wrong way, so maybe somebody can help.

My geojson:

{
    "type": "FeatureCollection",
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
    },

    "features": [{
            "type": "Feature",
            "properties": {
                "name": "Berlin",
                "country": "Germany"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [28.410585, -11.293361]
            }
        }, .......

    ]
}

The service that retrieves it:

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

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

The controller that puts it in the scope:

AppMapDirectory.controller("DirectoryMapList", function($scope, Directory, $filter) {
   Directory.query(function(data) {
      $scope.list = data.features;

   });

And the view:

<tr ng-repeat="hf in list">
<td>{{ hf.properties.name }}</td>
<td>{{ hf.properties.category }}</td>

</tr>

or

<tr ng-repeat="feature in list">
<td>{{ feature.properties.name }}</td>
<td>{{ feature.properties.category }}</td>

</tr>

I saw on stackoverflow that somebody was typing something like this:

$scope.list = data.features[];

but in my case json is not loading at all then

Mayby sb will say that i should use json instead of geojson, but my main point is to make map and table interactive so both will change if searching will work.

Or it is possible to use json data and geojson from the same source?

I plan to use leaflet directive with angular, it seems easy to use just geojson for map, but how to use geojson for table? Is it possible?

flup
  • 26,937
  • 7
  • 52
  • 74
Igor
  • 1,384
  • 3
  • 17
  • 34
  • The idea of a snippet is to create one complete working example. To simply display pieces of code, indent them with four spaces instead. – flup Dec 29 '14 at 12:07
  • thanks for making my code readable ;) – Igor Dec 29 '14 at 12:21

1 Answers1

1

Yes, geojson is just another case of json and it'll work fine.

There's directives like the leaflet directive that do all the hard work for you and allow you to easily display geojson on a map.

See https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/geojson-example.html for an example. You don't even need the ng-repeat.

I see something odd in your Directory service. You define the get method in the service, but call the query method in the controller. The query method, by default, expects to return an array and will throw an exception when it runs into your geojson data which is an object.

When I replace 

Directory.query(function(data)

with

Directory.get(function(data)

the table gets filled properly.

flup
  • 26,937
  • 7
  • 52
  • 74
  • i found this leaflet directive and geojson works already but just on map, i cannot display geojson in table. – Igor Dec 29 '14 at 12:18
  • i though about something similar to this http://www.zevross.com/web_development/worldcup/ , when searching is done table and map are changing dynamically. – Igor Dec 29 '14 at 12:37
  • i read somewhere how to add data by directory service and actually it works with query and plain json data, but it is obvious to me now that it is odd to define one thing and call other. Huge thanks ;) – Igor Dec 29 '14 at 13:35
  • both query and get can work, but the structure defined in result.json is an object, not an array. $resource gets upset when it receives an object in query, you'd have to configure it saying `query: {isArray: false}`. See also http://stackoverflow.com/questions/15725445/angularjs-resource-not-working-with-an-array-returned-from-a-rest-api – flup Dec 29 '14 at 13:44