0

I am making a Leaflet 1.3.4 map. When I added fitBounds to the code, I experience a problem when viewing the map on my iPhone XS. Map displays fine on the desktop but regardless of browser (I have tried Safari, Firefox and Chrome) on my iPhone, when a single location is called for, the map displays the marker on a grey background. Only after the user "wiggles" the map to cause a redraw will the map appear. I made this simple example that illustrates my problem when you view it on iPhone (I don't have an Android to say if it works there or not). The complete map features a dynamic select to choose a "category" then the code puts markers and popups on the map for all the "members" in that "category." I am hoping someone will see what is causing this problem in the code:

<script src="leaflet-src.js"></script>
<script type="text/javascript" src="leaflet.ajax.js"></script>
<link rel="stylesheet" href="leaflet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Chamber Member Map</title>
</head>
<body>
    <div id="map"></div>
    <script>
        var m= L.map('map', {zoomControl:false}).setView([39.1, -94.6],12);
        var mopt = {
            url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token=<KEY>',
            options: {attribution:'© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'}
            };
            var mq=L.tileLayer(mopt.url,mopt.options);
            mq.addTo(m);
            var buildingLayers = new L.FeatureGroup().addTo(m); 
            (function() {
                buildingLayers.clearLayers();
                geojsonLayer = new L.GeoJSON.AJAX(["sampledata.geojson"])
                    geojsonLayer.on('data:loaded', function() {
                        m.fitBounds(buildingLayers.getBounds())
                 //redraw keeps the problem from appearing
                        mq.redraw()
                    })
                    .addTo(buildingLayers)}())
                </script>
    </body>
    </html>

Here is the sampledata.geojson file referenced in the code:

{
"type": "FeatureCollection",
"features": [
{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [
      -94.715818,
      39.308195
    ]
  },
  "properties": {
    "Member_Name": "Kansas City Aviation Department",
    "Contact": "Patrick Klein",
    "Address": "601 Brasilia Ave.",
    "City": "Kansas City",
    "Phone": "(816) 243-3100",
    "Email": "Mark_VanLoh@kcmo.org",
    "Website": "www.flykci.com"
  }
}

] }

  • How about trying mq.redraw() after m.fitbounds(..) to force a redraw of the tile layer? This might be a band-aid for a different problem though... – Marc Pfister Dec 8 '18 at 18:47
  • @MarcPfister thanks, the redraw works. I will upvote if you post as an answer. – dnevels Dec 8 '18 at 20:14
0

How about trying mq.redraw() after m.fitbounds(..) to force a redraw of the tile layer?

Since it's only on mobile this might be a band-aid for a different problem though but it's hard to say without seeing a working example.

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.