Search code examples
javascriptcsspolymerleaflet

Leaflet + Polymer 2 map loading with distorted tile however works with non-polymer code

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 JS as mentioned in leaflet quick start. The Plunker shows the CSS is included in Shadow DOM of the element. This is not the case for me. Also, the same version of JS and CSS works for non-polymer code, however, the distortion occurs with Polymer.

I am struggling for several days now to get the leaflet map loaded properly within Polymer 2. This issue is taking the soul out of me now. I have searched various threads in SO: this, Github: this, this and several other posts, unfortunately still could not fix the issue. Tested in both Chrome and Firefox. I have tried with Openlayers and the map loads perfectly. The issue arises when using Leaflet and Mapbox API. Unfortunately, due to customer requirements, cannot use Openlayers.

My map renders like this: enter image description here Code fragments:

<style include="shared-styles publish-project-styles">
    :host {
    display: block;
    padding: 20px;
  }
    #mapContainer{
        width: 100%; height: 400px; border: 1px solid #0A569D;
    }

    .leaflet-container{
        width: 100%; height: 400px; border: 1px solid #0A569D;
    }
</style>

<td  id="leftContainer" width="50%" style="padding: 15px;">
 <div id="mapContainer"></div>
 <!-- <canvas id="mapContainer" style="width: 400px; height: 400px; border: 1px solid #0A569D;"></canvas> --></td>

ready() {
    super.ready();          
    let leafmap = L.map(this.$.mapContainer).setView([48.84, 2.3], 5);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 18
            }).addTo(leafmap);
}

UPDATED Code:

<style include="shared-styles publish-project-styles">
    :host {
    display: block;
    padding: 20px;
  }
    #mapContainer{
        width: 100%; height: 400px; border: 1px solid #0A569D;
    }

    .leaflet-container{
        width: 100%; height: 400px; border: 1px solid #0A569D;
    }
</style>

<td  id="leftContainer" width="50%" style="padding: 15px;">
 <div id="mapContainer"></div>
 <!-- <canvas id="mapContainer" style="width: 400px; height: 400px; border: 1px solid #0A569D;"></canvas> --></td>

connectedCallback() {
    super.connectedCallback();          
    let leafmap = L.map(this.$.mapContainer).setView([48.84, 2.3], 5);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 18
            }).addTo(leafmap);
    leafmap.invalidateSize();
}

I did try with inline CSS, putting JS in connectedcallback() & ready(), putting CSS in parent element etc.

I am assuming, there is some CSS problem given the posts that I read. But not sure. Would really appreciate if someone could help in this regard? Please let me know if more info is needed.

Thanks.

Solution

  • 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