0

When I load the leaflet map it shows the tiles broken. Similiar code works correctly on another site.

I have already verified that the css leaftlet.css is loading correctly.

<script>
var map;

$(document).ready(function() {
  var contentString = 'some content';

  var map = L.map('map').setView([42.65814823, 27.73714072], 13);
  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([42.65814823, 27.73714072]).addTo(map)
    .bindPopup(contentString)
    .openPopup();
});
</script>

The problem can be seen at: http://kvartiri.bg/%D0%90%D0%BF%D0%B0%D1%80%D1%82%D0%B0%D0%BC%D0%B5%D0%BD%D1%82-%D0%BD%D0%B0-%D0%B1%D1%80%D0%B5%D0%B3%D0%B0-%D0%BD%D0%B0-%D0%BC%D0%BE%D1%80%D0%B5%D1%82%D0%BE.htm

Mikhail Zhuikov
  • 1,213
  • 2
  • 9
  • 19
Bogomil Alexandrov
  • 1

1 Answers1

1

I have experienced the same issue and my solution was:

Make sure you apply fitBounds to map before you specify the tilelayer and add it to map.

https://leafletjs.com/reference-1.5.0.html#map-fitbounds

Robert Kofoed
  • 49
  • 9