examples/0124-basic-geojson-non-nested-example.html

<!DOCTYPE html>
<html ng-app="demoapp">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="../bower_components/leaflet/dist/leaflet.js"></script><script src="../bower_components/angular-simple-logger/dist/index.js"></script>
    <script src="../dist/angular-leaflet-directive_dev_mapped.js"></script>
    <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
    <script>
    var app = angular.module("demoapp", ["leaflet-directive"]);
    app.controller("GeoJSONNonNestedController", [ '$scope', '$http', 'leafletData', function($scope, $http, leafletData) {

        var getColor = function(id){
            return id == 'USA'? 'blue' : 'green';
        };

        var getStyle = function(feature){
            return {
                fillColor: getColor(feature.id),
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7
            };
        };

        var createGeoJsonObject = function (data){
            return {
                data: data,
                style: getStyle
            };
        };

        angular.extend($scope, {
            japan: {
                lat: 27.26,
                lng: 78.86,
                zoom: 2
            },
            defaults: {
                scrollWheelZoom: false
            },
        });

        $scope.centerJSON = function(index) {
            leafletData.getMap().then(function(map) {
                var latlngs = [];
                for (var i in $scope.geojson.data.features[index].geometry.coordinates) {
                    var coord = $scope.geojson.data.features[index].geometry.coordinates[i];
                    for (var j in coord) {
                        var points = coord[j];
                        for (var k in points) {
                            latlngs.push(L.GeoJSON.coordsToLatLng(points[k]));
                        }
                    }
                }
                map.fitBounds(latlngs);
            });
        };

        // Get the countries geojson data from a JSON
        $http.get("json/JPN.geo.json").success(function(data, status) {
            if(!$scope.geojson){
                $scope.geojson = createGeoJsonObject(data);
            }
        });
        $http.get("json/USA.geo.json").success(function(data, status) {
            var features = $scope.geojson.data.features.concat(data.features);
            var copy = angular.extend({}, $scope.geojson.data);
            copy.features = features;
            $scope.geojson.data = copy;
        });
    } ]);
    </script>
</head>
<body ng-controller="GeoJSONNonNestedController">
    <leaflet center="japan" geojson="geojson" width="100%" height="480px"></leaflet>
    <h1>GeoJSON non nested example</h1>
    <input type="button" value="center usa" ng-click="centerJSON(1)" />
    <input type="button" value="center jpn" ng-click="centerJSON(0)" />
</body>
</html>