Leaflet now showoing on device

1

I’m trying to add a leaflet map for my application.

When i debug it on my browser using ionic serve everything works fine, but when i try to emulate on ios emulataotr / Android device the map isn’t showing.

I’m using the latest Beta version of ionic with tabs.

Any ideas?

2

Already found a solution.

Post it in Leaflet map not working in emulator, does work in browser

3

I’m having the same problem. Leaflet is not showing up on the android device but works fine on the browser. I’ve tried implementing the solutions on other threads.

Android Device Image (Missing Map)

index.html

     <!-- google maps javascript -->
    <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
    
    <!--leaflet.js-->
    <script src="lib/leaflet/leaflet.js"></script>
    <script src="lib/leaflet/angular-leaflet-directive.min.js"></script>
    <script src="lib/leaflet-plugins/layer/tile/Google.js"></script>

My module includes ‘leaflet-directive’

   .state('app.map', {
          url: "/map",
          views: {
            'menuContent' :{
              templateUrl: "map.html",
              controller:'GoogleMapsController'
            }
          }
        })

map.html

<ion-view title="Map">
  <ion-content>
      <div data-tap-disabled="true">
       <leaflet  height="300px" width="300px"></leaflet>
      </div>
  </ion-content>
</ion-view>

controller

    .controller("GoogleMapsController",[ '$scope', function($scope) {
        angular.extend($scope, {
            defaults: {
                scrollWheelZoom: false
            }
        });
    }])

Am I missing anything?

4

found a solution working fine for me!

see here