Using GeoServer With OpenLayers
  • Introduction
  • Publishing Data in GeoServer
    • Obtaining the Data
    • Creating a Data Store
    • Publishing a Layer
  • Rendering Data in OpenLayers
    • Adding a Base Map
    • Enabling CORS in GeoServer
    • Fetching Parks Data
    • Styling Features
    • Making It Interactive
  • Extending Your Application
Powered by GitBook
On this page
  1. Rendering Data in OpenLayers

Adding a Base Map

PreviousRendering Data in OpenLayersNextEnabling CORS in GeoServer

Last updated 6 years ago

Open up the OpenLayers project you set up at the beginning of this tutorial. In a seperate terminal window, go ahead and build and serve the project with npm start.

Create a new folder at the top level of the project named data. Create a new file in data named osm-basemap.json. Copy/paste the of our osm-basemap.json file and save. This file is derived from the bright.json file that you worked with on the OpenLayers Workshop, with a bit of customization. We've removed several unneeded layers to clean up the map, and have scaled and cenetered the map on St. Louis. Scroll down to line 41 and you'll see:

"center": [
  -90.2549,38.6447
],
"zoom": 13,

You can customize this if you want a slightly different initial center or scaling.

Open main.js, and add the following lines:

import {apply} from 'ol-mapbox-style';

const map = apply('map-container', './data/osm-basemap.json');

Visit in your browser and you should see something like the following.

It's pretty, but also sort of plain. We'll add our parks in the next step.

If you do not see a map in your application, check to be sure the JSON was copied correctly.

contents
localhost:3000