2

I'm having difficulty getting labels to appear in polygons using Leaflet's .bindTooltip(). Do I have to use L.Polygon() to make it work? I've tried a few online examples to no avail

Here's the code I'm presently trying:

var parcels = new L.GeoJSON.AJAX("data/parcels.geojson", {
    style: function (feature) {
        return {
            color: "red",
            weight: 2,
            fill: false,
            opacity: 1,
            clickable: false
        };
    }
});
parcels.bindTooltip(function (layer) {
    return string(layer.feature.properties.BCT);
});

and later:

map = L.map("map", {
    zoom: 13,
    center: [41.74737922562798, -70.0688695],
    layers: [watercolor, brewster, parcels, points, highlight],
    zoomControl: false,
    attributionControl: false
});

geojson:

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name":     "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [
{ "type": "Feature", "properties": { "gid": 244, "PID": "24-90",     "BCT": "BCT167", "OWNER_TYPE": "A", "LOCNO": 0.000000, "LOCEXT": null, "STREET": "Abbey Road" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -70.122083808134178, 41.741357529630378 ], [ -70.121829265447474, 41.74058589548401 ], [ -70.121802814040251, 41.740505709250201 ], [ -70.121800033448579, 41.740492712460984 ], [ -70.121800054122147, 41.740479550571351 ], [ -70.121802876026265, 41.740466559455449 ], [ -70.121808424682214, 41.740454070484319 ], [ -70.121816560938697, 41.740442403440611 ], [ -70.12182707515619, 41.740431857443312 ], [ -70.121839698257986, 41.740422700276177 ], [ -70.121854108980713, 41.74041516667446 ], [ -70.121869938857245, 41.74040945028117 ], [ -70.121984916556499,...
4

With Leaflet 1.0+, try with:

var parcels = new L.GeoJSON.AJAX("data/parcels.geojson", {
    style: function (feature) {
        return {
            color: "red",
            weight: 2,
            fill: false,
            opacity: 1,
            clickable: false
        };
    },
    onEachFeature: function (feature, layer) {
        layer.bindTooltip(feature.properties.BCT);
    }
});
  • I was getting an error Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'., appending .toString() to feature.properties.param solved it. Maybe because my property was numeric and was present in the data sans quotes. – Nikhil VJ Oct 8 '17 at 4:47
  • @nikhilvj You're right... If the property is numeric then it has to be converted to String. – Antonio Falciano Oct 8 '17 at 17:30
  • I don't remember needing the .toString() in earlier leaflet, seems to be a new thing. Worth filing a bug? – Nikhil VJ Oct 9 '17 at 3:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.