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,...

1 Answer 1

5

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);
    }
});
4
  • 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, 2017 at 4:47
  • @nikhilvj You're right... If the property is numeric then it has to be converted to String. Oct 8, 2017 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, 2017 at 3:32
  • OLD version. Not need AJAX, please add modern L.geoJSON(data, {etc}) simple code. Mar 10 at 8:14

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.