Ionic-Multiple tabs-Multiple leaflet maps not working

@avi_thecoders123 wrote:

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)

Index.html

<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/ionic.app.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 -->

<ion-nav-view>

  <ion-header-bar>

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


 </ion-header-bar>
    <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>
    <ion-tab title="Satellite" icon="ion-home" href="#/satellite"">
      <ion-nav-view name="satellite"></ion-nav-view>
    </ion-tab>
  </ion-tabs>
</ion-nav-view>

App.js

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)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

  // 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.
  cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
  StatusBar.styleDefault();
}

});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.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'
}
}
})

$urlRouterProvider.otherwise('/maps');

});

map-images.html

mapimagescontroller.js

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

if ($scope.map != undefined) { $scope.map.remove(); }

$scope.map = new L.map('map');

var wmsLayer1 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
maxZoom: 18,
}).addTo($scope.map);

}]);

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!!!

Posts: 1

Participants: 1

Read full topic