search

tethysplatform / tethys

The Tethys Platform main Django website project repository.
http://tethysplatform.org/
BSD 2-Clause "Simplified" License
92 stars 49 forks source link

Typo in Map Layout Basemaps [BUG] #998

Open AbbyKloss opened 9 months ago

AbbyKloss commented 9 months ago

Describe the bug A typo in the Map Layout class's basemaps attribute leads to that layer and any proceeding layer to not load.

To Reproduce Steps to reproduce the behavior:

  1. (optional) Install the docker container through the Docker Compose file
  2. Clone https://github.com/tethysplatform/tethysapp-map_layout_tutorial/tree/configure-data-plotting-solution
  3. Install the app
  4. in the controllers.py, on line 22, add the following: basemaps = ["OpenStreetMap", "ERSI"] Note: the correct line to add for a working page would be basemaps = ["OpenStreetMap", "ESRI"]
  5. In the app home page, the only layer that will load is the OpenStreetMap layer

Expected behavior What I would expect is for the misspelled error to be skipped over, rather than taking down every proceeding layer with it.

Errors/Traceback

JavaScript Console Output:

jQuery.Deferred exception: m_wms_feature_selection_changed_callbacks is undefined onSelectionChange@http://localhost:8000/static/tethys_gizmos/js/tethys_map_view.js:2570:7
init_feature_selection@http://localhost:8000/static/tethys_layouts/map_layout/map_layout.js:1579:23
setup_map@http://localhost:8000/static/tethys_layouts/map_layout/map_layout.js:212:6
@http://localhost:8000/static/tethys_layouts/map_layout/map_layout.js:1947:6
mightThrow@https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js:3766:29
Deferred/then/resolve/</process<@https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js:3834:12
setTimeout handler*Deferred/then/resolve/<@https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js:3872:16
fire@https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js:3500:31
fireWith@https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js:3630:7
fire@https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js:3638:10
fire@https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js:3500:31
fireWith@https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js:3630:7
ready@https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js:4110:13
completed@https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js:4120:9
EventListener.handleEvent*@https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js:4136:11
@https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js:36:10
@https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js:40:4
 undefined [jquery.js:4050:18](https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js)
Uncaught AssertionError: Assertion failed. See https://openlayers.org/en/v6.12.0/doc/errors/#58 for details.
    n AssertionError.js:24
    P Collection.js:309
    push Collection.js:226
    addLayer PluggableMap.js:564
    ol_base_map_init tethys_map_view.js:295
    ol_base_map_init tethys_map_view.js:248
    ol_initialize_all tethys_map_view.js:1212
    <anonymous> tethys_map_view.js:2600
    jQuery 13
[AssertionError.js:24:4](webpack://ol/src/AssertionError.js)
Uncaught TypeError: m_wms_feature_selection_changed_callbacks is undefined
    onSelectionChange http://localhost:8000/static/tethys_gizmos/js/tethys_map_view.js:2570
    init_feature_selection http://localhost:8000/static/tethys_layouts/map_layout/map_layout.js:1579
    setup_map http://localhost:8000/static/tethys_layouts/map_layout/map_layout.js:212
    <anonymous> http://localhost:8000/static/tethys_layouts/map_layout/map_layout.js:1947
    jQuery 13

Tethys Log Output was empty.

Screenshots If applicable, add screenshots to help explain your problem.

Working:

image

Broken:

image

Tethys Environment Information Using a slight variation of the Docker Compose file

jakeymac commented 1 month ago

Similar bug found: Providing a single misspelled option for basemaps ie ' basemaps = ["OpenStreetMa"] ' causes errors and layers to not show up on the empty map.

Javascript console output: jquery.js:4050 jQuery.Deferred exception: Cannot read properties of undefined (reading 'addEventListener') TypeError: Cannot read properties of undefined (reading 'addEventListener') at X (https://cdn.jsdelivr.net/npm/openlayers-dist@6.12.0/ol.js:2:122935) at n.Sn (https://cdn.jsdelivr.net/npm/openlayers-dist@6.12.0/ol.js:2:195772) at n.kn (https://cdn.jsdelivr.net/npm/openlayers-dist@6.12.0/ol.js:2:196116) at n.dispatchEvent (https://cdn.jsdelivr.net/npm/openlayers-dist@6.12.0/ol.js:2:122010) at n.insertAt (https://cdn.jsdelivr.net/npm/openlayers-dist@6.12.0/ol.js:2:127487) at n.push (https://cdn.jsdelivr.net/npm/openlayers-dist@6.12.0/ol.js:2:127669) at n.addLayer (https://cdn.jsdelivr.net/npm/openlayers-dist@6.12.0/ol.js:2:227659) at http://localhost:8000/static/tethys_gizmos/js/tethys_map_view.js:295:15 at Array.forEach () at ol_base_map_init (http://localhost:8000/static/tethys_gizmos/js/tethys_map_view.js:248:24) undefined jQuery.Deferred.exceptionHook @ jquery.js:4050 process @ jquery.js:3838 setTimeout (async) (anonymous) @ jquery.js:3872 fire @ jquery.js:3500 fireWith @ jquery.js:3630 fire @ jquery.js:3638 fire @ jquery.js:3500 fireWith @ jquery.js:3630 ready @ jquery.js:4110 completed @ jquery.js:4120Understand this warning jquery.js:4050 jQuery.Deferred exception: Cannot use 'in' operator to search for 'tethys_data' in undefined TypeError: Cannot use 'in' operator to search for 'tethys_data' in undefined at http://localhost:8000/static/tethys_layouts/map_layout/map_layout.js:155:28 at n.forEach (https://cdn.jsdelivr.net/npm/openlayers-dist@6.12.0/ol.js:2:127238) at setup_map (http://localhost:8000/static/tethys_layouts/map_layout/map_layout.js:153:24) at HTMLDocument. (http://localhost:8000/static/tethys_layouts/map_layout/map_layout.js:1947:6) at mightThrow (https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js:3766:29) at process (https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js:3834:12) undefined jQuery.Deferred.exceptionHook @ jquery.js:4050 process @ jquery.js:3838 setTimeout (async) (anonymous) @ jquery.js:3872 fire @ jquery.js:3500 fireWith @ jquery.js:3630 fire @ jquery.js:3638 fire @ jquery.js:3500 fireWith @ jquery.js:3630 ready @ jquery.js:4110 completed @ jquery.js:4120Understand this warning Group.js:305 Uncaught TypeError: Cannot read properties of undefined (reading 'getLayerStatesArray') at Group.js:305:13 at n.forEach (Collection.js:155:7) at n.getLayerStatesArray (Group.js:304:22) at n.qe (PluggableMap.js:1491:48) at n. (PluggableMap.js:254:12) (anonymous) @ Group.js:305 n.forEach @ Collection.js:155 n.getLayerStatesArray @ Group.js:304 n.qe @ PluggableMap.js:1491 (anonymous) @ PluggableMap.js:254 requestAnimationFrame (async) n.render @ PluggableMap.js:1407 n.vr @ PluggableMap.js:1205 n.dispatchEvent @ Target.js:111 n.notify @ Object.js:175 n.set @ Object.js:211 n.setSize @ PluggableMap.js:1594 n.updateSize @ PluggableMap.js:1671 n.dr @ PluggableMap.js:1296 n.dispatchEvent @ Target.js:111 n.notify @ Object.js:175 n.set @ Object.js:211 n.setProperties @ Object.js:225 n @ PluggableMap.js:424 n @ Map.js:72 ol_map_init @ tethys_map_view.js:1071 ol_initialize_all @ tethys_map_view.js:1206 (anonymous) @ tethys_map_view.js:2600 mightThrow @ jquery.js:3766 process @ jquery.js:3834 setTimeout (async) (anonymous) @ jquery.js:3872 fire @ jquery.js:3500 fireWith @ jquery.js:3630 fire @ jquery.js:3638 fire @ jquery.js:3500 fireWith @ jquery.js:3630 ready @ jquery.js:4110 completed @ jquery.js:4120Understand this error jquery.js:4059 Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener') at X (events.js:63:10) at n.Sn (Group.js:184:7) at n.kn (Group.js:225:10) at n.dispatchEvent (Target.js:111:13) at n.insertAt (Collection.js:203:10) at n.push (Collection.js:229:10) at n.addLayer (PluggableMap.js:564:12) at tethys_map_view.js:295:15 at Array.forEach () at ol_base_map_init (tethys_map_view.js:248:24) X @ events.js:63 n.Sn @ Group.js:184 n.kn @ Group.js:225 n.dispatchEvent @ Target.js:111 n.insertAt @ Collection.js:203 n.push @ Collection.js:229 n.addLayer @ PluggableMap.js:564 (anonymous) @ tethys_map_view.js:295 ol_base_map_init @ tethys_map_view.js:248 ol_initialize_all @ tethys_map_view.js:1212 (anonymous) @ tethys_map_view.js:2600 mightThrow @ jquery.js:3766 process @ jquery.js:3834 setTimeout (async) jQuery.readyException @ jquery.js:4058 (anonymous) @ jquery.js:4078 mightThrow @ jquery.js:3766 process @ jquery.js:3834 setTimeout (async) (anonymous) @ jquery.js:3872 fire @ jquery.js:3500 fireWith @ jquery.js:3630 fire @ jquery.js:3638 fire @ jquery.js:3500 fireWith @ jquery.js:3630 process @ jquery.js:3854 setTimeout (async) (anonymous) @ jquery.js:3872 fire @ jquery.js:3500 fireWith @ jquery.js:3630 fire @ jquery.js:3638 fire @ jquery.js:3500 fireWith @ jquery.js:3630 ready @ jquery.js:4110 completed @ jquery.js:4120Understand this error jquery.js:4059 Uncaught TypeError: Cannot use 'in' operator to search for 'tethys_data' in undefined at map_layout.js:155:28 at n.forEach (Collection.js:155:7) at setup_map (map_layout.js:153:24) at HTMLDocument. (map_layout.js:1947:6) at mightThrow (jquery.js:3766:29) at process (jquery.js:3834:12)