unknownid unknownid - 19 days ago 5
Javascript Question

labeling issue in leaflet

I am having an issue with labeling the center or just a polygon in general using leaflet 1.0 rc-3.

The code im using to add a polygon and associate the labeling is as such

.leaflet-label {
background:none;
left: -22px;
border:none;
background-clip:none;
}

.leaflet-label:before {
border-right: 0px solid black;
border-right-color: inherit;
left: -10px;


and the js

var lotss = L.geoJson(lots, {

style: function(feature) {
switch (feature.properties.SOLD) {
case 'Y': return {color: "#FF0000", weight:1};
}
switch (feature.properties.TYPE) {
case 'EASEMENT': return {color: "#FFFFFF", weight:1};
case 'LOT': return {color: "#00FF00", weight:1};
case 'ROAD': return {color: "#000000", weight:1};
}

}
}).addTo(map);

var label = new L.Label()
label.setContent("test")
label.setLatLng(lotss.getBounds().getCenter())
map.showLabel(label);


but it doesn't appear to be working and the only reference I can really see references the label code above. Am I doing this wrong? Its a series of parcel lots and I am trying to get it to label the number of the lot in the center.

Thanks for any tips

Answer

As @chrki commented, you are using a plugin (as L.Label is not in leaflet code)

If you are using https://github.com/Leaflet/Leaflet.label, you have to be aware that is deprecated for leaflet 1.0

With leaflet 1.0 you have to use a tooltip.

map.openTooltip("test", geojsonLayer.getBounds().getCenter());

Here is an example: https://yafred.github.io/ajax-geojson-and-labels/index4.html

If you don't like the look of a tooltip, you can explore a solution using a marker with a L.DivIcon

    L.marker(lotss.getBounds().getCenter(), {
        icon: new L.DivIcon({
            className: 'my-div-icon',
            html: '<h2>There are n lots here</h2>'
            })
    }).addTo(map);

enter image description here