4

To add styling to Openlayers there seems to be different rules for different shapes.

I am trying to understand when to use what, but it is rather confusing and I am only able to do it with the help of examples.

For example, I have a few points generated on my map. I generated these points with GeoJSON data with the following format:

"type": "FeatureCollection",
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
    },
    "features": [{
        "type": "Feature",
        "properties": {
            "property_a": 4,
            "property_b": 4234,
            "property_c": asdf,
            "property_d": 342342,
        },
        "geometry": {
            "type": "Point",
            "coordinates": [5.53204822887795, 51.609252234043296, 0.0]
        }
    }, etc...

I am trying to create points, polygon's and lines. What I don't understand is to why every geometry needs it's own style contructors?

I created styling for a filled point with an example:

var _myStroke = new ol.style.Stroke({
  color : 'rgba(255,0,0,1.0)',
  width : 1,
});

var _myFill = new ol.style.Fill({
   color: 'rgba(255,255,255,1)'
});

var circle = new ol.style.Circle({
    radius: 5,
    fill: _myFill,
    stroke: _myStroke
}); 
var puntObjectenStyle = new ol.style.Style ({
   image:circle
});

var puntObjectenSource= new ol.source.Vector ({
  url: 'puntobjecten.json',
  format: new ol.format.GeoJSON()
});
var puntObjecten = new ol.layer.Vector ({
  source: puntObjectenSource,
  style: puntObjectenStyle
});

The documentation on the Openlayers website doesnt even talk about the contructors ol.style.Circle, ol.style.Fill or ol.style.Stroke?

I have the following style-up for a polygon: (I don't even know if all these settings can be applied!)

 weight: '1.04',
 fillColor: '#da2122',
 color: '#000000',
 dashArray: '',
 opacity: '1.0',
 fillOpacity: '1.0',

How to create the correct functions to format a polygon? And above all: how can I know?

5

You're not looking at the right place. OpenLayers 3 (latest version) API docs are at http://openlayers.org/en/v3.9.0/apidoc/. It is, by the way, an excellent documentation.

You will use text field (top-left) to search for everything available in the library.

A ol.geom.Polygon can't be styled. You will apply a style to the feature that holds polygon.

Look at ol.style.Style. There are 4 possibilities:

  • ol.style.Fill;
  • ol.style.Image;
  • ol.style.Stroke;
  • ol.style.Text;

So you can style a polygon like:

var style = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: '#b30734',
        width: 3
    }),
    fill: new ol.style.Fill({
        color: [51, 51, 51, .7]
    })
});

var feature = new ol.Feature(
    new ol.geom.Polygon([[[-2e6, -1e6], [-1e6, 1e6],
            [0, -1e6], [-2e6, -1e6]]])
);
feature.setStyle(style);

A demo.

4
  • Jonatas, you seem to answer exactly what I need to know. Now I am starting to understand how to read the documentation. You're awesome!!
    – PIDZB
    Oct 2 '15 at 14:52
  • Jonatas, you gave the hex value in stroke color and in rgba format format for fill color to add opacity. If I want to give the color in hex color code and opacity as well, then how do I do? color: '#ff0000',0.5 or color: ['#ff0000', 0.5] does not work.
    – LSG
    Dec 12 '17 at 15:14
  • @LSG go with color: [255, 0, 0, 0.5] Dec 13 '17 at 19:25
  • I can't put the number values. I have to put the hex code. Anyway, I got an answer from here stackoverflow.com/questions/28004153/…
    – LSG
    Dec 13 '17 at 23:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.