Rendering GeoJSON

Before getting into editing, we'll take a look at basic feature rendering with a vector source and layer. The workshop includes a countries.json GeoJSON file in the data directory. We'll start by just loading that data up and rendering it on a map.

First, edit your index.html so we're ready to render a full page map:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OpenLayers</title>
    <style>
      html, body, #map-container {
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: sans-serif;
        background-color: #04041b;
      }
    </style>
  </head>
  <body>
    <div id="map-container"></div>
  </body>
</html>

Now we'll import the three important ingredients for working with vector data:

  • a format for reading and writing serialized data (GeoJSON in this case)
  • a vector source for fetching the data and managing a spatial index of features
  • a vector layer for rendering the features on the map

Update your main.js to load and render a local file containing GeoJSON features:

import 'ol/ol.css';
import GeoJSON from 'ol/format/geojson';
import Map from 'ol/map';
import VectorLayer from 'ol/layer/vector';
import VectorSource from 'ol/source/vector';
import View from 'ol/view';

new Map({
  target: 'map-container',
  layers: [
    new VectorLayer({
      source: new VectorSource({
        format: new GeoJSON(),
        url: './data/countries.json'
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

You should now be able to see a map with country borders at http://localhost:3000/.

GeoJSON features
GeoJSON features

Since we'll be reloading the page a lot, it would be nice if the map stayed where we left it in a reload. We can bring in the ol-hashed package to make this work. Normally we'd install it first (though it should be included with the workshop dependencies already):

npm install --save ol-hashed

Then in our main.js we'll import the function exported by the package:

import sync from 'ol-hashed';

And now we can call this function with our map:

sync(map);

Now you should see that page reloads keep keep the map view stable. And the back button works as you might expect.

results matching ""

    No results matching ""