leaflet-extras
Tiles do not show correctly in IE when map is part of neon-animated-pages
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
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?
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?
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'>