Skip to content Skip to sidebar Skip to footer
Home / Css / Javascript / Leaflet / Polymer

Leaflet + Polymer 2 Map Loading With Distorted Tile However Works With Non-polymer Code

Post a Comment
UPDATE: I have now replicated this issue in Plunker. I did check the duplicate question suggested. The answer is incorrect or missing CSS file. I have imported v1.3.4 for CSS and J

Solution 1:

Leaflet CSS styles are not applied to shadow DOM elements.

To make it work you need to add leaflet.css here:

// ...
<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">

<p>I'm a shadow DOM child element of x-foo.</p>// ...

Working example: https://plnkr.co/edit/CJUlwUnBezum9jgt93uF?p=preview

Post a Comment for "Leaflet + Polymer 2 Map Loading With Distorted Tile However Works With Non-polymer Code"