<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Tabs Example</title>

    <link href="https://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
    <link href="https://tombatossals.github.io/angular-leaflet-directive/bower_components/leaflet-dist/leaflet.css"
          rel="stylesheet">    
    <script src="https://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
    <script src="https://tombatossals.github.io/angular-leaflet-directive/bower_components/leaflet-dist/leaflet.js"></script>
    <script src="https://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script>    
  </head>

  <body>

    <ion-nav-bar animation="nav-title-slide-ios7" class="bar-positive">
      <ion-nav-back-button class="button-icon ion-arrow-left-c">
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view animation="slide-left-right"></ion-nav-view>


    <script id="tabs.html" type="text/ng-template">
      <ion-tabs tabs-type="tabs-icon-top" tabs-style="tabs-positive">

        <ion-tab title="MAP ONE" icon="ion-home" href="#/tab/home">
          <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="MAP TWO" icon="ion-ios7-information" href="#/tab/about" >
          <ion-nav-view name="about-tab"></ion-nav-view>
        </ion-tab>

      </ion-tabs>
    </script>

    <script id="home.html" type="text/ng-template">
      <ion-view title="MAP ONE" ng-if="onTabOne" >
       <content has-header="true" padding="true">
          <leaflet id='map1'  height="300px" width="100%" ng-if="onTabOne" ng-init="doInit()"></leaflet>
        </content>
      </ion-view>
    </script>

    <script id="about.html" type="text/ng-template">
      <ion-view title="MAP TWO" ng-if="onTabTwo">
        <div padding=true >
          <button ng-click="hideMap = !hideMap">HIDE MAP</button>
          <button ng-click="addMarker()">ADD MARKER</button>
          <div >
            <leaflet id='map2'  height="300px" width="100%" ng-if="onTabTwo"></leaflet>
          </div>
        </div>
      </ion-view>
    </script>

  </body>
</html>
angular.module('ionicApp', ['ionic','leaflet-directive'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
  .state('tabs', {
    url: "/tab",
    abstract: true,
    templateUrl: "tabs.html"
  })
  .state('tabs.home', {
    url: "/home",
    views: {
      'home-tab': {
        templateUrl: "home.html",
        controller: 'HomeTabCtrl'
      }
    }
  })
  .state('tabs.about', {
    url: "/about",
    views: {
      'about-tab': {
        templateUrl: "about.html",
        controller: 'AboutTabCtrl'
      }
    }
  });


  $urlRouterProvider.otherwise("/tab/home");

})
.controller('AboutTabCtrl', function($scope,$log,leafletData) {
  $scope.onTabTwo = true;
  $scope.onTabOne = false;

  leafletData.getMap('map2').then(function(map) {
    $scope.map = map; 
    $log.info(map);
  });

})
.controller('HomeTabCtrl', function($scope,$log,leafletData) {
  $scope.onTabTwo = false;
  $scope.onTabOne = true;  


  $scope.doInit = function() {
    leafletData.getMap('map1').then(function(map) {
    $scope.map = map; 
    $log.info(map);
      $log.info(map);
    });
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.