I want to add a text to the map that not scaled when zoom change and remain with it's original sizes.

I use this code (javascript):

var text = new L.marker(rect.getBounds().getSouthWest(), {opacity: 0.0001});
text.bindLabel("TEXT", styleProperties);
text.addTo(myLayer);

and obtain this unwanted result:

I want that the text remain with the sizes of the first image at left when zoom are applied. Is it possible?

edit: the text must be like a name of the city, that moves with map but not change it's size when zoom (yes, I know that name of cities are images, for that not is easy solve my problem). Thanks however for answers, for now I maintain the labes, not is an elegant solution but works.

I want to add a text to the map that not scaled when zoom change and remain with it's original sizes.

I use this code (javascript):

var text = new L.marker(rect.getBounds().getSouthWest(), {opacity: 0.0001});
text.bindLabel("TEXT", styleProperties);
text.addTo(myLayer);

and obtain this unwanted result:

I want that the text remain with the sizes of the first image at left when zoom are applied. Is it possible?

edit: the text must be like a name of the city, that moves with map but not change it's size when zoom (yes, I know that name of cities are images, for that not is easy solve my problem). Thanks however for answers, for now I maintain the labes, not is an elegant solution but works.

• javascript
• leaflet

4 Answers 4

It looks to me your text is not really related to your map. What about adding the text in another div over the container of the map ?

  <div>
    <div id="map" style="width: 600px; height: 400px"></div>
    <div style="pointer-events: none; position: absolute; top: 100px; left: 100px">foo bar</div>
  </div>

See full example here

You could use Leaflet.label plugin (starting with Leaflet 1.0, L.Label is added to Leaflet core as L.Tooltip). You can style it with your own css. See the example.

As far as I understand, you want dynamic font size according to the zoom level. Just the opposite you mentioned.

You can change the font size according to the zoom level. For Leaflet.Label plugin you can add an event handler for zoomend and play with the font-size of the label and other styles of the label.

I have another example without Leaflet.Label, which adds a text element next to the path object. So the text is embedded in the svg and I change the font size according to the zoom level. Though I couldn't find a better function.

https://embed.plnkr.co/hU6ip8T58tvE7CHJwniR/

Use a marker with a L.DivIcon.