-1

I am showing different layers to show points on a map, see https://www.corobori.com/sos/TestMap3.html.

My customer would like to see a more traditional marker.

Below is my code showing the blue circle

var layer1 = new ol.layer.Vector
        (
        {
            source: new ol.source.Vector(
                {
                    features: [new ol.Feature(
                        {
                            geometry: new ol.geom.Point(ol.proj.fromLonLat([-71.4155802, -36.9046117]))
                        }
                    )]
                })
        }
        );

What should I change to use an external png file instead of the circle ?

Corobori
  • 303
  • 3
  • 13

1 Answers1

1

You can add the style option inside the ol.layer.Vector like this:

let vector = new ol.vector.Layer({
        source: source,
        features: youFeatures,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 0, 0, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: '#343434',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 4,
                fill: new ol.style.Fill({
                    color: 'rgba(28,255,43,0.82)'
                })
            })
        })
    });

so you can specify the stroke and the fill of the features that you will draw and in the image option you can specify the style of the points.

You can also use a custom icon an change the image option like in this example

image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                opacity: 0.95,
                src: 'data/icon.png'
              }))
SMattia
  • 51
  • 1
  • 1
  • 6
  • I am trying the 2nd way as in the sample. but at style: new ol.Style({image: new ol.Style.Icon(/** @type {module:ol/style/Icon~Options} */({ I am getting TestMap3.html:123 Uncaught TypeError: Cannot read property 'Icon' of undefined The sample is here: https://www.corobori.com/sos/TestMap3.html – Corobori May 24 '19 at 13:25
  • I keep fighting on this. changed to style: new ol.style({image: new ol.style.Icon(({ and I am getting TestMap3.html:122 Uncaught TypeError: ol.style is not a constructor – Corobori May 24 '19 at 14:09
  • Sorry, I just changed `ol.Style` in `ol.style.Style`. And for the Icon, as in the note you should use `ol.style.Icon` – SMattia May 24 '19 at 19:16
  • Updated, now the error doesn't come up but I am still seeing the point and I don't see the style being applied. – Corobori May 24 '19 at 19:32
  • if you are using the Icon have you changed the src path with the path of your logo? – SMattia May 24 '19 at 21:11
  • I tried both src: '/map-marker3.png' or src: 'map-marker3.png' but none seems to work. – Corobori May 25 '19 at 00:06
  • ok at the beginning of the code do: `import logoImage from 'yourPath' ` and then put logoImage in the src option. I have tried and in this way it works – SMattia May 25 '19 at 07:15
  • Got it working ! The issue was how I applied the style to the feature. var layer1 = new ol.layer.Vector ({ source: new ol.source.Vector({ features: [new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([-71.4155802, -36.9046117]))} )] }),style:pStyle }); map.addLayer(layer1); – Corobori May 27 '19 at 16:24
  • I uploaded a fiddle if it can help somebody interested about that: https://jsfiddle.net/Corobori/zs9kvd1e/ – Corobori May 27 '19 at 18:37