Leaflet weird map sizing and tiling behaviour

user_1483132 0
Viewed 1159

I am integrating a leaflet map into my site built with meteor, and meteor's templating engine blaze.

I am experiencing very strange begaviour in regards to the map size, and what it looks like when dragging and zooming.

I initialize the map like this:

var mymap = L.map('leaflet-map').setView([40.712, -74.227], 5);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 15,
  minZoom: 1,
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  id: 'mapbox.streets'
}).addTo(mymap);

HTML:

<div id="map-div">
    <div id="map-inner-div">
        <div id="leaflet-map"></div>
    </div>
</div>

CSS:

#map-div {
  height:300px;
  width:500px;
}

When I load the webpage I get a single tile which is not the size of it's parent div.

Leaflet map onload

If I drag the tile or zoom, it will go all over the place, with other tiles randomly appearing.

Leaflet random tiles

I don't get any error messages.

My hypothesis is that the map's width and height are defaulting to the full screen, but it only sporadically loads various tiles.

If anyone even has any suggestions for search terms that might lead me down the right path that would be much appreciated, because I am not even sure how to describe what I am seeing.

meteor-blaze meteor leaflet css javascript
1 Answers

With Meteor you need to have the Leaflet CSS file be bundled as well.

E.g. if you are using a style compiler package, simply @import the Leaflet CSS file in one of your styling files (the exact path might be like ../node_modules/leaflet/dist/leaflet.css depending on where your styling file is placed, or you may be able to use {}/node_modules reference depending on your compiler package features).

Another possible solution would be to simply copy the Leaflet CSS file into your client folder, so that it is automatically eagerly bundled / loaded.

A variation would be to create a symlink instead.

Finally, if you use the default Marker Icon (blue pin) and/or default Layers Control (with stacked diamonds icon), do not forget to include the Leaflet images (in the dist/images folder) into your public folder, so that Leaflet JS can find them. Again, a variation would be to symlink that folder.

You can simply copy the images folder (and its content) into your public, so that you get the following structure:

<project-root>/public/images/marker-icon.png

etc.

user_51087960
Related