0

I am setting on map some points which I have in an array coords

    var iconFeatures=[];
        coords.forEach((elem, ind, arr) => {
            coord = elem.split(',')   

            var iconFeature = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([parseFloat(coord[0]), parseFloat(coord[1])], 'EPSG:4326',     
                'EPSG:3857')),
                name: 'Point' + (ind + 1),
            })
            iconFeatures.push(iconFeature);

        });

        var vectorSource = new ol.source.Vector({
            features: iconFeatures 
        });

        var iconStyle = new ol.style.Style({
            image:  new ol.style.Circle({
                radius: 6,
                stroke: new ol.style.Stroke({
                    color: '#fff'
                }),
                fill: new ol.style.Fill({
                    color: '#3399CC'
                })
            }),

        });

        vectorLayer = new ol.layer.Vector({
            source: vectorSource,
            style: iconStyle
        });

        map.addLayer(vectorLayer);

I would like to add the Text next to each point, which would be the name of iconFeature (Point 1, Point 2, ...).

I am not sure where to set this to get info on the map.

Thank you for help in advance.

1 Answer 1

4

You could base it on the labels in this example https://openlayers.org/en/v4.6.5/examples/vector-label-decluttering.html so you would have something like

   var iconStyle = new ol.style.Style({
        image:  new ol.style.Circle({
            radius: 6,
            stroke: new ol.style.Stroke({
                color: '#fff'
            }),
            fill: new ol.style.Fill({
                color: '#3399CC'
            })
        })
    });
    var labelStyle = new ol.style.Style({
        text: new ol.style.Text({
            font: '12px Calibri,sans-serif',
            overflow: true,
            fill: new ol.style.Fill({
                color: '#000'
            }),
            stroke: new ol.style.Stroke({
                color: '#fff',
                width: 3
            })
        })
    });
    var style = [iconStyle, labelStyle];

    vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: function(feature) {
          labelStyle.getText().setText(feature.get('name'));
          return style;
        }
    });

You might also need to set textAlign, offsetX and offsetY options from https://openlayers.org/en/v4.6.5/apidoc/ol.style.Text.html

0

Your Answer

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

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