CODEWITHSUNDEEP
androidcordovaleaflet
Emre Koç
Emre Koç

Reputation: 1381

Unwanted gray area on map

I'm trying to use PhoneGap and LeafLet in Android.

I read tutorial about LeafLet and I've chosen to start with mobile example

My problem with this gray area.. Why this gray area appearing ?
There is no gray area on browser. I didn't change anything except file path.

How can i make map full screen ?

Update Note : I'm working 10" tablet landscape mode, now I tried this example in 3,2" phone and there is no problem with 3.2" screen. Problem with 10" screen-landscape mode

enter image description here

MainActivity.java

public class MainActivity extends DroidGap {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        appView= (CordovaWebView) findViewById(R.id.tutorialView);

        appView.loadUrl("file:///android_asset/www/main.html");

    }

}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <org.apache.cordova.CordovaWebView
            android:id="@+id/tutorialView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />

</RelativeLayout>

main.html

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet mobile example</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="leaflet.ie.css" /><![endif]-->

    <script src="leaflet.js"></script>

    <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script>
        var map = L.map('map');

        L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
        }).addTo(map);

        function onLocationFound(e) {
            var radius = e.accuracy / 2;

            L.marker(e.latlng).addTo(map)
                .bindPopup("You are within " + radius + " meters from this point").openPopup();

            L.circle(e.latlng, radius).addTo(map);
        }

        function onLocationError(e) {
            alert(e.message);
        }

        map.on('locationfound', onLocationFound);
        map.on('locationerror', onLocationError);

        map.locate({setView: true, maxZoom: 16});
    </script>
</body>
</html>

Upvotes: 3

Views: 1850

Answers (2)

Jeff Sisson
Jeff Sisson

Reputation: 1636

Leaflet doesn't always correctly infer the dimensions of maps without explicit dimensions. As a general solution to this kind of problem with Leaflet, try adding this to the end your javascript:

setTimeout(map.invalidateSize.bind(map));

This will cause Leaflet to recalculate the dimensions of the map, and hopefully fix the gray tiles you're seeing.

Occasionally, it may also be necessary to delay the recalculation further, with something like setTimeout(map.invalidateSize.bind(map),200); this may fix gray tiles under unusual browser loading conditions.

Upvotes: 5

mattesCZ
mattesCZ

Reputation: 526

Setting position:absolute for #map element helped me. Try this style:

<style>
    body {
        padding: 0;
        margin: 0;
    }
    #map {
        height: 100%;
        width: 100%;
        position: absolute;
    }
</style>

Upvotes: 0

Related Questions