can I have fixed text in leaflet?

Question

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.

Answer 1

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.

Answer 2

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