leaflet-map
leaflet-map copied to clipboard
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>
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'>