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: '© <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);
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>
The Clusterer can handle 10,000 or even 50,000 markers (in chrome).
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.
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.
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.
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.
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: 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).
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With