Publish WMS with Geoserver and Openlayers from own server

Question

I`m struggling with my Geoserver resp. OpenLayers.

Environment: Ubuntu 1804, Tomcat8, Geoserver 2.13.2

I just want to publish vector and raster data from my own server. I can upload the files on my server and the Layers Preview is working correctly.

http://193.31.24.240:8080/geoserver/raster/wms?service=WMS&version=1.1.0&request=GetMap&layers=raster:500k_eng_fac&styles=&bbox=7.236923932667394,47.35615033439554,12.891923932667394,52.770837834395536&width=768&height=735&srs=EPSG:4326&format=application/openlayers#toggle

Also, the wfs-t example in the /www folder is working correctly.

http://193.31.24.240:8080/geoserver/www/wfs-t.html

But I can`t use any other map I tried the Simple Map Example from OpenLayers Example page, changed nothing but it is not working.

http://193.31.24.240:8080/geoserver/www/index.html

I tried about 15 different tutorials, the Projection system is clear EPSG:4326, checked the extent but I never get it running.

A normal HTML page is running so I assume my server is running and working. http://193.31.24.240:8080/geoserver/www/index_work.html

• user1504307: My Preview example needs some time to load, it`s just a test tif without pyramids.
• Devdatta Tengshe: What do you mean when you say that 'it is not working?' Is the HTML page itself not showing up? Or are only the WMS layers not showing up? Do you see any errors on the developer console?
• user1504307: Hi it`s a complete blank page. You see it when you click on 193.31.24.240:8080/geoserver/www/index.html on some pages i got this message in developer console: SyntaxError: import declarations may only appear at top level of a module

Answer 1

In your current Application, You have code like:

 import Map from 'ol/Map.js';
 import View from 'ol/View.js';
 import TileLayer from 'ol/layer/Tile.js';
 import OSM from 'ol/source/OSM.js';

You are facing a Problem, because Most Browsers don't understand this import statement. OL3 onwards, you need to use a Modern Javascript Toolchain, to build up the app, since OL3 is built on Modules.

So what should you do?

1)You should look at https://openlayers.org/en/latest/doc/tutorials/bundle.html

This page talks about how you can create an app using NPM. There are other help pages which talk of using webpack, RollUp, Parcel & Browserify as well as

2)If this is too complicated, just use Leaflet instead; leaflet is more user-friendly, and extremely accessible to beginners. What you want, can easily be done using these 2 tutorials: Quick Start & Using WMS

• user1504307: Thank you so much for your answers, I was able to do it with npm and bundles.