examples/0125-basic-geojson-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("GeoJSONNestedController", [ '$scope', '$http', 'leafletData', function($scope, $http, leafletData) {
        leafletData.getGeoJSON().then(function(lObjs){
            window.leafletDataGeoJSON = lObjs;
        });

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

        // Mouse over function, called from the Leaflet Map Events
        var countryMouseover = function (feature, leafletEvent) {
            var layer = leafletEvent.target;
            layer.setStyle({
                weight: 2,
                color: '#666',
                fillColor: 'white'
            });
            layer.bringToFront();
        };

        $scope.$on("leafletDirectiveGeoJson.mouseover", function(ev, leafletPayload) {
            countryMouseover(leafletPayload.leafletObject.feature, leafletPayload.leafletEvent);
        });


        $scope.centerJSON = function(name) {
            leafletData.getMap().then(function(map) {
                window.leafletMap = map;
                var latlngs = [];
                for (var i in $scope.geojson[name].data.features[0].geometry.coordinates) {
                    var coord = $scope.geojson[name].data.features[0].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) {
            angular.extend($scope.geojson, {
                japan: {
                    data: data,
                    resetStyleOnMouseout: true,
                    style: {
                        fillColor: "green",
                        weight: 2,
                        opacity: 1,
                        color: 'white',
                        dashArray: '3',
                        fillOpacity: 0.7
                    }
                }
            });
        });
        $http.get("json/USA.geo.json").success(function(data, status) {
            angular.extend($scope.geojson, {
                usa:{
                    data: data,
                    resetStyleOnMouseout: true,
                    style: {
                        fillColor: "blue",
                        weight: 2,
                        opacity: 1,
                        color: 'white',
                        dashArray: '3',
                        fillOpacity: 0.7
                    }
                }
            });
        });
    } ]);
    </script>
</head>
<body ng-controller="GeoJSONNestedController">
    <leaflet center="japan" geojson="geojson" geojson-nested="true" width="100%" height="480px"></leaflet>
    <h1>GeoJSON nested example</h1>
    <input type="button" value="center usa" ng-click="centerJSON('usa')" />
    <input type="button" value="center jpn" ng-click="centerJSON('japan')" />
</body>
</html>