I'm trying to create a custom Polygon style for my layer style.

I receive some information about position, orientation and age for a number of objects and I want to represent those as zoom independent (like using Icons or RegularShapes) isosceles triangles, pointing at an angle and color-coded according to age.

I have a good idea of the color-coding and rotation part, but I'm stumped at creating an isosceles triangle using the style objects provided by OpenLayers.

This is what I have so far:

style = [new ol.style.Style({
    geometry: function(feature) {
        return new ol.geom.Polygon([[
            [0, 0],
            [2, 0],
            [1, 3]
    fill: new ol.style.Fill({color: '#000'}) //black right now
  • Maybe this will help, although it handles circles instead of polygons: gis.stackexchange.com/questions/58570/… Commented Nov 25, 2015 at 15:56
  • The problem is exactly that OpenLayers only provides Circle, Icon and RegularShape as "point" styles. I need to define a custom shape that doesn't fit into any of these types.
    – Thiatt
    Commented Nov 25, 2015 at 16:44

1 Answer 1


this will create a triangle

new ol.style.Style({
image: new ol.style.RegularShape({
  fill: new ol.style.Fill({
  color: 'red'
  stroke: new ol.style.Stroke({
  color: 'black', 
  width: 2
  points: 3,
  radius: 10,
  rotation: Math.PI / 4,
  angle: 0

for more symbols check this example regular shapes example

you can always use extrenal images to style your points as an alternative. something like this should work if this is your case

var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    opacity: 0.75,
    src: 'data/icon.png'
  • RegularShape only allows for regular polygons/stars (each side the same size), I need an isosceles triangle. The second approach is what I have right now, but I need to change it because I need to represent my features with arbitrary colors, and this is infeasible using image Icons.
    – Thiatt
    Commented Nov 26, 2015 at 0:11
  • isosceles triangle is a regural shape. isnt it? No matter the title the sample I provide is an isosceles triangle. Did you try it?
    – pavlos
    Commented Nov 26, 2015 at 8:22
  • As you can see in the example you provided (which has similar code to what you posted), thar code generates an equilateral triangle.
    – Thiatt
    Commented Nov 26, 2015 at 12:06
  • equilateral triangle is isosceled as well in terms of geometry. So now its clear, you strictly want to produce isosceled triagles and not equilateral. As far as I know ol3 doesnt provide a direct way to do your job. The code snip you allready use, seems to me the only way. What is wrong with it?
    – pavlos
    Commented Nov 26, 2015 at 12:35
  • You're right, I'm sorry for my geometrical imprecision ;) The problem with the snippet I posted is that Geometries (in Styles at least) represent actual physical coordinates, so a polygon style will represent an actual physical area instead a point.
    – Thiatt
    Commented Nov 26, 2015 at 14:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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