title: LeafletJS L.DivIcon HTML marker text - scale relative to map zoom
body: <p>So I'm using the latest version of leaflet (v1.0.2), and am trying to dynamically apply text labels to specific lat lng points on a custom (geo aligned) map.</p>
  
  <p>My issue is that I need the text on the map to maintain it's the size (as though the text is actually part of the tile image) when zooming. Using a Marker of any kind results in the text staying at its correct size. If I use something like an image overlay and add an SVG with text in, it scales with the map zoom. </p>
  
  <p>I've noticed that the image overlay has a CSS3 scale added to its transform property when zooming whereas the marker does not. </p>
  
  <p>Can I extend the marker to scale as the image overlay does?</p>
  
  <p>I've already written code that listens to the zoom event and adjusts the font size of markers but this is CPU intensive (especially for mobile browsers) and I don't really want to render the text dynamically within svgs either!</p>
  
  <p>I've provided a demo so that this makes more sense. You can see that <strong>example_1</strong> (the marker) maintains it's size however far you zoom in or out. <strong>Example_2</strong> (the svg image) scales relative to the map when zooming. This (Example_2) is what I'm trying to get an L.DivIcon with html text content to do!</p>
  
  <p>Any help or suggestions are appreciated!</p>
  
  <p><a href="https://jsfiddle.net/z96L7hdu/" rel="nofollow noreferrer">https://jsfiddle.net/z96L7hdu/</a></p>
  
  <p><strong>Example Code</strong></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="map" style="width:500px; height:600px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>var map = L.map('map', {
    zoomSnap: 0
  }).setView([0, 0], 3);
  
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
  }).addTo(map);
  
  var img = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICAgICB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgNTAwIDQwIj4gIDx0ZXh0IHg9IjAiIHk9IjAiIGZvbnQtZmFtaWx5PSJWZXJkYW5hIiBmb250LXNpemU9IjM1Ij4gICAgRXhhbXBsZV8yICA8L3RleHQ+PC9zdmc+";
  
  imageBounds = [[-8.636810901898114, -12.135975261193327], [-18.28136415046407, 17.181122017133486]];
  L.imageOverlay(img, imageBounds).addTo(map);
  
  var myIcon = L.divIcon({className: 'my-div-icon', html:"Example_1"});
  L.marker({lat: 0.7800052024755708, lng: 0.010986328125}, {icon: myIcon}).addTo(map);
  </code></pre>