unknownid unknownid - 1 year ago 118
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 {
left: -22px;

.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};


var label = new L.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 Source

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>'

enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download