Ionic-Multiple tabs-Multiple leaflet maps not working

I want to create an ionic app having multiple tabs with respective controllers where each is bound by a template that loads a different leaflet customized map with different url, tiles and all. but i am not being able to do that in ionic using or .

I even had tried doing data-tap-disabled=“true” but it did not work.

Everytime a blank screen is shown when the tab containing the maps are clicked/loaded.

I saw one post sir, @aaronksaunders claiming you have a codepen where it is solved but i could not find any working demo or code. My code is below (showing only one controller and map template)


<link href="lib/ionic/css/ionic.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/leaflet.css"/>
<link href="css/style.css" rel="stylesheet"/>

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/" rel="stylesheet">

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<script src="lib/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->


    <h1 class="title">Geo</h1>

    <ion-tabs class="tabs-stable tabs-icon-top tabs-positive">
    <ion-tab title="Map" icon="ion-map" href="#/maps">
    <ion-nav-view name="maps"></ion-nav-view>
    <ion-tab title="Satellite" icon="ion-home" href="#/satellite"">
      <ion-nav-view name="satellite"></ion-nav-view>


angular.module(‘mobile-app1’, [‘ionic’, ‘ngCordova’])

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)

  // Don't remove this line unless you know what you are doing. It stops the viewport
  // from snapping when text inputs are focused. Ionic handles this internally for
  // a much nicer keyboard experience.
if(window.StatusBar) {

.config(function($stateProvider, $urlRouterProvider) {
.state(‘maps’, {
url: ‘/maps’,
views: {
‘maps’: {
templateUrl: ‘templates/map-images.html’,
controller: ‘MapImagesController’
.state(‘satellite’, {
url: ‘/satellite’,
views: {
‘satellite’: {
templateUrl: ‘templates/satellite-images.html’,
controller: ‘SatelliteImagesController’





angular.module(‘mobile-app1’).controller(‘MapImagesController’, [’$scope’, function ($scope){

if ($ != undefined) { $; }

$ = new'map');

var wmsLayer1 = L.tileLayer(‘http://{s}{z}/{x}/{y}.png’, {
attribution: ‘© OpenStreetMap contributors’,
maxZoom: 18,


I cannot use a/dont want to use angular-leaflet-directive as it cannot fullfill my requirement , i will have to use custom leaflet library maps only.
Any help would be gladly appreciated.
Its a bit Urgent!!! :frowning: