WMS Layer Pop-Up Does Not Work

[Sonia-96]

Hello Tethys Developers,

I add a WMS layer to my map with following code:

wms_layer = self.build_wms_layer(
    endpoint=geoserver_wms_url, # 'http://localhost:8080/geoserver/wms'
    server_type='geoserver',
    layer_name='topp:states',
    layer_title='Population',
    layer_variable='population',
    visible=False, 
    selectable=True,
    geometry_attribute='the_geom',
    excluded_properties=['STATE_FIPS', 'SUB_REGION'],
    plottable=True
)

And I also set show_properties_popup=True in my MapLayout:

class StateTempMap(MapLayout):
    ...
    show_properties_popup = True

The WMS layer is showing but there's no pop-up when I click the layer. I also checked the Layer Preview of my local GeoServer, the popup works well.

Is this the problem of my environment or it's because I miss something important in my code?

Thank you!

[swainn]

Hi @Sonia-96 are you getting any errors in the JavaScript console when you try to select a feature? Can you post if so?

[swainn]

I just tested the MapLayout in the Layout Showcase with this GeoServer: https://tethys2.byu.edu/geoserver/rest/ and it seems to be working. Can you test your app with that GeoServer?

[Sonia-96]

Also, what version of GeoServer are you using?

I am using GeoServer 2.23. I use Docker Container for my GeoServer. https://docs.geoserver.org/stable/en/user/installation/docker.html

[Sonia-96]

Does this mean I need to change endpoint to https://tethys2.byu.edu/geoserver/rest/ ?

[swainn]

If you change the value of geoserver_wms_url manually to test, change it to https://tethys2.byu.edu/geoserver/wms. If you change it in your spatial persistent store service, then set it to https://tethys2.byu.edu/geoserver/rest/

[Sonia-96]

I am using https://tethys2.byu.edu/geoserver/wms. Now the map is selectable but still no pop-ups. This is the error message:

Uncaught TypeError: Cannot read properties of undefined (reading 'hasOwnProperty')
at generate_properties_table_title (map_layout.js:1425:19)
at display_properties (map_layout.js:1369:36)
at on_select_wms_features (map_layout.js:1330:11)
at selected_features_changed (tethys_map_view.js:1908:7)
at Object.jsonp_response_handler [as jsonResponseHandler] (tethys_map_view.js:2053:7)
at https://tethys2.byu.edu/geoserver/wfs?SERVICE=wfs&VERSION=2.0.0&REQUEST=GetFeature&TYPENAMES=topp:states&VIEWPARAMS=&OUTPUTFORMAT=text/javascript&FORMAT_OPTIONS=callback:TETHYS_MAP_VIEW.jsonResponseHandler;&SRSNAME=EPSG:3857&CQL_FILTER=BBOX(:8000/apps/state-temp-map/the_geom%2C-11236909.913822768%2C5942068.303898547%2C-11144419.109276013%2C6034559.108445302%2C%27EPSG%3A3857%27)&COUNT=1&callback=jQuery36004749164773170971_1691604514258&_=1691604514260:1:17

[swainn]

@Sonia-96 I think I know what is going on. The JSONP format that the MapLayout is requesting is not enabled by default. See: https://docs.geoserver.org/2.22.x/en/user/services/wfs/outputformats.html and https://docs.geoserver.org/2.22.x/en/user/services/wms/global.html#wms-global-variables

[swainn]

Alternatively, you can install the GeoServer Docker container that Tethys provides using the tethys docker command:

tethys docker init -c geoserver
tethys docker start -c geoserver

Note: this is an older version of GeoServer (2.8).

[Sonia-96]

Thank you @swainn . I am actually using tethys docker, but the WMS layer is still not selectable or have pop-ups. This is the error message:

localhost:8080/geoserver/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=topp%3Astates&TILED=true&TILESORIGIN=0.0%2C0.0&WIDTH=512&HEIGHT=512&CRS=EPSG%3A3857&STYLES=&FORMAT_OPTIONS=dpi%3A180&BBOX=-10018754.17%2C-5009377.085%2C-7514065.6274999995%2C-2504688.5425:1 GET http://localhost:8080/geoserver/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=topp%3Astates&TILED=true&TILESORIGIN=0.0%2C0.0&WIDTH=512&HEIGHT=512&CRS=EPSG%3A3857&STYLES=&FORMAT_OPTIONS=dpi%3A180&BBOX=-10018754.17%2C-5009377.085%2C-7514065.6274999995%2C-2504688.5425 net::ERR_CONNECTION_REFUSED

[swainn]

From the error you sent it looks like your endpoint still has port 8080 in it. The tethys geoserver docker is served on port 8181, instead of the normal 8080. Sorry for the confusion.

[Sonia-96]

@swainn Thanks for your help. After checking your answers and the tethys-layout_showcase app, I finally fixed the issue.

These are what I did:

1. Change endpoint to https://tethys2.byu.edu/geoserver/wms or http://localhost:8181/geoserver/wms (using tethys docker)

2. Add a variable geoserver_workspace = 'topp' to MapLayout

class StateTempMap(MapLayout):
    ...
    show_properties_popup = True,
    geoserver_workspace = 'topp'