0

I've been trying to place a simple marker (modeled as an ol.geom.Point) on a map in OpenLayers 5 and style it. I create a feature wrapping this ol.geom.Point, than create a VectorSource that uses it, and than instantiate a VectorLayer with that source as the source as in the following code:

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import GeoJSON from 'ol/format/GeoJSON';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';

let markerFeature = new Feature({
    geometry: new Point([0, 10000000 ]),
});
let markerSource = new VectorSource({
    features: [markerFeature],
});
let markerLayer = new VectorLayer({
    source: markerSource,
});

let markerView = new View({
    center: [0, 0],
    zoom: 2,
});

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

This does what I expect it to do: draw a point on the coordinate [0, 0]. However, when I add a simple style to the markerLayer object containing a stroke with a red color like this, OpenLayers seems to draw nothing:

let markerLayer = new VectorLayer({
    source: markerSource,
    style: new Style({
        stroke: new Stroke({color: 'red'}),
    }),
});

I use yarn to run the project. I get no compilation errors. I also get no errors in the browser console. The same problem occurs in Firefox, Chrome and Edge.

I wonder if someone has ran into similar issues with this seemingly trivial task before. Does anyone have any suggestions about what could be the culprit?

Thanks a lot in advance!

Joshua Schroijen
  • 376
  • 6
  • 23

1 Answers1

1

Please use:

new ol.style.Circle({
   radius: 10,
   stroke: new ol.style.Stroke({
     color: "red",
     width: 2
   }),
   fill: new ol.style.Fill({
     color: "blue"
   })
 })
  • Thanks a lot! Could you please expand more on what the difference is between adding a circle as a feature with the ol.geom.Circle class and this, though? – Joshua Schroijen Apr 15 '19 at 14:03
  • The stroke style needs at least two points (with different coordinates) to draw a feature. This requirement is not given at a point feature. If you don´t define a style by default a circle style is used by openlayers in connection with a point feature. –  Apr 15 '19 at 14:36
  • The circle style won't work alone, it's the image part of a style. – Mike Apr 15 '19 at 15:06