This is a static archive of our old OpenStreetMap Help Site. Please post any new questions and answers at community.osm.org.

Add label/description on position marker

0

Hi guys, how i can add a label/description on position marker? I wanna make something like put the marker with the city name.

Thanks!

asked 30 Apr '20, 22:33

rodrigomartins's gravatar image

rodrigomartins
11111
accept rate: 0%

edited 04 May '20, 08:35

scai's gravatar image

scai ♦
33.3k21309459

1

Which website or app are you talking about?

(01 May '20, 13:39) TZorn

OpenLayers according to the recent answer. I added the openlayers tag.

(04 May '20, 08:36) scai ♦

One Answer:

0

I solved with this code that give-me a point on "lat", "lng" with the "label". The "offsetY" controller the distance between the point and your label on Y axis.

const addMapPoint = (lat, lng, label, offsetY) => {
    iconStyle = [
        new ol.style.Style({
            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
                anchor: [.5, 1],
                anchorXUnits: 'fraction',
                anchorYUnits: 'fraction',
                src: "/static/images/pin.png",
                scale: 1
            }))
        }),
        new ol.style.Style({
            text: new ol.style.Text({
                text: label,
                offsetY: offsetY,
                scale: 2,
                fill: new ol.style.Fill({
                    color: '#black',
                })
            })
        })
    ];

    const vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857'))})]
        }),
        style: iconStyle
    });

    map.addLayer(vectorLayer); 
}

answered 01 May '20, 15:08

rodrigomartins's gravatar image

rodrigomartins
11111
accept rate: 0%

edited 01 May '20, 15:09

Source code available on GitHub .