Uncaught TypeError: Cannot read properties of undefined (reading '_mult') or (reading 'point')

[force9493]

I sometimes get this error when displayed the three.js model in mapbox using maplibre-gl and zooming the model. Could you please check this issue? I think you prefer to add the conditional code before _mult.

Also, I have got the following error when zooming the map. In this case, I didn't display the three.js model. Hope you give me a resolution asap.

[HarelM]

Please provide a jsbin/codepen with the relevant issue.

[force9493]

Please provide a jsbin/codepen with the relevant issue.

@HarelM Thanks for your kindness.

I used the following code. import ReactMapGL from 'react-map-gl'; import { Layer } from 'react-map-gl';

const Map = () => {

...

const customLayer = {
    id: `3d-model-${data.id}-model`,
    type: 'custom',
    renderingMode: '3d',
    onAdd(_map, gl) {
         ...
    },
    render(gl, matrix) {
         ...
    }
};

return (
      <ReactMapGL
          mapStyle={...}
          initialViewState={{
            latitude: initViewport.latitude,
            longitude: initViewport.longitude,
            zoom: initViewport.zoom,
            pitch: initViewport.pitch,
            bearing: initViewport.bearing,
          }}
          maxBounds={initViewport.maxBounds}
          maxZoom={initViewport.maxZoom}
          minZoom={initViewport.minZoom}
          maxPitch={60}
        >
          ...
          <Layer {...customLayer} />
      </ReactMapGL>
);

};

[HarelM]

In this case, it might come from the react wrapper usage of maplibre. I'll need a reproduction that doesn't use the react wrapper. Also the above is not sufficient for someone in the future to reproduce the bug, so please share a jsbin/codepen with a reproduction of the issue.

[force9493]

@HarelM Sorry for my late message. This is the code sandbox example you can reproduce. https://codesandbox.io/p/sandbox/react-map-gl-maplibre-gl-forked-rqy9f9 https://codesandbox.io/p/sandbox/inspiring-benz-cy3l5m

When zooming the map, you can see the following error message.

The first one is the react page and the second one is the pure javascript page. Please check and tell me the resolution.

[HarelM]

I don't see any errors in the pure javascript exmaple, this repo is not responsible for the react wrapper: Am I missing anything?

[HarelM]

I would also recommend reducing the style's layers and sources to be a lot simpler in order to narrow down the cause of the issue. i.e. try and inline the style in the sandbox - if you can reproduce this in 3-4 layers it would help with narrowing down the problem.

[force9493]

https://www.awesomescreenshot.com/video/24244233?key=93d83c2f1d2204b4885ffee5af706501

@HarelM As you can see in this record, you can see that error message when zooming the buildings (especially corners).

[HarelM]

Thanks for the recording! Can you reduce the number of layers in order to simplify this example? There's a lot of layers, it might be interesting to know which layers are causing this issue.

[force9493]

@HarelM There is no layer in the current code sandbox example. that includes only map. could you please check my sandbox examples again?

https://codesandbox.io/p/sandbox/react-map-gl-maplibre-gl-forked-rqy9f9 https://codesandbox.io/p/sandbox/inspiring-benz-cy3l5m

[HarelM]

The layers are described in the json file linked in your sandbox. https://maps.geoapify.com/v1/styles/maptiler-3d/style.json?apiKey=*** When looking at this file you'll get a lot of layers.

You can "inline" the style content into the sandbox and slowly remove layers until you find the minimal layers that still cause this error.

[force9493]

@HarelM Sure, thanks for your kindness. but when I run this map style in mapbox-gl, there is no any issue when zooming the map like above. What's the difference between mapbox-gl and maplibre-gl?

[HarelM]

There are many differences between mapbox-gl and maplibre-gl now, they originated from the same source but have diverged over time. The most notable difference is that you need to pay for mapbox but you don't need to pay for maplibre.

[DeerL1o]

I have a similar problem. Is there any way to help

[DeerL1o]

This problem appears in 3.6.3, 4.5.0 similar problem occurs but no error is displayed

[HarelM]

A minimal reproduction is still needed.

[DeerL1o]

A minimal reproduction is still needed.

Here's my recording link. It seems that not all map regions have this error. https://www.awesomescreenshot.com/video/30099948?key=dd6772da83fb0d92dde9ae4aacc34d84 This is my code, just using vue to load the basic configuration of the map without any changes: https://stackblitz.com/edit/vitejs-vite-fhpc7h?file=src%2FApp.vue Thank you in advance for your help. I look forward to your reply.

[HarelM]

Adding a map with a style that has hundreds of layers is very far from a minimal reproduction. Please create a minimal reproduction with a style that is inlined and contains just a few layers.

[DeerL1o]

I think I have identified some potential causes of the issue. The way road labels are handled differs between MapLibre and Mapbox. Figures 1 and 2 show MapLibre, while Figures 3 and 4 show Mapbox. When I zoom to Figure 2, the map becomes unresponsive to dragging and zooming, but this issue does not occur with Mapbox. I tried commenting out the symbol-placement property in the road_label, and the issue was resolved.