<!DOCTYPE html>
<html ng-app="demoapp">
  <head>
    <script src="../bower_components/openlayers/ol.js"></script>
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
    <script src="../dist/angular-openlayers-directive.js"></script>
    <link rel="stylesheet" href="../bower_components/openlayers/ol.css" />
    <script>
      var app = angular.module("demoapp", ["openlayers-directive"]);
      app.controller("GeoJSONController", [ '$scope', '$http', 'olData', function($scope, $http, olData) {
        angular.extend($scope, {
            center: {
                lat: 37.30674709224663,
                lon: -80.83827000459532,
                zoom: 5
            },
            layers: [
                {
                    name: 'geojson',
                    source: {
                        type: 'GeoJSON',
                        url: 'json/countries.geo.json'
                    }
                },
                {
                    name: 'features',
                    source: {
                        type: 'GeoJSON',
                        url: 'json/features.json'
                    }
                }
            ],
            defaults: {
                events: {
                    layers: [ 'mousemove', 'click' ]
                }
            }
        });

        $scope.$on('openlayers.layers.geojson.mousemove', function(event, feature) {
            $scope.$apply(function(scope) {
                if(feature && $scope.countries[feature.getId()]) {
                    $scope.mouseMoveCountry = feature?$scope.countries[feature.getId()].name:'';
                }
            });
        });

        $scope.$on('openlayers.layers.geojson.click', function(event, feature) {
            $scope.$apply(function(scope) {
                if(feature) {
                    $scope.mouseClickCountry = feature?$scope.countries[feature.getId()].name:'';
                }
            });
        });

        $scope.$on('openlayers.layers.features.mousemove', function(event, feature) {
            $scope.$apply(function(scope) {
                if(feature) {
                    $scope.mouseMoveFeature = feature.get('name');
                }
            });
        });

        $scope.$on('openlayers.layers.features.click', function(event, feature) {
            $scope.$apply(function(scope) {
                if(feature) {
                    $scope.mouseClickFeature = feature.get('name');
                }
            });
        });

        // Get the countries data from a JSON
        $http.get("json/all.json").success(function(data, status) {
            // Put the countries on an associative array
            $scope.countries = {};
            for (var i=0; i< data.length; i++) {
                var country = data[i];
                $scope.countries[country['alpha-3']] = country;
            }
        });
      } ]);
      </script>
  </head>
  <body ng-controller="GeoJSONController">
     <openlayers ol-center="center" ol-defaults="defaults" height="400px">
         <ol-layer ol-layer-properties="layer" ng-repeat="layer in layers"></ol-layer>
     </openlayers>
     <h1>Layers GeoJSON events example</h1>
     <p>Mouse over this country: {{ mouseMoveCountry }}</p>
     <p>Mouse clicked this country: {{ mouseClickCountry }}</p>

     <p>Mouse over this feature: {{ mouseMoveFeature }}</p>
     <p>Mouse clicked this feature: {{ mouseClickFeature }}</p>
  </body>
</html>
