Пользовательский элемент и листовка и маркеры не выравниваются - PullRequest
Новая
       12

Пользовательский элемент и листовка и маркеры не выравниваются

1 голос
/ 13 января 2020

Я пытаюсь создать свой первый веб-компонент / пользовательские элементы для отображения карт листовок. Пока я могу отобразить карту, я не могу всю жизнь получить ее в центр div.

Консольный вид div - 

<div id="mapdiv" class="leaflet-container leaflet-retina leaflet-fade-anim leaflet-grab leaflet-touch-drag" tabindex="0" style="height: 400px; width: 600px; position: relative; outline: none;">

My Javascript код как показано ниже 

      let shadow = this.attachShadow({ mode: "open" });
      var mapdiv = document.createElement("div");
      mapdiv.setAttribute("id", "mapdiv");
      mapdiv.style.height = "400px";
      mapdiv.style.width = "600px";
      mapdiv.innerHTML =
        '<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="crossorigin=""/>';
      shadow.appendChild(mapdiv);

      var map = L.map(mapdiv).setView([-33.75969, 151.09488], 8);

      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);
      L.marker([-33.75969, 151.09488])
        .addTo(map)
        .bindPopup("This is not working")
        .openPopup();
    }
  }
);

}) ();

Приветствия

...