Leaflet full screen in Ionic-Cordova-Angular app

3
votes

I'm working on a mapping app using Ionic-Cordova-Angular and am trying to use Leaflet. My issue is that I can't get the Leaflet map to automatically fill the entire viewport.

I found the solution when using straight JS. You can use CSS to set the HTML and Body to a height of 100% and then set the map div to 100% as well. You can see this working in this JSFiddle: https://jsfiddle.net/wzfLs10a/

Unfortunately, the same solution does not work when I introduce Angular into the mix. Here's some sample code:

Index.html

<div id="map" ng-app="demoapp" ng-controller="MainCtrl"></div>

App.js

angular.module("demoapp", ["controllers"]);

angular.module('controllers',[])

   .controller('MainCtrl',['$scope',
    function($scope) {
        $scope.map = L.map('map').setView([37.8, -96], 4);            
        L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg', {
        attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: '1234'
    }).addTo($scope.map);

    }]);

Style.css

html, body { height: 100%; width: 100%;}
#map { height: 100%;}

Here's a JSFiddle: https://jsfiddle.net/3sv374Lz/. Note that if you change the height of the map div to a fixed value (400px for example), the map will display.

I am aware of the angular leaflet directive and am currently exploring that option as well, but it seems to me this really shouldn't be that difficult. Am I missing something simple? Thanks for the help!

2
angularjsleaflet

2 Answers

4
votes

If you use ionic's content and view classes, you don't need to set each div to 100%.

I use leaflet in my ionic app with the following code:

<ion-view title="Map">
    <ion-content scroll="false" data-tap-disabled="true">
        <leaflet height="100%" width="100%"></leaflet>
    </ion-content>
</ion-view>

Note that this uses the leaflet angular module https://github.com/tombatossals/angular-leaflet-directive

3
votes

This isn't a problem with angular itself or leaflet just an understanding of how the box model works.

https://jsfiddle.net/7k11k32m/

If you set some percentage height then the parent container of the one with a percentage must have a set height as well. Since you introduced an extra div here without giving it a height then the map doesn't expand to fill the screen.

Updated your CSS (had a type on html too):

html, body {
    height: 100%;
    width: 100%;
}
[ng-app]{
    height:100%;
}
#map {
    height: 100%;
    /* Change 100% to 400px and the map will display    
}

As an aside I've personally found it easier to write my own directive for dealing with Google maps since their API is pretty nice and easy to work with and then I don't get the extra bloat from more third party stuff I'm not using, also this way no one to blame but me :).