Openlayers can't display GeoJSON Vectorlayer from RestfulAPI (Node)

Question

I created a restfulAPI using Nodejs, from which I want to create a new Vectorlayer in Openlayers and display on a map.

The GeoJSON I get from the API looks like this (JSONlint and geojson.io both say it's valid):

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [9.9627244, 53.5565378]
        },
        "properties": {
            "f1": 1,
            "f2": "Tabakbörse",
            "f3": "Beim Grünen Jäger 2, 20359 Hamburg"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [9.9874951, 53.5162912]
        },
        "properties": {
            "f1": 2,
            "f2": "Fähr Getränke Kiosk",
            "f3": "Veringstraße 27, 21107 Hamburg"
        }
    }]
}

The function addKioskGeoJSON should add the layer to the map:

import './map.scss'
import {Map as olMap} from 'ol'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import { fromLonLat } from 'ol/proj'
import {Style, Icon} from 'ol/style'
import { Vector as layerVector } from 'ol/layer'
import { Vector as sourceVector } from 'ol/source/'
import GeoJSON from 'ol/format/GeoJSON'


import { Component } from '../component'


const template = '<div ref="mapContainer" class="map-container"></div>'

export class Map extends Component {
  constructor (placeholderId, props) {
    super(placeholderId, props, template)

    const target = this.refs.mapContainer

    // Initialize Openlayers Map
    this.map = new olMap({
       ....
      });

    this.layers = {}; // Map layer dict (key/value = title/layer)
  }

  addKioskGeojson (geojson) {
    console.log(geojson)
    this.layers.kiosks = new layerVector({
      title: 'Kiosks',
      visible: true,
      source: new sourceVector({
        format: new GeoJSON(),
        projection : 'EPSG:4326',
        url: geojson
      }),
      style: new Style({
        image: new Icon(({
          anchor: [0.5, 40],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: './map-icons/kiosk.png'
        }))
      })
    });
    this.map.addLayer(this.layers.kiosks)
  }
}

What's weird is, that I can console.log() the geojson as you can see in the image and my code, but get an 404 error message for adding it as an vector layer.

Your GET request looks wrong. How do you call addKioskGeojson? Edit: Contains geojson the URL or the features? If last, than url: geojson is wrong and should possibly be features: geojson. — pzaenger
I get the data from Postgres, then use this middlerware: // Add GeoJSON endpoint from kiosks table router.get('/kiosks', async ctx => { const results = await database.getKiosks() if (results.length === 0) { ctx.throw(404) } // 404 for no results ctx.body = results }) and call the addKioskGeojson from my main.js file: ` /** Load map data from the API */ async loadMapData () { // Download kiosk pois const kioskGeojson = await this.api.getKiosks() // Add data to map this.mapComponent.addKioskGeojson(kioskGeojson)` — didi_o
When i try features: geojson I get this error: TypeError: collection.getArray is not a function. geojson contains the features — didi_o
A geojson defines features, but to obtain the features as OpenLayers objects the geojson must be parsed using readFeatures — Mike

Mike Mike · Accepted Answer · 2019-07-05T14:10:26

You already have a geojson object (it's not a url). All you need to do is parse the features from the object:

  addKioskGeojson (geojson) {
    console.log(geojson)
    this.layers.kiosks = new layerVector({
      title: 'Kiosks',
      visible: true,
      source: new sourceVector({
        features: new GeoJSON().readFeatures(geojson, { featureProjection: this.map.getView().getProjection() })
      }),
      style: new Style({
        image: new Icon(({
          anchor: [0.5, 40],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: './map-icons/kiosk.png'
        }))
      })
    });
    this.map.addLayer(this.layers.kiosks)
  }

Openlayers can't display GeoJSON Vectorlayer from RestfulAPI (Node)

1 Answers