Leaflet map from geoJSON goes outside div

Question

Trying to learn more about LeafLet. Since it doesn't involve tiles and CSS, I don't think it's the same as another similarly phrase question. Pretty new to this, so I could be off.

Was following basic instructions to get something going:

var myCustomStyle = {
  stroke: false,
  fill: true,
  fillColor: '#fff',
  fillOpacity: 1
}

$.getJSON(myGeoJSONPath, function(data) {
  var map = L.map('map', {
    zoomControl: false,
    attributionControl: false
  }).setView([39.74739, -10], 2);

  L.geoJson(data, {
    clickable: false,
    style: myCustomStyle,
  }).addTo(map);

})

And everything looked okay when it was drawn up in the container. However, when I changed stroke to 'true', I found that the map actually extended past the border of the div container (https://jsfiddle.net/ef6otu1w/1/).

I tried checking with map.getSize(), which showed the container width & height correctly. Similarly, something like converting .getBound() to points only confirmed that the latlng corresponded with the container dimensions. Even if I make the div bigger than the map, when I drag the map past the edge of the container, it shows up in the whitespace.

I was wondering what could be the cause of this, and what to do to keep the map in the container.

ghybs ghybs · Accepted Answer · 2017-07-20T11:43:09

You are just missing the Leaflet CSS file.

Add to the head of your HTML file:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

https://jsfiddle.net/ef6otu1w/2/

Leaflet map from geoJSON goes outside div

1 Answers