Difference in label display between 0.7.* & 1.0 beta #141

DaveF63 · 2015-12-19T00:07:09Z

Hi
I'm still learning the ropes of Javascript/Leafle/Label, so I'm unsure if this is problem or I'm doing something wrong. I'm loading a GeoJson file (available from here if you wish to run the code: https://github.com/martinjc/UK-GeoJSON/blob/master/json/electoral/eng/wards_by_lad/E06000022.json (Sorry, github wouldn't let me upload it as a zip)

<!DOCTYPE html>
<html>
  <head>
    <title>Wards Label</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
    <!-- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" /> -->
    <!-- <link rel="stylesheet" href="1_0/leaflet.label.css"/> -->
    <link rel="stylesheet" href="http://leaflet.github.io/Leaflet.label/leaflet.label.css" />    
        <style>
            body {padding: 0;margin: 0}
            html, body, #map {height: 100%;width: 100%}
        </style>        
  </head>
  <body>
    <div id="map"></div>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <!-- <script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script> -->
    <!-- <script src="1_0/leaflet.label-src.js"></script> -->
    <script src="http://leaflet.github.io/Leaflet.label/leaflet.label.js"></script>

    <script src="BANESWards2.geojson"></script> 

    <script>
      var osmMap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
      var map = L.map('map', {layers: [osmMap]});
      map.setView([51.35,-2.47], 12);

      function onEachFeatureBath(feature, layer) {
        WardName = feature.properties.WD13NM
        layer.bindLabel(feature.properties.WD13NM)
      }

      L.geoJson(BANESWards2, {
        onEachFeature: onEachFeatureBath
      }).addTo(map);
    </script>
  </body>
</html>

The leaflet label css/js files I downloaded were from here: https://github.com/Leaflet/Leaflet.label/tree/leaflet-master/dist. Are these the correct ones for running 1.0?

Using 0.7.* references, labels appear like this:

Using 1.0.* references, labels appear like this:

The problem appears to be in the css file, but beyond that, I'm lost. Any ideas?

To help me understand more, could it be explained why in this example https://github.com/Leaflet/Leaflet.label/blob/leaflet-master/example/label.html there's a long list Label .js files instead of a ref to Leaflet.Label.js?

Thanks
Dave F>

zavan · 2016-01-06T15:37:30Z

There seems to be a problem with the z-index.

Put

.leaflet-label { z-index: 400; }

Increase the number as needed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Difference in label display between 0.7.* & 1.0 beta #141

Difference in label display between 0.7.* & 1.0 beta #141

DaveF63 commented Dec 19, 2015

zavan commented Jan 6, 2016

Difference in label display between 0.7.* & 1.0 beta #141

Difference in label display between 0.7.* & 1.0 beta #141

Comments

DaveF63 commented Dec 19, 2015

zavan commented Jan 6, 2016