Leaflet
Difference in label display between 0.7.* & 1.0 beta
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>
There seems to be a problem with the z-index.
Put
.leaflet-label { z-index: 400; }
Increase the number as needed.
