Uncaught RangeError: out of range source coordinates for DEM data, new in 2.4.0

[jaybo]

mapbox-gl-js version: 2.4.0

browser: Chrome 92.0.4515.131, also happens on Edge and Safari

Steps to Trigger Behavior

1. Switch from 2D to 3D map view.
2. Attempt to edit an existing route using Mapbox Draw.
3. A stream of "Uncaught RangeError: out of range source coordinates for DEM data" are thrown preventing editing the route, and sometimes even moving the map.

Link to Demonstration

1. Got to www.deepzoom.com (use desktop, not mobile device)
2. Select the "Kayak Cordova" demo.
3. Let the demo run for a moment, then click the stop animation button. Click the "Exit Demos" button.
4. Go to the "Route" tab. Click the "Edit" button. A stream of the following errors will appear:

Uncaught RangeError: out of range source coordinates for DEM data
    at dh._idx (vendor.5a8c0eaf.js:19)
    at dh.get (vendor.5a8c0eaf.js:19)
    at wh.getElevationAt (vendor.5a8c0eaf.js:19)
    at circle.queryIntersectsFeature (vendor.5a8c0eaf.js:19)
    at vendor.5a8c0eaf.js:19
    at Ah.loadMatchingFeature (vendor.5a8c0eaf.js:19)
    at Ah.query (vendor.5a8c0eaf.js:19)
    at eh.queryRenderedFeatures (vendor.5a8c0eaf.js:19)
    at ke (vendor.5a8c0eaf.js:19)
    at jt.queryRenderedFeatures (vendor.5a8c0eaf.js:19)
    

5. This problem did NOT exist in mapbox gl V2.3.1 or earlier versions.
6. The issue is perhaps related to the steep terrain in this area?  It doesn't seem to trigger as easily in other locations.

Expected Behavior

Actual Behavior

[jaybo]

Perhaps another clue: previously, this same demo script would trigger #10610

[jaybo]

More information:

1. This error only happens when 3D is enabled.
2. This error only happens when a route is either being drawn or displayed using Mapbox Draw.
3. The problem can happen at any latitude, any zoom, and any topography (including routes strictly defined at sea level).
4. Still happens in mapbox-gl V2.4.1

[jaybo]

Here's a more complete stack trace:

[jaybo]

Y seems to be out of range:

[jaybo]

Bingo! I've created a small pen which recreates the issue:
https://codepen.io/jaybonomad/pen/vYmqrRP

Draw a polyline with multiple segments with devtools open.
(The bug is not triggered on every segment or at every location so it may take a few attempts.)

The bug is related to the style applied to linestring vertices using circles with user defined properties.
If I remove the "gl-draw-polygon-and-line-vertex-static" vertex style from this pen, the problem disappears.

[jaybo]

Possibly related? mapbox/mapbox-gl-draw#1063

[jaybo]

I was able to fix this problem on my end as described below, but the fact that my (apparent?) bug surfaces as a totally unrelated error of "out of range source coordinates for DEM data" was super confusing. And I still have no idea why the change below fixes the exception.

What I changed:

{
    id: "gl-draw-polygon-and-line-vertex-static",
    type: "circle",

     filter: ["all", ["!=", "meta", "midpoint"], ["==", "$type", "Point"]],  // THIS VERSION WORKS
  // filter: ["all", ["!=", "meta", "midpoint"]], // THIS VERSION CAUSES THE DEM EXCEPTION

    paint: {
        "circle-radius": 5,
        "circle-color": ["coalesce", ["get", "user_color"], DZ.dzPerm.activeRouteColor], 
    },
},

I guess this issue can be closed.

[SnailBones]

Thanks for your thorough work looking into this @jaybo! I can confirm that this is still occurring despite the resolution of #10610.

[jaybo]

Just a friendly reminder that this is still an issue with 2.7.0. Here's a codepen:
https://codepen.io/jaybonomad/pen/gOXrKqL

Draw a polyline with the map at a 45 degree pitch.

Out comes a steady stream of:

dem_data.js:102 Uncaught RangeError: out of range source coordinates for DEM data
    at Bp._idx (dem_data.js:102:80)
    at Bp.get (dem_data.js:88:28)
    at qp.getElevationAt (elevation.js:251:29)
    at nl (circle_style_layer.js:99:70)
    at circle.queryIntersectsFeature (circle_style_layer.js:64:16)
    at feature_index.js:161:39
    at Np.loadMatchingFeature (feature_index.js:222:56)
    at Np.query (feature_index.js:147:18)
    at bp.queryRenderedFeatures (tile.js:403:40)
    at It (query_features.js:37:43)

[jaybo]

I'm guessing the origin of the bug is: mapbox/mapbox-gl-draw#1077

[jaybo]

Just a friendly reminder that this is still an issue with mapbox-gl 2.10.0. Here's a codepen:
https://codepen.io/jaybonomad/pen/gOXrKqL

Draw a polyline with the map at a 45 degree pitch. Zoom in and out and rotate the map for maybe a minute. Eventually, out comes a steady stream of:

dem_data.js:102 
        
       Uncaught RangeError: out of range source coordinates for DEM data
    at Ld._idx (dem_data.js:102:80)
    at Ld.get (dem_data.js:88:28)
    at Yd.getElevationAt (elevation.js:288:29)
    at ru (circle_style_layer.js:104:70)
    at circle.queryIntersectsFeature (circle_style_layer.js:66:16)
    at feature_index.js:164:39
    at Wd.loadMatchingFeature (feature_index.js:225:56)
    at Wd.query (feature_index.js:150:18)
    at Id.queryRenderedFeatures (tile.js:440:40)
    at Re (query_features.js:47:43)