examples/0123-basic-hide-show-map-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.min.js"></script>
    <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
    <script>
        var app = angular.module("demoapp", ["leaflet-directive"]);
        app.controller('BasicHideShowMapController', function($scope, $timeout, leafletData) {
            $scope.center = {
                lat: 35,
                lng: 0,
                zoom: 8
            };

            $scope.showMap = false;
            $scope.$watch("showMap", function(value) {
                if (value === true) {
                    leafletData.getMap().then(function(map) {
                      $timeout(function() {
                        map.invalidateSize();
                      }, 300);
                    });
                }
            });
        });
    </script>
  </head>
  <body ng-controller="BasicHideShowMapController">
    <leaflet ng-show="showMap" width="100%" height="320px" center="center"></leaflet>
    <h1>Hide/Show map example</h1>
    <p>Select to show the map <input type="checkbox" ng-model="showMap"></p>
    <p>Center: {{ center }}</p>
  </body>
</html>