Leaflet Map Directive in Ionic

Developer
Aaron K Saunders
Size
2,517 Kb
Views
184,184
  1. Leaflet Map Directive in Ionic Previews
  2. Leaflet Map Directive in Ionic HTML Codes
  3. Leaflet Map Directive in Ionic JS Codes

How do I make an leaflet map directive in ionic?

Trying to use two tabs with a leaflet directive in each one and as soon as the two maps are rendered in the page... everything seems to lock up.. What is a leaflet map directive in ionic? How do you make a leaflet map directive in ionic? This script and codes were developed by Aaron K Saunders on 25 September 2022, Sunday.

Leaflet Map Directive in Ionic Previews
IQ Test

Leaflet Map Directive in Ionic - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Leaflet Map Directive in Ionic</title>
</head>
<body> <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> <script src="js/index.js"></script>
</body>
</html>

Leaflet Map Directive in Ionic - Script Codes JS Codes

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); }); }
});
Leaflet Map Directive in Ionic - Script Codes
Leaflet Map Directive in Ionic - Script Codes
Home Page Home
Developer Aaron K Saunders
Username aaronksaunders
Uploaded September 25, 2022
Rating 3
Size 2,517 Kb
Views 184,184
Do you need developer help for Leaflet Map Directive in Ionic?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Aaron K Saunders (aaronksaunders) Script Codes
Name
A Pen by aaron k saunders
Demo ui-router basic state change
Firebase Login Example
Using ui-router to control application flow
A Pen by aaron k saunders
Ionic 2 Tabs Starter
A Pen by aaron k saunders
Angular2 Http Example
Promise sample for Cross-Platform mobile application class
Google Map Directive in Ionic
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!