Cordova: Leaflet Map Tiles disable transform to map pane

Question

When the app invokes the keyboard of the phone (when editing a text), map pane transforms, as shown in the image below: What could be the reason, I added the map like this:

map = L.map('main').setView([9.123011560267038, 125.53513369515711], 15);
    L.tileLayer('./tile/cbr_new_design_tms2/{z}/{x}/{y}.png', {
        minZoom: 14,
        maxZoom: 16,
        tms: true
    }).addTo(map);

HTML:

<div class="panel" id="main" style="padding:0;overflow:hidden" data-title="Main">
                <header>
                    <h1>Main</h1>
                    <a href="#modal1" class="button big icon question" style="float:right;padding-top:0;outline:0" data-transition="up-reveal"></a>
                    <a href="#modal" class="button big icon settings" style="padding-top:0;outline:0" data-transition="up-reveal"></a>
                </header>

            </div>

Update: I just noticed that when keyboard is invoke, leaflet adds class="leaflet-map-pane" style="transform: translate3d(XXpx, XXpx, XXpx);". It somehow transform the map pane. So, how do I prevent leaflet from transforming it?

See https://stackoverflow.com/questions/38509121/leaflet-map-on-android-disrupted-by-appearance-of-keyboard — ghybs, Sep 22 '16 at 04:12
You can customize your Android manifest with Cordova as well. See for example: https://stackoverflow.com/questions/12833145/how-to-properly-configure-phonegap-for-android-so-it-does-not-zoom-on-text-input/27145959#27145959 and someone who just got the "opposite" problem as yours: https://stackoverflow.com/questions/39627268/android-webview-keyboard-covering-up-input — ghybs, Sep 22 '16 at 04:59
Lots of config file: `intelxdk.config.android.xml` or `intelxdk.config.android.app`. — Matt Mateo, Sep 22 '16 at 05:19

score 0 · Answer 1 · answered Sep 22 '16 at 08:08

0

As @ghybs pointed out, there are Cordova configuration options which have a high chance of solving this.

Otherwise, if you can run ome javascript code when the user hides the keyboard, call the invalidateSize() method on the map instance.

answered Sep 22 '16 at 08:08

IvanSanchez

18,272
3
30
45

I've tried both of yours and @ghybs suggestions, none of them works. – Matt Mateo Sep 22 '16 at 08:14

score 0 · Answer 2 · answered Sep 28 '16 at 03:37

0

Solved this by commenting the leaflet-src.js:

_onResize: function () {
        L.Util.cancelAnimFrame(this._resizeRequest);
        this._resizeRequest = L.Util.requestAnimFrame(
                function () { this.invalidateSize({debounceMoveend: true}); }, this, false, this._container);
    },

answered Sep 28 '16 at 03:37

Matt Mateo

168
5
14

For reference, if you want to disable Leaflet automatic adjustment when the window (in OP's case the WebView viewport size) is resized (in OP's case when the soft keyboard appears / disappears), just use the map's [`trackResize`](https://leafletjs.com/reference-0.7.7.html#map-trackresize) option instead of fiddling with a library source code. – ghybs Aug 01 '18 at 01:10

Cordova: Leaflet Map Tiles disable transform to map pane

2 Answers2