0

I want to use tooltip on my polyline to show its features and I use this code:

var boroughs = L.geoJson(null, {
  style: function (feature) {
    return {
      color: "black",
      fill: false,
      opacity: 1,
    };
  },
  onEachFeature: function(feature, layer) {
    layer.bindTooltip(feature.properties.KECAMATAN, {
      sticky: true
    });
    boroughSearch.push({
        name: layer.feature.properties.KECAMATAN,
        source: "Boroughs",
        id: layer.feature.properties.KODEKEC,
        bounds: layer.getBounds()
      });
    }
});
$.getJSON("data/kec.geojson", function (data) {
  boroughs.addData(data);
});

and I got a message in the console that said:

TypeError: layer.bindTooltip is not a function

I don't know what's wrong with it, and I followed step by leaflet docs.

  • 2
    What version of Leaflet are you using? – IvanSanchez Apr 27 '18 at 12:43
1

It might be because you are initiating an empty geojson layer. The following code is from this Example for creating an Ajax geojson layer:

  $.getJSON("./cupcakes/cupcakes.json",
       function(data) { 
         var geojson = L.geoJson(data,
            { 
                onEachFeature: function (feature, layer) {           
                   layer.bindPopup(feature.properties.name);
                }
 });
1

According to the latest Leaflet documentation (1.3.4) you would bind the Tooltip after you have constructed the L.geoJson object:

L.geoJSON(data, {
  [...]
}).bindTooltip(function (layer) { 
  return layer.feature.properties.KECAMATAN 
});

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.