4

I have been searching for a simple way to create an icon to add to my OpenLayers implementation.

Currently I have an implementation I found in the documentation which utilizes a png file, but I was wondering if it isn't possible to style a regular circle and give it a color of my own desire?

I my current implementation I have is:

//setting location of marker
var location = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([longitude, latitude]))
});

//styling marker
location.setStyle(new ol.style.Style({
    image: new ol.style.Icon({
        color: '##4271AE',
        crossOrigin: 'anonymous',
        src: 'https://openlayers.org/en/v4.2.0/examples/data/dot.png'
    })
});

I am having a lot of markers close to each other and by using the code above my markers appear as follows:

map example

I guess I could just scale them using

new ol.style.Icon({
    color: '#4271AE',
    crossOrigin: 'anonymous',
    src: 'https://openlayers.org/en/v4.2.0/examples/data/dot.png',
    scale: 0.25
})

But basically what my problem is, is the outline (stroke) on the circle. I guess I could style my own white circle, in a regular drawing program and use that, but I find that quite cumbersome considering I am just wanting to create a colored circle. I would assume this was implemented in OpenLayers, but I can't find any documentation supporting this.

2

I managed to piece together a lot of code I found different places which resolved in a fix for my problem.

I have a js function called setStyle in which I added the Icon from my question.

I changed the function by styling and adding a "circle":

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

var circle = new ol.style.Circle({
    radius: 1,
    fill: fill
});

location.setStyle(new ol.style.Style({
    image: circle
}));

I didn't need a stroke for my circle, but if you do you can add that by using:

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

var circle = new ol.style.Circle({
    radius: 1,
    fill: fill,
    stroke: stroke
});

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.