I am struggling for some time now to get the leaflet map loaded properly within Polymer 2. 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.

My map renders like this:

enter image description here Code

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

    width: 100%; height: 400px; border: 1px solid #0A569D;

<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() {
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

I did try with inline CSS, putting JS in connectedcallback(), putting CSS in parent element etc. I also consoled this.$.mapContainer.innerText which is blank.

I am assuming, there is some CSS problem given the posts that I read. But not sure.

Can someone could help in this regard?


Was unsure, if I should delete this post or not as I have posted the same question in SO. I assume, if someone is searching for this in GIS SO, they can find the answer here. So not deleting the post.

Here is the solution: https://stackoverflow.com/questions/53872322/leaflet-polymer-2-map-loading-with-distorted-tile-however-works-with-non-polym

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.