Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Loading map in leaflet is very slow

I have a map in leaflet,using the following code,when the page load, the map doesn't completely been shown,i don't know why, how can this be solved?

var Mmap = L.map('Modalmap').setView([8.7144, 125.7481],8);
L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright"></a>',
    subdomains: ['a','b','c']
}).addTo(Mmap);

L.control.scale({imperial:false}).addTo(Mmap);

var north = L.control({position: "topleft"});
north.onAdd = function(map) {
    var div = L.DomUtil.create("div", "info_legend leaflet-bar");
    div.innerHTML = '<img src="../lib/css/images/north-arrow-2.png" width="100%" height="100%">';
    return div;
}
north.addTo(Mmap);

var geocoder = L.Control.geocoder({
    defaultMarkGeocode: false
})
.on('markgeocode', function(e) {
    var box = e.geocode.center;
    document.getElementById("Latitude").value = box.lat;
    document.getElementById("Longitude").value = box.lng;
    var MarkLayer=L.marker([box.lat,box.lng]).addTo(Mmap);
    var group = new L.featureGroup([MarkLayer]);

    Mmap.fitBounds(group.getBounds());
}).addTo(Mmap);

enter image description here

This map is in a modal which i am calling it Modal-1 from a navbar

<div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav" style="margin-top: -3px;">
        <li class="dropdown"><a href="#" data-toggle="modal" data-target="#modal-1">New Customer</a></li>
        <li class="dropdown"><a href="#" data-toggle="modal" data-target="#modal-2">New Category</a></li>
    </ul>
</div>
like image 479
New at Leaflet Avatar asked Feb 22 '17 19:02

New at Leaflet


People also ask

How many markers can leaflet handle?

The Clusterer can handle 10,000 or even 50,000 markers (in chrome).

Does leaflet use Openstreetmap?

http://leafletjs.com It is used for the main OSM website map, as well as on Flickr, Wikipedia mobile apps, foursquare, craigslist, IGN, Washington Post, The Wall Steet Journal, Geocaching.com, City-Data.com, StreetEasy, Nestoria and Skobbler among others.

How do I import a map from leaflet?

We must import Map from react-leaflet (along with some other packages that we'll utilize later), and we'll return it from our App component: import React, {useState} from "react"; import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'; import './App.

Does leaflet work offline?

This library can be used to create maps, which are still available when you are offline and are fast when your connection is not. It works in the browser or can be used in an mobile app based on html and in progressive webapps.

Why is leaflet so slow on mobile?

However, Leaflet feels very slow when used from mobile compared to Google Maps. The map tiles seem to load a bit slower in Mapbox but that's not the actual problem. The problem is that when Mapbox loads new tiles, user interactions might stop completely.

Why is my Leaflet map not showing up?

Maybe that gives some problems to your leaflet map, because leaflet calculates its width and height when it initializes, based on it's parent width and height. And thats happening when your modal is not showing and it maybe has small values as width and height, and these small values end up being leaflet's width and height.

How to force Leaflet map to recalculate modal size?

You can try to call for leaflet map to "refresh" its size after you show the modal and the modal has got its correct height and width. Try this, right after the line you trigger your modal to be shown: This is going to force leaflet to re-calculate its size after 500 ms. (I guess 500ms are enough for your modal to be shown).

Why is Mapbox so bad?

The map tiles seem to load a bit slower in Mapbox but that's not the actual problem. The problem is that when Mapbox loads new tiles, user interactions might stop completely. It causes the overall usage to be quite annoying when you want to pinch zoom and pan into an area quickly.


1 Answers

A bit of guessing here: I see your container's name is "Modalmap". This makes me think that you are showing your map in a modal container.

I'm also guessing that the height and width of that "Modalmap" (which is leaflet's container) are being dynamically set, when modal has showed up. Maybe that gives some problems to your leaflet map, because leaflet calculates its width and height when it initializes, based on it's parent width and height. And thats happening when your modal is not showing and it maybe has small values as width and height, and these small values end up being leaflet's width and height.

You can try to call for leaflet map to "refresh" its size after you show the modal and the modal has got its correct height and width.

Try this, right after the line you trigger your modal to be shown:

setTimeout(function(){ map.invalidateSize()}, 500);

This is going to force leaflet to re-calculate its size after 500 ms. (I guess 500ms are enough for your modal to be shown). Try a bigger value if it doesn't work.

Update: For bootstrap 3 just place this in your code

$('body').on('shown.bs.modal', function (e) {
    setTimeout(function(){ map.invalidateSize()}, 500);
})

Tip:I suggest you dont use body as selector of jquery as this is going to trigger the code for all your modals. Use a more specific selector that you have in your markup More info here Calling a function on bootstrap modal open

like image 66
Sharky Avatar answered Nov 09 '22 23:11

Sharky