javascriptleafletjustgage

Close popup and then open another vs. opening popup while another one is open


I want to show a gauge inside my leaflet popups, with justGage library. It works fine when I open a popup, or when I close a popup and open another, but if having a popup open, I click on another marker, first popup closes as it should do, and second popup opens, but the gauges are not showing.

This is how I generate the popups:

var myLayer = new L.GeoJSON.AJAX("data/data.geojson", {
    onEachFeature: function(feature, layer) {        
        layer.bindPopup(function (layer) {            
            $('#myDiv').text();
      });
   }
});

myDiv is the content of the popup:

<script id="myDiv" type="text/template">
    <div>
        <div id='gauge1' style='width:60px; height:80px'></div>
    </div>
    <div>
        <div id='gauge2' style='width:60px; height:80px'></div>
    </div>
</script>

And I initialize the gauges when the popup opens (this is the only way I got them to work):

    myMarkers.on('popupopen', function(e) {        
        cargaVelocimetro("gauge1", 22);
        cargaVelocimetro("gauge2", 33);    
      }
    );

 function cargaVelocimetro(id, valor){

    if (!gauge) {
        var gauge = new JustGage({
          id: id,
          value: valor,
          min: 0,
          max: 100,
          gaugeWidthScale: 0.8 

      });
    }
  }

It's like the fact of not closing properly the first popup affects leaflet in some way?


Solution

  • As Baptiste said in the comment, the IDs are getting mixed up when opening a second popup if the first is still open.