search

leaflet-extras / leaflet-map

Leaflet map as web component
https://leaflet-extras.github.io/leaflet-map
116 stars 72 forks source link

Tiles do not show correctly in IE when map is part of neon-animated-pages #62

Open FranzThomsen1089 opened 8 years ago

FranzThomsen1089 commented 8 years ago

I have boiled my problem down to whats shown below

<!doctype html>
<html>
<head>
    <script src='bower_components/webcomponentsjs/webcomponents-lite.js'></script>
    <link rel='import' href='bower_components/polymer/polymer.html'>
    <link rel='import' href='bower_components/paper-styles/paper-styles.html'>
    <link rel='import' href='bower_components/neon-animation/neon-animated-pages.html'>
    <link rel='import' href='bower_components/neon-animation/neon-animatable.html'>
    <link rel='import' href='bower_components/leaflet-map/leaflet-map.html'>
</head>
<body unresolved>
    <dom-module id='base-page'>
        <template>
            <neon-animated-pages id="pages" class="flex" selected="0">
                <neon-animatable>
                    <leaflet-map style='height:1000px;width:1000px'></leaflet-map>
                </neon-animatable>
            </neon-animated-pages>
        </template>
    </dom-module>
    <script>
        HTMLImports.whenReady(function() {Polymer({
            is: 'base-page'
        });});
    </script>
    <base-page></base-page>
</body>

When leaflet is part of a neon-animated-pages, the tiles do not show correctly in IE. Please someone help me ... @nhnb any idea about the issue?. Thanks

This may be related to the othe rissue I have posted earlier about the map not displaying correctly when part of iron-pages

Thanks and Cheers

FranzThomsen1089 commented 8 years ago

It seems if I call invalidateSize() in the load event I can givee it a shake. Is this something that would male sense to bake into the element somehow?

lolive commented 6 years ago

I think I have a similar problem when my <leaflet-map> is part of a Bootstrap modal. Could you elaborate on how you implemented a solution with the load event?

FranzThomsen1089 commented 6 years ago

In the observer for selectedPage in below

<neon-animated-pages selected='[[selectedPage]]' entry-animation='fade-in-animation' exit-animation='fade-out-animation'>

I call this.$.map.map.invalidateSize(); when I am on my map page

<neon-animatable page='Map'>