NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum

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 ♦

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); 
}
permanent link

answered 01 May '20, 15:08

rodrigomartins's gravatar image

rodrigomartins
11111
accept rate: 0%

edited 01 May '20, 15:09

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

×122
×98
×18
×16

question asked: 30 Apr '20, 22:33

question was seen: 6,341 times

last updated: 04 May '20, 08:36

NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum