CODEWITHSUNDEEP
javascriptleaflet
unknownid
unknownid

Reputation: 105

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

Upvotes: 0

Views: 637

Answers (1)

YaFred
YaFred

Reputation: 10008

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

Upvotes: 2

Related Questions