-
-
Notifications
You must be signed in to change notification settings - Fork 634
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
on load method: Occasionally the load method does not trigger a callback #4024
Comments
when I click map , the load method trigger |
Please provide a jsbin with a reproduction. |
sorry, I cant provide this style. |
I'm not aware of timeout definition. |
import { Map } from 'maplibre-gl';
import { useEffect, useRef } from 'react';
export default () => {
const mapRef = useRef<any>(null);
useEffect(() => {
const style ;// this style have some slow-requested data sources
let map = new Map({
container: mapRef.current,
antialias: true,
maxPitch: style.maxPitch ? style.mapPitch : 72,
minZoom: style.minZoom,
hash: false,
attributionControl: false,
maplibreLogo: true,
logoPosition: 'bottom-right',
style: style,
});
document
.getElementsByClassName('maplibregl-ctrl-logo')[0]
.removeAttribute('href');
map.setRenderWorldCopies(false);
map.on('load', () => {
console.log('load finish');
});
}, []);
return <div style={{ width: '100%', height: '50vh' }} ref={mapRef}></div>;
}; |
This phenomenon mainly occurs when the browser refreshes. <!DOCTYPE html>
<html lang="en">
<head>
<title>Draw GeoJSON points</title>
<meta property="og:description" content="Draw points from a GeoJSON collection to a map." />
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.1.3/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@4.1.3/dist/maplibre-gl.js'></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
$.ajax({
url: url,
success: function(style) {
const map = new maplibregl.Map({
container: 'map',
style:style,
});
map.on('load', (e) => {
console.log(e)
console.log('load')
});
},
});
</script>
</body>
</html> |
This is a video I made of the operation. 20240424_211641.mp4 |
Can you check if the map |
I'm not sure if that's the check. let a = setInterval(()=>{
if(map.loaded()){
map.on('load', (e) => {
console.log('load')
});
clearInterval(a)
}
},50); |
If map is loaded you won't get the load event.
|
I tried, but // create map
// dosomthing
if (map.loaded()) {
console.log('loaded----'+performance.now());
}else{
console.log('load');
// Execution stops at this point
map.on('load', function() {
console.log('load----'+performance.now());
}); can console'load' ,but can't console 'load---time' |
I don't understand what you wrote, but I think this is working as expected, I'm inclined to close this issue... |
I say , if (map.isLoaded()) doSomeThing()
map.on('load', doSomeThing) |
sorry, English is not very well. But I'm not sure what you don't understand. |
I wrote the following code but I'm unable to reproduce your issue:
I always get |
sure , I found . when the |
Since I can't reproduce the issue myself and you can't provide a scenario that reproduces the issue, you'll need to figure out how to solve this. Good luck! |
hey @HarelM, thanks for your feedback so far for me this is easy to reproduce by just setting |
I can't stress this enough, saying something is not working without linking a reproducible example is not so helpful... |
sorry about that - here's a bin https://codepen.io/oberhamsi/pen/ZENLQEN i can repro this on FF&chrome. in my bigger app it does not happen so consistently. when i inspect the map instance, it has |
Thanks for the info! |
maplibre-gl-js version:4.1.3 and 2.4.0
browser:
Steps to Trigger Behavior
Link to Demonstration
https://codepen.io/oberhamsi/pen/ZENLQEN
Expected Behavior
Loaded event is fired or the map is loaded
Actual Behavior
Niether
The text was updated successfully, but these errors were encountered: