leaflet map does not centre correct

Question

Hopefully somebody can help me to centre correct. I'm not sure were the problem comes from, because it seems that the problem only exist on the PC screen and on my mobile screen it is correct.

After I resize the size of the browser window the markers are centred correct. But how to do that automatic?

The problem is shown since I updated from leaflet 0.7 to 1.0.3

On the map are shown several markers and polylines. At the end I try to fit the markers with:

map.fitBounds(myBounds,{maxZoom:10});
map.invalidateSize();

myBounds are the bounds of the markers.

var myBounds = pline2.getBounds();

To test I made this pline between all added markers:

var marker = L.marker(".$event->getLatLonJSArray().", { icon: myIcon, title: '".$title."'}).addTo(map);
pline2.addLatLng(".$event->getLatLonJSArray().");

The map is not centred to the bounds, but the centre is more north from the markers. If zoomed in to much the markers are even out of the viewbox.

If I do invalidateSize() before fitBounds the picture look as underneath. Also than it's corrected afted I resize the browserwindow.

Who can help me with the correct code for centring the map?

Thanks for reaction!

The complete taken from the browser development tools:

<script>
              var MapData = 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
              var Imagenary = ' | Imagery &copy; <a href="http://mapbox.com">Mapbox</a>'; 

              var osm = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
              {
                 attribution: MapData,
                 maxZoom: 18
              });

              var mapbox = L.tileLayer('//{s}.tiles.mapbox.com/v3/oddityoverseer13.ino7n4nl/{z}/{x}/        {y}.png',
              {
                 attribution: MapData + Imagenary,
                 maxZoom: 18
              });

              var map = L.map('osm-map'); //.fitWorld().setZoom(10);

              osm.addTo(map); 

              var baseLayers = {
                 'Mapbox': mapbox,
                 'OpenStreetMap': osm
              };

              L.control.layers(baseLayers).addTo(map);
           var pline2 = L.polyline([], {color: "black"});var polyline = L.polyline([], {color: 'red', opacity:'0.6'});

                 var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="red" fill="red"></path></svg>';

                 var myIcon = L.divIcon({className: 'my-div-icon icon-resi', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
                 var marker = L.marker([52.16201,4.50147], { icon: myIcon, title: ' hij zelf: Paulus Dircksz Planjer (–) | Woonplaats: 8 augustus 1650 — Leiden'}).addTo(map);
  marker.bindPopup('<span class="label"><i class="icon-selected"></i> hij zelf: </span><a href="individual.php?pid=I3319&amp;ged=PlanjeZetteler"><span class="NAME" dir="auto" translate="no">Paulus Dircksz <span class="SURN">Planjer</span></span></a> (<span title=""></span>–<span title=""></span>)<div class="fact_RESI"><span class="label">Woonplaats:</span> <span class="field" dir="auto"><span class="date">8 augustus 1650</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
  polyline.addLatLng([52.16201,4.50147]);
  pline2.addLatLng([52.16201,4.50147]);
  polyline.addTo(map);

                 var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="red" fill="red"></path></svg>';

                 var myIcon = L.divIcon({className: 'my-div-icon icon-resi', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
                 var marker = L.marker([52.1624538,4.5015904], { icon: myIcon, title: ' hij zelf: Paulus Dircksz Planjer (–) | Woonplaats: 28 juni 1669 — Leiden'}).addTo(map);
  marker.bindPopup('<span class="label"><i class="icon-selected"></i> hij zelf: </span><a href="individual.php?pid=I3319&amp;ged=PlanjeZetteler"><span class="NAME" dir="auto" translate="no">Paulus Dircksz <span class="SURN">Planjer</span></span></a> (<span title=""></span>–<span title=""></span>)<div class="fact_RESI"><span class="label">Woonplaats:</span> <span class="field" dir="auto"><span class="date">28 juni 1669</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
  polyline.addLatLng([52.1624538,4.5015904]);
  pline2.addLatLng([52.1624538,4.5015904]);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'blue', opacity:'0.6'});
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'green', opacity:'0.6'});
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'purple', opacity:'0.6'});
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'orange', opacity:'0.6'});
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'darkred', opacity:'0.6'});
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'salmon', opacity:'0.6'});
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'beige', opacity:'0.6'});

                 var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="beige" fill="beige"></path></svg>';

                 var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
                 var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Dochter: Dina Paulusdr Planjer (1661–) | Gedoopt: 6 februari 1661 — Leiden'}).addTo(map);
  marker.bindPopup('<span class="label">Dochter: </span><a href="individual.php?pid=I3208&amp;ged=PlanjeZetteler"><span class="NAME" dir="auto" translate="no">Dina <span class="SURN">Paulusdr Planjer</span></span></a> (<span title="6 februari 1661">1661</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">6 februari 1661</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
  polyline.addLatLng([52.15890,4.49268]);
  pline2.addLatLng([52.15890,4.49268]);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'darkblue', opacity:'0.6'});

                 var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="darkblue" fill="darkblue"></path></svg>';

                 var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
                 var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Zoon: Jacobus Paulusz Planjer (1662–) | Gedoopt: 12 maart 1662 — Leiden'}).addTo(map);
  marker.bindPopup('<span class="label">Zoon: </span><a href="individual.php?pid=I3295&amp;ged=PlanjeZetteler"><span class="NAME" dir="auto" translate="no">Jacobus <span class="SURN">Paulusz Planjer</span></span></a> (<span title="12 maart 1662">1662</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">12 maart 1662</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
  polyline.addLatLng([52.15890,4.49268]);
  pline2.addLatLng([52.15890,4.49268]);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'darkgreen', opacity:'0.6'});

                 var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="darkgreen" fill="darkgreen"></path></svg>';

                 var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
                 var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Zoon: Paulus Planjer (1664–) | Gedoopt: 23 maart 1664 — Leiden'}).addTo(map);
  marker.bindPopup('<span class="label">Zoon: </span><a href="individual.php?pid=I3336&amp;ged=PlanjeZetteler"><span class="NAME" dir="auto" translate="no">Paulus <span class="SURN">Planjer</span></span></a> (<span title="23 maart 1664">1664</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">23 maart 1664</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
  polyline.addLatLng([52.15890,4.49268]);
  pline2.addLatLng([52.15890,4.49268]);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'cadetblue', opacity:'0.6'});

                 var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="cadetblue" fill="cadetblue"></path></svg>';

                 var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
                 var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Zoon: Paulus Planjer (1666–) | Gedoopt: 7 februari 1666 — Leiden'}).addTo(map);
  marker.bindPopup('<span class="label">Zoon: </span><a href="individual.php?pid=I3179&amp;ged=PlanjeZetteler"><span class="NAME" dir="auto" translate="no">Paulus <span class="SURN">Planjer</span></span></a> (<span title="7 februari 1666">1666</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">7 februari 1666</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
  polyline.addLatLng([52.15890,4.49268]);
  pline2.addLatLng([52.15890,4.49268]);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  var polyline = L.polyline([], {color: 'darkslateblue', opacity:'0.6'});

                 var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="darkslateblue" fill="darkslateblue"></path></svg>';

                 var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
                 var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Zoon: Johannes Planjer (1669–) | Gedoopt: 14 april 1669 — Leiden'}).addTo(map);
  marker.bindPopup('<span class="label">Zoon: </span><a href="individual.php?pid=I3294&amp;ged=PlanjeZetteler"><span class="NAME" dir="auto" translate="no">Johannes <span class="SURN">Planjer</span></span></a> (<span title="14 april 1669">1669</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">14 april 1669</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
  polyline.addLatLng([52.15890,4.49268]);
  pline2.addLatLng([52.15890,4.49268]);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  polyline.addTo(map);
  pline2.addTo(map);var myBounds2 = pline2.getBounds();map.fitBounds(myBounds2,{maxZoom:10});
  map.invalidateSize();
  </script>

Can you add a couple of screenshots, adding a rectangle with the desired bounds? Your question is not clear right now. — IvanSanchez, Mar 28 '17 at 09:00
Why doing `invalidateSize` **after** `fitBounds`? If you have an issue with map viewport, you would very probably want it solved **before** you modify the map view. — ghybs, Mar 28 '17 at 10:46
@ghybs: With `invalidateSize` before `fitBounds` it is even worse. The marker is than to high on the map and the lower part of the map is white. — , Mar 28 '17 at 11:00
@Jopla then you may have a screwed up map container… Providing us with a reproducible live case (on Plunker, JSFiddle, etc.) would very probably be necessary to see what could be wrong and to be able to help you. — ghybs, Mar 28 '17 at 11:04
@ghybs: I m not sure how to make a live case, because it is a module within Webtrees.net — , Mar 28 '17 at 11:09
@ghybs: I tried, now I'm sure that I'm not clever enough to make a live case :-) What information do you need or how can I contact you by pm? The full code of the [webtrees](http://webtrees.net)-module you can find on [github](https://github.com/Joppla/osm4webtrees) — , Mar 28 '17 at 11:24

score 4 · Answer 1 · edited May 23 '17 at 12:32

4

Could not reproduce your issue outside of your framework (Webtrees.net?):

http://playground-leaflet.rhcloud.com/huto/1/edit?html,output

What may happen is that your map container size is adjusted several times before and after your code runs.

The fact that everything works fine when you resize your browser window is indeed a very good indicator that Leaflet could not retrieve the correct map container size, and you were probably right trying to execute map.invalidateSize(). However your map container still changes size before and after that, since changing your map view does not results in expected view.

A blind workaround could be to execute the size invalidation and map view change after some delay, hoping that your framework settles down your map container size in the meantime.

setTimeout(function () {
  map.invalidateSize();
  map.fitBounds(myBounds2, {
    maxZoom: 10
  });
}, 500); // Adjust the value (in ms)

Of course the proper resolution would be to make sure if the issue comes indeed from map container size being changed, then how to know once the size reaches its final state, and execute the above code at that moment.

If this does not solve your issue, even when using a long delay (like a few seconds), then the issue might be different.

BTW: your new screenshot shows some sort of tabs at the top. In that case, make sure you run invalidateSize after your tab is revealed, and change again the map view after that.

See: Data-toggle tab does not download Leaflet map

edited May 23 '17 at 12:32

Community

1
1

answered Mar 28 '17 at 11:30

ghybs

47,565
6
74
99

Thanks for your reaction. In your example it works correct. I want to try the `setTimeout`. But have I only to replace my `invalidateSize()` en `fitBounds()` for your code (gives a gray field in stead of the map) or have I to add any line to activate the `setTimeout`? Sorry, I m not so familiar with javascript. – Mar 28 '17 at 11:44
Sorry it is almost impossible to help you further with so few details. You should consider publishing more of your code (including HTML and CSS) and ideally provide a live case. You could provide an example with your framework. – ghybs Mar 28 '17 at 12:39
the file `module.php` generate the leaflet script – Mar 28 '17 at 13:00
Sorry I will not dig into all your code. Please provide an [MCVE](http://stackoverflow.com/help/mcve) – ghybs Mar 28 '17 at 13:00
Sorry, I don't know how to make an application as webtrees minimal and still workable. What I understand it is a clash between how webtrees is handling the code and what leaflet is doing and that is doesn't help what I'm doing with it. Leaflet 0.7.3 is working correct with webtrees 1.7.9. Leaflet 1.0.3 not. Is my conclusion correct that the bug will be in how they handle with the windowsizes since 1.0.3? – Mar 28 '17 at 13:05

leaflet map does not centre correct

1 Answers1