Adding a value to L.imageOverlay

Question

I'm trying to add a value to an L.imageOverlay in leaflet. When you add the layer on the layer control panel, it adds the value using the function below to the total, I've tried it with an attribution, but this doesn't seem to work either. Is it possible to add data to the L.imageOverlay?

var EXVOORh01 = L.imageOverlay("EXVOORh.png", bounds, value="400000", onchange=totalIt());

  function totalIt() {
    var input = document.getElementsByClassName("leaflet-control-layers-selector");
    var total = 0;
    for (var i = 0; i < input.length; i++) {
      if (input[i].checked) {
        total += parseFloat(input[i].value);
      }
    }
    document.getElementsByName("total").value = "A" + total.toFixed(1);
  }

Answer 1

You cannot assign HTML attributes to L.imageOverlay object like you are try to do, but you can 'misuse' layer object for attaching value to layer. Since layer is standard JS object, you can assign any property to it and use it later.

In your case this could look something like this:

var EXVOORh01 = L.imageOverlay("EXVOORh.png", bounds);
EXVOORh01.myValue = 40000;

Name of the property can be anyting, as long is it's not in conflict with standard propterties.