on load method： Occasionally the load method does not trigger a callback #4024

qlanto224 · 2024-04-23T01:37:38Z

maplibre-gl-js version:4.1.3 and 2.4.0

browser:

Steps to Trigger Behavior

return new Promise((resolve, reject) => {
      try {
        let style = data.styles[0];
        console.log(style)
        this.handler = new Map({
          container: this.getContainer(),
          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');
        this.handler.setRenderWorldCopies(false);
        this.handler.on('load', () => {
          resolve(true);
        });
      } catch (e) {
        reject(e);
      }
    });

engine.render(mapRef.current).then(async () => {
    console.log(11111)
});

Link to Demonstration

Expected Behavior

console 11111

Actual Behavior

After refreshing the page several times，occasionally cant console 111111

qlanto224 · 2024-04-23T02:57:59Z

when I click map ， the load method trigger

HarelM · 2024-04-23T04:38:21Z

Please provide a jsbin with a reproduction.

qlanto224 · 2024-04-23T06:38:40Z

Please provide a jsbin with a reproduction.

sorry， I cant provide this style.
I found that when the requested layer data is too large, the request time is more than 10 seconds, it will not be called.
I'm not sure if there is a timeout inside 'load'.

HarelM · 2024-04-23T08:50:04Z

I'm not aware of timeout definition.
Also, without a reproduction I can't help.
You don't have to provide your style, but rather something that reproduces the issue...

qlanto224 · 2024-04-23T08:57:33Z

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>;
};

example：

qlanto224 · 2024-04-24T13:10:30Z

I'm not aware of timeout definition. Also, without a reproduction I can't help. You don't have to provide your style, but rather something that reproduces the issue...

This phenomenon mainly occurs when the browser refreshes.
this is my code：

<!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>

qlanto224 · 2024-04-24T13:20:30Z

This is a video I made of the operation.

20240424_211641.mp4

HarelM · 2024-04-27T04:33:35Z

Can you check if the map isLoaded before you register the callback?
It might be that when you refresh the browser and everything is cached the map initialization finishes before you register the callback (classic race condition).

qlanto224 · 2024-04-27T06:19:13Z

Can you check if the map isLoaded before you register the callback? It might be that when you refresh the browser and everything is cached the map initialization finishes before you register the callback (classic race condition).

I'm not sure if that's the check.
like that:

let a = setInterval(()=>{
      if(map.loaded()){
        map.on('load', (e) => {
          console.log('load')
        });
        clearInterval(a)
      }
    },50);

HarelM · 2024-04-27T07:06:19Z

If map is loaded you won't get the load event.

if (map.isLoaded()) doSomeThing()
map.on('load', doSomeThing)

qlanto224 · 2024-04-27T07:33:33Z

I tried, but map.loaded() condition also can't execute.

// 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'

HarelM · 2024-04-27T08:25:28Z

I don't understand what you wrote, but I think this is working as expected, I'm inclined to close this issue...

qlanto224 · 2024-04-27T08:37:22Z

I don't understand what you wrote, but I think this is working as expected, I'm inclined to close this issue...

I say ，
When the map is not loaded, the on('load') method is still not executed. Because map.loaded() is false. And there's no map.isLoaded() method, just map.loaded().

if (map.isLoaded()) doSomeThing()
map.on('load', doSomeThing)

qlanto224 · 2024-04-27T08:39:30Z

sorry, English is not very well. But I'm not sure what you don't understand.

HarelM · 2024-04-28T21:04:43Z

I wrote the following code but I'm unable to reproduce your issue:

fetch('https://demotiles.maplibre.org/style.json')
        .then(response => response.json())
        .then(data => {
            const map = new maplibregl.Map({
                container: 'map', // container id
                style: data,
                center: [0, 0], // starting position [lng, lat]
                zoom: 1, // starting zoom
                maplibreLogo: true
            });
            if (map.loaded()) console.log('Map already loaded');
            map.on('load', () => {
                console.log('Map loaded, load event');
            });
        });

I always get Map loaded, load event.

qlanto224 · 2024-04-29T01:14:55Z

I wrote the following code but I'm unable to reproduce your issue:

fetch('https://demotiles.maplibre.org/style.json')
        .then(response => response.json())
        .then(data => {
            const map = new maplibregl.Map({
                container: 'map', // container id
                style: data,
                center: [0, 0], // starting position [lng, lat]
                zoom: 1, // starting zoom
                maplibreLogo: true
            });
            if (map.loaded()) console.log('Map already loaded');
            map.on('load', () => {
                console.log('Map loaded, load event');
            });
        });

I always get Map loaded, load event.

sure , I found . when the zoom set 11, can't get that. Maybe 404 or other ajax error occurred due to resource loading.
It seems like , the failed request blocks the map load event.

HarelM · 2024-04-29T05:45:48Z

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!

HarelM added the need more info Further information is requested label Apr 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

on load method： Occasionally the load method does not trigger a callback #4024

on load method： Occasionally the load method does not trigger a callback #4024

qlanto224 commented Apr 23, 2024

qlanto224 commented Apr 23, 2024

HarelM commented Apr 23, 2024

qlanto224 commented Apr 23, 2024

HarelM commented Apr 23, 2024

qlanto224 commented Apr 23, 2024

qlanto224 commented Apr 24, 2024

qlanto224 commented Apr 24, 2024

HarelM commented Apr 27, 2024

qlanto224 commented Apr 27, 2024

HarelM commented Apr 27, 2024

qlanto224 commented Apr 27, 2024

HarelM commented Apr 27, 2024

qlanto224 commented Apr 27, 2024 •

edited

qlanto224 commented Apr 27, 2024

HarelM commented Apr 28, 2024

qlanto224 commented Apr 29, 2024 •

edited

HarelM commented Apr 29, 2024

on load method： Occasionally the load method does not trigger a callback #4024

on load method： Occasionally the load method does not trigger a callback #4024

Comments

qlanto224 commented Apr 23, 2024

Steps to Trigger Behavior

Link to Demonstration

Expected Behavior

Actual Behavior

qlanto224 commented Apr 23, 2024

HarelM commented Apr 23, 2024

qlanto224 commented Apr 23, 2024

HarelM commented Apr 23, 2024

qlanto224 commented Apr 23, 2024

qlanto224 commented Apr 24, 2024

qlanto224 commented Apr 24, 2024

HarelM commented Apr 27, 2024

qlanto224 commented Apr 27, 2024

HarelM commented Apr 27, 2024

qlanto224 commented Apr 27, 2024

HarelM commented Apr 27, 2024

qlanto224 commented Apr 27, 2024 • edited

qlanto224 commented Apr 27, 2024

HarelM commented Apr 28, 2024

qlanto224 commented Apr 29, 2024 • edited

HarelM commented Apr 29, 2024

qlanto224 commented Apr 27, 2024 •

edited

qlanto224 commented Apr 29, 2024 •

edited