Put a Label inside a Marker

Ask the community
1

Hi, I’m trying to put a label inside a Marker but it seems not working. So I want to know please if it’s possible to do that or i have juste o load many images peer case ?

I’m tried many times to use Marker.setLabel() but it does not work…

Any help will be appreciated.

Best regards.

2

Update. Marker labels are supported now. Set label on the marker and position it with labelOrigin on the icon. See Marker labels and the Marker Label sample. The pre-built image workaround below is no longer needed.

Hello @Hamza, thanks for joining the Woosmap Community.

Are you using Woosmap Map JS API?
If this is the case, I’m sorry but labels on Markers are not supported yet.

You’ll need to pre-build the marker images with your label like this icons: 1 2 3

marker = new woosmap.map.Marker({
  position: {lat:30.064742, lng:31.249509},
  icon: {
    url: 'https://images.woosmap.com/1.png',
    scaledSize: {
      height: 27,
      width: 27
    }
  }
});

Here is the woosmap.map.Marker reference class with currently available Methods and MarkersOptions.

Thanks for your feedback.
Please let me know if you require further information.

1 Like
3

Hello @gael, thanks for your response and your help :slight_smile:

We are using Woosmap Map JS API, so it will not be possible to associate a label to a Marker.

So we will use a CDN to store all images which are numbered and use them inside the Marquer as an icon url…

Thank you again.

Have a nice day.

Hamza

4

Hello @Hamza,
9 months later, we finally released the Marker Labels feature :wink:

const iconMarker = {
    labelOrigin: new window.woosmap.map.Point(12, 12),
    url: "https://images.woosmap.com/marker-red.png"
};
const marker = new window.woosmap.map.Marker({
    position: myMap.getCenter(),
    icon: iconMarker,
    label: {
        text: "1",
        color: "white"
    },
    map: myMap
});

The following example displays labeled markers when you click on the map:

Developers documentation guides and reference are updated with this latest feature.

Best regards.

1 Like