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