Search code examples
javascriptleafletinternet-explorer-11

Markers are sometimes not centered in Leaflet using IE11


The markers on a Leaflet map are not centered when I open https://waarismijnstemlokaal.nl/s/Losser in Internet Explorer 11, see the image below:

Markers are not centered

But if I press F5 or click the refresh button (see the red arrow in the image below) the markers are somehow centered:

Markers are centered after refresh using refresh buttton

If I click on the URL in the address bar and press enter I am shown the non-centered map again.

The map is behaving fine in other browsers (also IE9, IE10 and Edge). I have no clue what is going on, does anybody have an idea on why this is happening and how it can be fixed?

The Leaflet JavaScript for this map can be found on GitHub.


Solution

  • If I put all your map code in the $(document).ready() function it loads and centers consistently for me. However, I'm not sure why F5 works and hitting enter in the address bar doesn't.

        $(document).ready(function() {
        var StembureausApp = window.StembureausApp || {stembureaus: [],links_external: false};
    
        StembureausApp.stembureaus = [{"Akoestiek": "", "CBS buurtnummer": "BU01680003", "CBS gemeentecode": "GM0168", "CBS wijknummer": "WK016800", "Extra adresaanduiding": "", "Gemeente": "Losser", "Huisnummer": "4", "Huisnummertoevoeging": "", "Invalidenparkeerplaatsen": "", "Latitude": 52.2625519442, "Longitude": 7.00713625176, "Mindervalide toilet aanwezig": "", "Mindervaliden toegankelijk": "Y", "Naam stembureau": "Aleida Leurinkhuis", "Nummer stembureau": 1, "Openingstijden": "2018-03-21T07:30:00 tot 2018-03-21T21:00:00", "Plaats": "Losser", "Postcode": "7581AG", "Straatnaam": "Raadhuisplein", "UUID": "adaae5609dfc4c87acf862fb314a1368", "_id": 1, "elections": ["Referendum over de Wet op de inlichtingen- en veiligheidsdiensten", "Gemeenteraadsverkiezingen 2018"]}, {"Akoestiek": "", "CBS buurtnummer": "BU01680001", "CBS gemeentecode": "GM0168", "CBS wijknummer": "WK016800", "Extra adresaanduiding": "Ingang aan de linker zij-ingang", "Gemeente": "Losser", "Huisnummer": "81", "Huisnummertoevoeging": "", "Invalidenparkeerplaatsen": "", "Latitude": 52.2590554131, "Longitude": 7.00253546685, "Mindervalide toilet aanwezig": "", "Mindervaliden toegankelijk": "Y", "Naam stembureau": "KBS De Verrekijker", "Nummer stembureau": 2, "Openingstijden": "2018-03-21T07:30:00 tot 2018-03-21T21:00:00", "Plaats": "Losser", "Postcode": "7582CB", "Straatnaam": "Hogeweg", "UUID": "38fd8afc1a314354bf661816bc7d3e0b", "_id": 3, "elections": ["Referendum over de Wet op de inlichtingen- en veiligheidsdiensten", "Gemeenteraadsverkiezingen 2018"]}, {"Akoestiek": "", "CBS buurtnummer": "BU01680003", "CBS gemeentecode": "GM0168", "CBS wijknummer": "WK016800", "Extra adresaanduiding": "", "Gemeente": "Losser", "Huisnummer": "1", "Huisnummertoevoeging": "", "Invalidenparkeerplaatsen": "", "Latitude": 52.2569840479, "Longitude": 7.01045325858, "Mindervalide toilet aanwezig": "", "Mindervaliden toegankelijk": "Y", "Naam stembureau": "RK School De Wegwijzer", "Nummer stembureau": 3, "Openingstijden": "2018-03-21T07:30:00 tot 2018-03-21T21:00:00", "Plaats": "Losser", "Postcode": "7581EP", "Straatnaam": "Sperwerstraat", "UUID": "8e80ddbdf5c44b5a9e273e9417dadd02", "_id": 4, "elections": ["Referendum over de Wet op de inlichtingen- en veiligheidsdiensten", "Gemeenteraadsverkiezingen 2018"]}, {"Akoestiek": "", "CBS buurtnummer": "BU01680001", "CBS gemeentecode": "GM0168", "CBS wijknummer": "WK016800", "Extra adresaanduiding": "", "Gemeente": "Losser", "Huisnummer": "2", "Huisnummertoevoeging": "", "Invalidenparkeerplaatsen": "", "Latitude": 52.2677807736, "Longitude": 6.99684508373, "Mindervalide toilet aanwezig": "", "Mindervaliden toegankelijk": "Y", "Naam stembureau": "Basisschool De Saller", "Nummer stembureau": 4, "Openingstijden": "2018-03-21T07:30:00 tot 2018-03-21T21:00:00", "Plaats": "Losser", "Postcode": "7582AS", "Straatnaam": "Vlasakker", "UUID": "ad92cfe2cd20471c8de57938a0352d20", "_id": 5, "elections": ["Referendum over de Wet op de inlichtingen- en veiligheidsdiensten", "Gemeenteraadsverkiezingen 2018"]}, {"Akoestiek": "", "CBS buurtnummer": "BU01680003", "CBS gemeentecode": "GM0168", "CBS wijknummer": "WK016800", "Extra adresaanduiding": "", "Gemeente": "Losser", "Huisnummer": "1", "Huisnummertoevoeging": "", "Invalidenparkeerplaatsen": "", "Latitude": 52.2642907387, "Longitude": 7.00589841214, "Mindervalide toilet aanwezig": "Y", "Mindervaliden toegankelijk": "Y", "Naam stembureau": "Maartens-Stede", "Nummer stembureau": 5, "Openingstijden": "2018-03-21T07:30:00 tot 2018-03-21T21:00:00", "Plaats": "Losser", "Postcode": "7581XZ", "Straatnaam": "Vicarystraat", "UUID": "cf2f2a8a2a9541f1b7456fe824b75912", "_id": 7, "elections": ["Referendum over de Wet op de inlichtingen- en veiligheidsdiensten", "Gemeenteraadsverkiezingen 2018"]}, {"Akoestiek": "", "CBS buurtnummer": "BU01680003", "CBS gemeentecode": "GM0168", "CBS wijknummer": "WK016800", "Extra adresaanduiding": "", "Gemeente": "Losser", "Huisnummer": "19", "Huisnummertoevoeging": "", "Invalidenparkeerplaatsen": "", "Latitude": 52.2683150503, "Longitude": 7.01398755325, "Mindervalide toilet aanwezig": "", "Mindervaliden toegankelijk": "Y", "Naam stembureau": "Clubgebouw Schuttersvereniging \u0027De Schuttersput\u0027", "Nummer stembureau": 6, "Openingstijden": "2018-03-21T07:30:00 tot 2018-03-21T21:00:00", "Plaats": "Losser", "Postcode": "7581BB", "Straatnaam": "Bookholtlaan", "UUID": "c575345f63aa4b819bb680f1dd94052e", "_id": 20, "elections": ["Referendum over de Wet op de inlichtingen- en veiligheidsdiensten", "Gemeenteraadsverkiezingen 2018"]}, {"Akoestiek": "", "CBS buurtnummer": "BU01680201", "CBS gemeentecode": "GM0168", "CBS wijknummer": "WK016802", "Extra adresaanduiding": "Ingang aan de Kerkhofweg", "Gemeente": "Losser", "Huisnummer": "59", "Huisnummertoevoeging": "", "Invalidenparkeerplaatsen": "", "Latitude": 52.2412110828, "Longitude": 7.0323857378, "Mindervalide toilet aanwezig": "Y", "Mindervaliden toegankelijk": "Y", "Naam stembureau": "Woonzorgcentrum De Driehoek", "Nummer stembureau": 7, "Openingstijden": "2018-03-21T07:30:00 tot 2018-03-21T21:00:00", "Plaats": "Overdinkel", "Postcode": "7586BL", "Straatnaam": "Hoofdstraat", "UUID": "a7b3134eadc14d24ae239bbff228a835", "_id": 23, "elections": ["Referendum over de Wet op de inlichtingen- en veiligheidsdiensten", "Gemeenteraadsverkiezingen 2018"]}, {"Akoestiek": "", "CBS buurtnummer": "BU01680201", "CBS gemeentecode": "GM0168", "CBS wijknummer": "WK016802", "Extra adresaanduiding": "", "Gemeente": "Losser", "Huisnummer": "1", "Huisnummertoevoeging": "", "Invalidenparkeerplaatsen": "", "Latitude": 52.235374652, "Longitude": 7.03445575788, "Mindervalide toilet aanwezig": "Y", "Mindervaliden toegankelijk": "Y", "Naam stembureau": "Tiekerhook", "Nummer stembureau": 8, "Openingstijden": "2018-03-21T07:30:00 tot 2018-03-21T21:00:00", "Plaats": "Overdinkel", "Postcode": "7586EX", "Straatnaam": "Schaepmanstraat", "UUID": "3b1cc7e2bd3242d5a2dbd01837ca3e8d", "_id": 33, "elections": ["Referendum over de Wet op de inlichtingen- en veiligheidsdiensten", "Gemeenteraadsverkiezingen 2018"]}, {"Akoestiek": "", "CBS buurtnummer": "BU01680101", "CBS gemeentecode": "GM0168", "CBS wijknummer": "WK016801", "Extra adresaanduiding": "", "Gemeente": "Losser", "Huisnummer": "330", "Huisnummertoevoeging": "", "Invalidenparkeerplaatsen": "", "Latitude": 52.2317955365, "Longitude": 7.0028685204, "Mindervalide toilet aanwezig": "", "Mindervaliden toegankelijk": "Y", "Naam stembureau": "Dorpshuis De Glaan", "Nummer stembureau": 9, "Openingstijden": "2018-03-21T07:30:00 tot 2018-03-21T21:00:00", "Plaats": "Glane", "Postcode": "7585PE", "Straatnaam": "Gronausestraat", "UUID": "d3ffef93452b4839965b7f1a94df3499", "_id": 39, "elections": ["Referendum over de Wet op de inlichtingen- en veiligheidsdiensten", "Gemeenteraadsverkiezingen 2018"]}, {"Akoestiek": "", "CBS buurtnummer": "BU01680301", "CBS gemeentecode": "GM0168", "CBS wijknummer": "WK016803", "Extra adresaanduiding": "", "Gemeente": "Losser", "Huisnummer": "7", "Huisnummertoevoeging": "", "Invalidenparkeerplaatsen": "", "Latitude": 52.3148502543, "Longitude": 6.98836190824, "Mindervalide toilet aanwezig": "", "Mindervaliden toegankelijk": "Y", "Naam stembureau": "De Vereeniging", "Nummer stembureau": 10, "Openingstijden": "2018-03-21T07:30:00 tot 2018-03-21T21:00:00", "Plaats": "de Lutte", "Postcode": "7587AA", "Straatnaam": "Dorpstraat", "UUID": "b616ae9b73db4fb88aefcc2c97debb79", "_id": 50, "elections": ["Referendum over de Wet op de inlichtingen- en veiligheidsdiensten", "Gemeenteraadsverkiezingen 2018"]}, {"Akoestiek": "", "CBS buurtnummer": "BU01680301", "CBS gemeentecode": "GM0168", "CBS wijknummer": "WK016803", "Extra adresaanduiding": "", "Gemeente": "Losser", "Huisnummer": "14", "Huisnummertoevoeging": "", "Invalidenparkeerplaatsen": "", "Latitude": 52.3166104915, "Longitude": 6.986468149, "Mindervalide toilet aanwezig": "", "Mindervaliden toegankelijk": "Y", "Naam stembureau": "Erve Boerrigter", "Nummer stembureau": 11, "Openingstijden": "2018-03-21T07:30:00 tot 2018-03-21T21:00:00", "Plaats": "de Lutte", "Postcode": "7587AM", "Straatnaam": "Plechelmusstraat", "UUID": "817184d3e3c143b69ec03e3fecb4e613", "_id": 94, "elections": ["Referendum over de Wet op de inlichtingen- en veiligheidsdiensten", "Gemeenteraadsverkiezingen 2018"]}, {"Akoestiek": "", "CBS buurtnummer": "BU01680401", "CBS gemeentecode": "GM0168", "CBS wijknummer": "WK016804", "Extra adresaanduiding": "", "Gemeente": "Losser", "Huisnummer": "71", "Huisnummertoevoeging": "", "Invalidenparkeerplaatsen": "", "Latitude": 52.3587679684, "Longitude": 6.99845691193, "Mindervalide toilet aanwezig": "", "Mindervaliden toegankelijk": "Y", "Naam stembureau": "Cafe \u0027t Sterrebos", "Nummer stembureau": 12, "Openingstijden": "2018-03-21T07:30:00 tot 2018-03-21T21:00:00", "Plaats": "Beuningen", "Postcode": "7588RG", "Straatnaam": "Beuningerstraat", "UUID": "0a4828d3c7754fa7aba12867f7a83343", "_id": 102, "elections": ["Referendum over de Wet op de inlichtingen- en veiligheidsdiensten", "Gemeenteraadsverkiezingen 2018"]}, {"Akoestiek": "", "CBS buurtnummer": "BU01680009", "CBS gemeentecode": "GM0168", "CBS wijknummer": "WK016800", "Extra adresaanduiding": "", "Gemeente": "Losser", "Huisnummer": "134", "Huisnummertoevoeging": "", "Invalidenparkeerplaatsen": "", "Latitude": 52.2813806025, "Longitude": 6.97477270796, "Mindervalide toilet aanwezig": "Y", "Mindervaliden toegankelijk": "Y", "Naam stembureau": "De Losserhof", "Nummer stembureau": 13, "Openingstijden": "2018-03-21T07:30:00 tot 2018-03-21T21:00:00", "Plaats": "Losser", "Postcode": "7581PW", "Straatnaam": "Oldenzaalsestraat", "UUID": "92dd91269d384f24b7c057a4585ae85d", "_id": 162, "elections": ["Referendum over de Wet op de inlichtingen- en veiligheidsdiensten", "Gemeenteraadsverkiezingen 2018"]}];
        StembureausApp.stembureaus_markers = [];
    
        //console.log(StembureausApp.links_external ? 'external links for markers' : 'internal links for markers');
    
        StembureausApp.getPopup = function(s) {
          var opinfo = StembureausApp.stembureaus[i]['Openingstijden'].split(' tot ');
          var target = StembureausApp.links_external ? ' target="_blank"' : '';
          output = "<p><a href=\"/s/" + StembureausApp.stembureaus[i]['Gemeente'] + '/' + StembureausApp.stembureaus[i]['UUID'] + "\"" + target + ">" + StembureausApp.stembureaus[i]['Naam stembureau'] + "</a><br />";
          if (StembureausApp.stembureaus[i]['Straatnaam']) {
            output += StembureausApp.stembureaus[i]['Straatnaam'];
          }
          if (StembureausApp.stembureaus[i]['Huisnummer']) {
            output += ' ' + StembureausApp.stembureaus[i]['Huisnummer'];
          }
          if (StembureausApp.stembureaus[i]['Huisnummertoevoeging']) {
            output += '-' + StembureausApp.stembureaus[i]['Huisnummertoevoeging'];
          }
          if (StembureausApp.stembureaus[i]['Plaats']) {
            output += "<br />" + StembureausApp.stembureaus[i]['Plaats'] + "<br />";
          } else {
            output += "<i>Gemeente " + StembureausApp.stembureaus[i]['Gemeente'] + "</i><br />";
          }
          output += '<strong>Open:</strong> ' + opinfo[0].split('T')[1].slice(0, 5) + ' &dash; ' + opinfo[1].split('T')[1].slice(0, 5) + '<br />';
          if (StembureausApp.stembureaus[i]["Mindervaliden toegankelijk"] == 'Y') {
            output += '<i class="fa fa-wheelchair" aria-hidden="true"></i>';
          }
          output += '</p>';
          return output;
        };
    
        for(var i=0; i < StembureausApp.stembureaus.length; i++) {
          StembureausApp.stembureaus_markers.push(
            L.marker(
              [StembureausApp.stembureaus[i].Latitude, StembureausApp.stembureaus[i].Longitude]
            ).bindPopup(StembureausApp.getPopup(StembureausApp.stembureaus[i]))
          );
        }
    
        StembureausApp.map = L.map('map').setView([52.2, 5.592], 6);
        StembureausApp.map._layersMaxZoom = 19;
        StembureausApp.clustermarkers = L.markerClusterGroup({maxClusterRadius: 50});
        for(var i=0; i < StembureausApp.stembureaus_markers.length; i++) {
          StembureausApp.stembureaus_markers[i].addTo(StembureausApp.clustermarkers);
        }
    
        if (StembureausApp.stembureaus_markers.length > 50) {
          StembureausApp.map.addLayer(StembureausApp.clustermarkers);
        } else {
          StembureausApp.map.addLayer(L.layerGroup(StembureausApp.stembureaus_markers));
        }
    
        StembureausApp.group = L.featureGroup(StembureausApp.stembureaus_markers.filter(
          function (s) {
            return (StembureausApp.stembureaus_markers.length <= 50) || (s._latlng.lng > 0);
          }));
        StembureausApp.map.fitBounds(StembureausApp.group.getBounds(), {maxZoom: 16});
    
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright" target="_blank">OpenStreetMap</a> contributors | <a href="https://waarismijnstemlokaal.nl/" target="_blank">Waar is mijn stemlokaal</a>'
        }).addTo(StembureausApp.map);
    
    
      StembureausApp.show(StembureausApp.stembureaus);
    
      $('#model-embed').on('shown.bs.modal', function () {
        $('textarea:visible').select().focus();
      });
    
      $('#form-embed-search-checkbox').on('click', function (e) {
        $('#form-embed-search').toggle();
        $('#form-embed-no-search').toggle();
        $('textarea:visible').select().focus();
      });
    });