title: Contour line labels on leaflet map
body: <p>I have a <a href="http://leafletjs.com/" rel="nofollow noreferrer">Leaflet</a> map with a geoJSON containing contour lines. The elevation corresponding to each line is located in feature.properties.Elevation of the geoJSON. I want to achieve the following:</p>
  
  <p><a href="http://leafletjs.com/" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XosEE.jpg" alt="Contour lines map"></a></p>
  
  <p>What I've tried to achieve this in leaflet is to calculate the center of each polyline and then add a marker to that position containing the data from feature.properties.Elevation.</p>
  
  <pre><code>L.geoJson(contourJSON, {
    onEachFeature: function(feature, layer) {
      var label = L.marker(layer.getBounds().getCenter(), {
        icon: L.divIcon({
          className: 'label',
          html: feature.properties.Elevation,
          iconSize: [100, 40]
        })
      }).addTo(map);
    }
  });
  </code></pre>
  
  <p>Which kind of works, but does not have a nice styling and it's not really clear which value belongs to a specific line:</p>
  
  <p><a href="https://i.stack.imgur.com/XosEE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8rEYw.png" alt="Contour lines output"></a></p>
  
  <p>What would be a better method of adding the elevation labels in such a way that it is readable and maybe dynamic to the current zoom level? I'm using Leaflet 1.0.3 so maybe <a href="http://leafletjs.com/reference-1.0.3.html#tooltip" rel="nofollow noreferrer">Tooltip</a> could offer a solution? Thanks! </p>