WMS Layer / Globe Turns Blue

[Kruelle2000]

Hello,

We have problems adding a WMS-Layer (https://geodienste.hamburg.de/HH_WMS_DOP20?version=1.3.0&service=WMS&request=GetSchemaExtension)to our Web-Map (https://test1.co-zukunft.de/Hamburg_Gesamt_v2/3dcitydb-web-map-1.4.0/3dwebclient/index.html).The globe turns blue after confirming „Add WMS layer“. The layer is specified as „1“. The additional Parameters and ProxyURL field are left empty. Other WMS Services are not working as well.

The WMS Layer can be added to the Web-Map when running on localhost:8000 and /proxy/ specified in the proxyURL field.

Mixed content shouldn’t be the problem as both pages are in HTTPS. WMS version 1.3.0 seems to work, at least when the Web-Map is running local.

Is there something else to consider?

Thank you for your time

Regards Malte

[BWibo]

1. Send a getCapabilites request to the server to determine the correct layer name and any other parameter you require to form a correct request: https://geodienste.hamburg.de/HH_WMS_DOP20?version=1.3.0&service=WMS&request=GetCapabilities

2. The request URL has a wrong request parameter, try this: https://geodienste.hamburg.de/HH_WMS_DOP20?version=1.3.0&service=WMS&request=GetMap When you copy this URL to a bowser you will get insight in what else is missing in your request. You will find all the information in the getCapabilities response:

   <ServiceExceptionReport version="1.3.0" xsi:schemaLocation="http://www.opengis.net/ogc http://schemas.opengis.net/wms/1.3.0/exceptions_1_3_0.xsd">
    <ServiceException code="StylesNotDefined">
     Parameter 'styles' is required.
    </ServiceException>
    <ServiceException code="InvalidFormat">
     Parameter 'format' contains unacceptable value.
    </ServiceException>
    <ServiceException code="LayerNotDefined">
     Parameter 'layers' can not be empty.
    </ServiceException>
    <ServiceException code="InvalidSRS(CRS)">
     Parameter 'srs(crs)' has wrong value.
    </ServiceException>
    <ServiceException code="InvalidFormat">
     Parameter 'bbox' can not be empty.
    </ServiceException>
    <ServiceException code="InvalidFormat">
     Parameter 'width' can not be empty.
    </ServiceException>
    <ServiceException code="InvalidFormat">
     Parameter 'height' can not be empty.
    </ServiceException>
   </ServiceExceptionReport>

   You will most likely only have to specifiy the CRS parameter in the request URL. All other parameters should be delivered by the client.

3. I recommend building the request URL in a text editor first and test it within a browser. As soon as the request succeeds (an image is displayed in the browser) adapt the request URL for the web client.

[Kruelle2000]

Hello BWibo,

Thank you for your help.

I managed to build the correct WMS request in the browser by taking the information from the getCapabilities request (https://geodienste.hamburg.de/HH_WMS_DOP20?request=GetMap&service=WMS&version=1.3.0&layers=1&styles=&crs=EPSG:25832&bbox=466000.000000,5916000.000000,589000.000000,5977000.000000&width=1920&height=1080&format=image/jpeg).

In the client I tried just specifying the crs (https://geodienste.hamburg.de/HH_WMS_DOP20?request=GetMap&service=WMS&version=1.3.0&crs=EPSG:25832),taking the link that worked in the browser and just taking the request that works local (https://geodienste.hamburg.de/HH_WMS_DOP20?version=1.3.0&service=WMS&request=GetMap) but the globe still turned blue.

Any further thoughts on this?

Regards

Malte

[BWibo]

Hey there, this worked for me with the Node.js testserver when using layer = 1 with this URL: https://geodienste.hamburg.de/HH_WMS_DOP20?request=GetMap&service=WMS&version=1.3.0

I assume this issue is related to the Same-Origin-Policy, a security feature of modern web browsers and web applications, which is a common problem when delivering content from different sources (Here: the server where the web client runs, the server of the wms). Cross-Origin Ressource Sharing (CORS), is a method to prevent this.

In the node.js test server a proxy server is running in the background, that is handling request to WMS services. This way it seems to the clients browser that all content is coming from the same source.

A possible solution would be to setup a Server Side Proxy on your webserver (I guess https://test1.co-zukunft.de) doing the same. A similar solution is described here.

@yaozhihang can you provide any helpful input on this?

[thomashkolbe]

Hi all,

yes, it seems to be a CORS issue. When I use the WMS URL with the 3D Webmap Client hosted on our 3DCityDB server, everything works nicely, see:

https://www.3dcitydb.net/3dcitydb-web-map/1.5/3dwebclient/index.html?title=3DCityDB-Web-Map-Client&shadows=false&terrainShadows=0&latitude=53.55685932079526&longitude=10.02336019926981&height=334.1633723986887&heading=10.531688960617805&pitch=-43.8233619481877&roll=0.04506626631464086&&basemap=name%3D%26iconUrl%3D%26tooltip%3D%26url%3Dhttps%253A%252F%252Fgeodienste.hamburg.de%252FHH_WMS_DOP20%253Frequest%253DGetMap%2526service%253DWMS%2526version%253D1.3.0%26layers%3D1%26additionalParameters%3D%26proxyUrl%3D%252Fproxy%252F

Best regards Thomas Kolbe  

Hey there, this worked for me in the Node.js testserver when using /layer/ = /1/ with this URL: https://geodienste.hamburg.de/HH_WMS_DOP20?request=GetMap&service=WMS&version=1.3.0

img https://user-images.githubusercontent.com/7643434/38419374-7bcd0c78-39a0-11e8-8ac0-b53d578e3a28.jpg

I assume this issue is related to the Same-Origin-Policy https://de.wikipedia.org/wiki/Same-Origin-Policy, a security feature of modern web browsers and web applications, which is a common problem when delivering content from different sources (Here: the server where the web client runs, the server of the wms). Cross-Origin Ressource Sharing (CORS) https://de.wikipedia.org/wiki/Cross-Origin_Resource_Sharing, is a method to prevent this.

In the |node.js| test server a proxy server is running in the backround, that is handling request to WMS servers. This way it seems to the clients browser that all content is coming from the same source.

A possible solution would be to setup a Server Side Proxy on your webserver (I guess https://test1.co-zukunft.de) doing the same. A similar solution is described here https://www.google.de/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cad=rja&uact=8&ved=0ahUKEwibkOyczKXaAhWpMewKHbQTBOsQFghBMAI&url=http%3A%2F%2Fpromincproductions.com%2Fblog%2Fserver-proxy-for-cross-origin-resource-sharing-cors%2F&usg=AOvVaw2r8QW_5x8jd0u2uLoIIG2_.

@yaozhihang https://github.com/yaozhihang can you provide any helpful input on this?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/3dcitydb/3dcitydb-web-map/issues/26#issuecomment-379233775, or mute the thread https://github.com/notifications/unsubscribe-auth/AGiF1pQQLDrS9qUe7MIHMaVtyrqHB_YBks5tl1ptgaJpZM4TGhtt.

--

---

Prof. Dr. Thomas H. Kolbe Email: thomas.kolbe@tum.de Lehrstuhl für Geoinformatik WWW : http://www.gis.bv.tum.de Fakultät Bau Geo Umwelt Sekretariat: +49 89 289-22578 Technische Universität München Telefon: +49 89 289-23888 Arcisstraße 21 Telefax: +49 89 289-22878 80333 München, Deutschland

Vorstandsvorsitzender des Runden Tisches Geoinformationssysteme e.V. http://www.rtg.bv.tum.de/

Gastprofessor an der Faculty for Architecture and the Built Environment der TU Delft im Akademischen Jahr 2016/17

Der Lehrstuhl für Geoinformatik ist Ausgezeichneter Ort 2016 im Wettbewerb "Deutschland - Land der Ideen" http://www.gis.bgu.tum.de/projekte/sddi/

[BWibo]

One other suggestion: I recently released a Docker image for the web map client, that offers support for WMS-layers. I believe this is worth a try, as you would not have to setup anything (but Docker) and have your server running in a few seconds.

Checkout https://github.com/tum-gis/3dcitydb-web-map-docker for more.

[Kruelle2000]

Thank you for your help. Our Webclient is not selfhostet, it is running on a shared hosting server. Therefore we are a little stuck here, as we can not provide any proxy or a docker image .

Any further suggestions on this?

[BWibo]

To resolve the CORS issue, your host needs to be configured to allow ressources form other domains. The required configuration however, depends on the web server that is hosting your content. Here (https://enable-cors.org/server.html) are some examples for the most common web servers on how to enable CORS.

As your hosting provider will possibly not allow you to edit the server configuration, you will have to ask the support to do this for you. However, for some web servers you may be lucky and be able to do this on your own.

For instance, if you content is hosted by an Apache web server, it may be sufficient to but a file named .htaccess in your server root/3D web client root folder with following content to enable CORS:

Header set Access-Control-Allow-Origin "*"

1. Hence, try to find out what web server is hosting your content. This web page might help you here: http://browserspy.dk/webserver.php Look for the entry in row server.

2. Look up the CORS configruation options for that web server (e.g. here: https://enable-cors.org/server.html)

3. See if you can do the required configruation yourself, otherwise get in contact with your hosting provider.

[Son-HNguyen]

Closed. Feel free to reopen if you still have any issues.