Geek Answers Handbook

Ionic / angular leaflet directive - increase / decrease buttons do not work

I have some problems with the default zoom buttons on the elevator map. Everything works fine when I load the page directly, but when I change one state to a state where the leaflet directive is buttons, it just doesn't work. Here you can give an example.

http://codepen.io/anon/pen/JkyEg?editors=101

The code:

HTML

<html ng-app="app"> <head> <meta charset="utf-8"/> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"/> <link href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css" rel="stylesheet"/> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <title>Leaflet example</title> </head> <body> <ion-nav-view></ion-nav-view> <script type="text/ng-template" id="locations.html"> <ion-view title="Locations"> <ion-content> <ion-list can-swipe="true"> <ion-item ng-click="locationOnClick(location)" class="item item-icon-left" ng-repeat="location in locations"> <i class="icon ion-location"></i> <h2>{{location.name}}</h2> </ion-item> </ion-list> </ion-content> </ion-view> </script> <script type="text/ng-template" id="location.html"> <ion-view title="{{location.name}}"> <ion-nav-bar class="bar-positive" animation="nav-title-slide-ios7"> <a ui-sref="locations" class="button icon-left ion-chevron-left button-clear ">Locations</a> </ion-nav-bar> <ion-content> <leaflet height="480px"></leaflet> </ion-content> </ion-view> </script> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js"></script> <script src="http://tombatossals.imtqy.com/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script> </body> </html>

Js

 angular.module('app', [ 'ionic', 'leaflet-directive' ]) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('locations', { url: "/locations", templateUrl:"locations.html", controller: 'LocationsCtrl' }) .state('location', { url: "/location/:locationId", templateUrl: "location.html", controller: 'LocationCtrl' }); // if none of the above states are matched, use this as the fallback $urlRouterProvider.otherwise('/locations'); }) .factory('locationService', function(){ var _locations = [{ id: 1, name: 'Sample location', lat: 50, lng: 50 }]; return { getAll: function(){ return _locations; }, getById: function(id){ return _locations.filter(function(loc){ return loc.id === id; })[0]; } } }) .controller('LocationsCtrl', function($scope, $location, locationService){ $scope.locations = locationService.getAll(); $scope.locationOnClick = function(location){ $location.path('/location/'+location.id); }; }) .controller('LocationCtrl', function($scope, $stateParams, locationService){ $scope.location = locationService.getById($stateParams.locationId); })
+7
javascript angularjs ionic-framework leaflet
source share
2 answers

The solution was simple. Ionic “eats” all click events that were not created by the wireframe. For the flyer map container, it was necessary to add the attribute data-tap-disabled="true"

 <ion-content data-tap-disabled="true"> <leaflet height="480px"></leaflet> </ion-content>
+17
source share

It seems that ionic has a bug in the touch event handler. However, my colleague came up with a workaround until it is fixed.

Basically, use its version of ionic.bundle.js ( https://rawgit.com/cachiconato/ionic/angular-leaflet-control/release/js/ionic.bundle.js ) and add 'data-do-not-set -coord = "true" for each possible tag associated with the map.

http://codepen.io/anon/pen/sHpoy?editors=101

  <h2 data-do-not-set-coordinates="true">{{location.name}}</h2>
0
source share

More articles:


All Articles