If you've read through this series, you've likely seen the OpenLayers6 Sandbox, which shows examples alongside code.

That site was built to intuitively show the results of the code. I thought that seeing the actual implemented result would be much easier to understand than just looking at code.

Showing example sites is good, but I thought it would allow for even freer exploration if I also explained how to build your own GeoServer and connect it to the example site.

In this chapter, I'll provide all the data I actually used on the example site, along with the setup method for GeoServer, so we can connect the OpenLayers6 Sandbox site to our own GeoServer.

Here's what you'll need.

• OpenLayers6 Sandbox source code
  • GitHub Repository
  • Command: git clone https://github.com/RWB0104/gis-dev
• A database
  • Proceeding based on MariaDB
  • Other DBs are fine too
• GeoServer
  • GeoServer official download page
  • Explained based on the Platform Independent Binary
• GeoServer DB plugin
  • Not needed for PostgreSQL
  • From the GeoServer official homepage above, download the plugin for your DB from the Vector Formats section
• SHP spatial data files
  • ZIP download
  • buld_sejong: Sejong road-name-address building polygon data (EPSG:5181)
  • point_starbucks: Starbucks location point data (EPSG:4326)
  • buld_test: polygon data for Transaction use (EPSG:5181)
• QGIS
  • For checking SHP files
  • Can be substituted with GDAL

We'll assume the OpenLayers6 Sandbox source code, GeoServer, and DB are all running on the same PC. In other words, a localhost environment.

The OS doesn't matter, but this document explains things based on Windows.

Let's set up the DB into which we'll load the SHP data. The DB information is as follows.

• Database name: geoserver
• host: localhost
• port: 3306 (default)
• User info
  • username: username
  • password: password1234

SQL
-- Create database
create database geoserver;

-- Create account
create user "username"@"localhost" identified by "password1234";

-- Grant privileges
grant all privileges on geoserver.* to "username"@"localhost";

This information is used later when connecting to GeoServer. Since it has nothing to do with the source code, feel free to use your own values instead of the ones in the example if you'd like. However, the example proceeds based on the info above, so be careful not to get confused.

Note that the account above can only connect from localhost. Changing "localhost" to "%" allows access from anywhere.

You'll need GDAL's ogr2ogr. This document assumes QGIS is installed, and uses QGIS's ogr2ogr.

As of QGIS 3.16, the location of ogr2ogr is as follows.

C:\Program Files\QGIS 3.16\bin

The command format is as follows. If you set up your DB info and account info differently, refer to the command format below and the following command set, and substitute in your own information.

ogr2ogr -f MySQL MySQL:"{DB name},host={DB host},user={DB account name},password={DB password}" {SHP path} -nln {table name to create} -a_srs {SHP's EPSG code} -lco engine=MYISAM

Unzipping shp.zip gives you a set of 3 SHP files, and the commands for inserting each SHP are as follows.

TXT
.\ogr2ogr -f MySQL MySQL:"geoserver,host=172.30.1.4,user=username,password=password1234" C:\Users\itcode\Downloads\shp\buld_sejong.shp -a_srs EPSG:5181 -lco engine=MYISAM
.\ogr2ogr -f MySQL MySQL:"geoserver,host=172.30.1.4,user=username,password=password1234" C:\Users\itcode\Downloads\shp\point_starbucks.shp -a_srs EPSG:4326 -lco engine=MYISAM
.\ogr2ogr -f MySQL MySQL:"geoserver,host=172.30.1.4,user=username,password=password1234" C:\Users\itcode\Downloads\shp\buld_test.shp -a_srs EPSG:5181 -lco engine=MYISAM

If the following 3 tables appear in the table list, the insert was successful.

• buld_sejong
• point_starbucks
• buld_test

The table names match the SHP names, and these names are also used later in GeoServer API calls, so they must not be changed.

You'll probably see a few more tables besides these three — those are metadata, so there's no need to worry about them.

You can find more details on this in this blog's A Guide for Programmers Traveling Through OpenLayers - 6. Turning Spatial Information into a DB post.

Let's set up GeoServer.

Let's apply the DB plugin we downloaded earlier. It's not needed for PostgreSQL.

TXT
// For the Platform Independent Binary
{geoserver}\webapps\geoserver\WEB-INF\lib

// For war
{geoserver}\WEB-INF\lib

Move the following files into the above path.

• gt-jdbc-mysql-29.2.jar
• mysql-connector-java-8.0.28.jar

Once GeoServer is running, if the corresponding DB option shows up when adding a layer, it's been applied correctly.

Even though GeoServer and the frontend are both on localhost, the ports differ, causing CORS errors, so CORS needs to be configured.

You can check this in A Guide for Programmers Traveling Through OpenLayers - 7. How to Manage Spatial Data: GeoServer.

Let's run GeoServer.

TXT
java -jar start.jar

Once it's running, access http://localhost:8080/geoserver and check that the GeoServer page comes up.

The GeoServer login info is as follows.

• username: admin
• password: geoserver

You can find more details on this in this blog's A Guide for Programmers Traveling Through OpenLayers - 7. How to Manage Spatial Data: GeoServer post.

Let's create a workspace in GeoServer. The information below directly affects GeoServer API calls, so it must not be changed.

You can create one by clicking the Workspaces menu in the left sidebar.

• Name: TEST
• Namespace URI: test
• Set as default workspace

This creates the TEST workspace.

Let's create a store, which is the data source. Since we need to connect to MariaDB, select MySQL among the vector data stores. If you don't see it, check whether the plugin was applied correctly.

You can create one by clicking the Stores menu in the left sidebar.

• Workspace: TEST
  • If this is your first time setting things up, TEST will be the only workspace available, so it'll be auto-selected.
• Data source name: mariadb
  • The store's name has no relation to the GeoServer API, so feel free to set it to whatever you want.
• host: localhost
• port: 3306
• database: geoserver
• user: username
• passwd: password1234

If you set up your DB info differently, substitute in the appropriate values.

If the connection has no issues, the store will be created.

Let's create layers. Since we inserted 3 SHP files, we need to create 3 layers, one for each SHP. This is referred to as publishing.

You can create one by clicking the Layers menu in the left sidebar.

If you've followed along so far, you should be able to select the TEST:mariadb store. The targets for layer creation are as follows.

• buld_sejong
• point_starbucks
• buld_test

You can perform publishing by clicking Publish under Actions.

• Declared SRS
  • Click Search to search for and specify the coordinate system.
  • Set buld_sejong and buld_test to EPSG:5181
  • Set point_starbucks to EPSG:4326
• Native Bounding Box
  • Click Compute from data
• Lat/Lon Bounding Box
  • Click Compute from native bounds

buld_sejong requires additional configuration for WMS setup. Click the Publishing tab and perform the following configuration.

• Publishing
  • Move polygon from the list of available styles into Selected Styles and save.

buld_test requires additional configuration for WFS-Transaction setup. Click the Security tab and perform the following configuration.

• Security
  • Grant access to any role

If this setting isn't applied, you'll get a {test}buld_test is read-only error during WFS-Transaction.

In ./src/common/env.ts, change the API URL as follows.

TS
export const API_BASE_URL = 'http://localhost:8080/geoserver';

If you've followed along correctly up to this point, you should be able to confirm that it's connected to your own directly-built GeoServer.

Ever since this series gradually gained a bit of attention, I've received a lot of questions, big and small. Going back and rereading what I'd written in that process, I felt like there was a lot lacking in various places.

Looking back over it, it seemed like I'd only explained the general approach, so I thought it would be helpful to explain the actual setup method based on the example project.

I hope people can use this process to more easily understand the concrete way to set up GeoServer.