Elevation chart not responsive on detachedview=false

[serako]

Hi,
I use your plugins in detachedview=false, but when the weight screen is small, the elevation is not reduce on width.

I do this in line 73

if ( !opts.detachedView && opts.responsiveView) {
  var respWidth = map._container.clientWidth;
  opts.width = opts.width - 20 > respWidth ? respWidth - 20 : opts.width;
}

But it's not very nice because if you rotate your phone, the elevation graph don't adjust on the new width.

[Raruto]

Unfortunately, even in the original library, a shared solution had not yet been reached... (see here for more details)

your idea might work, but we should also have to change this function so that the control size will updated correctly (even when the control is "within" the map).

    this._map.on('resize', function(e) {
      var mapDiv = this._map.getContainer();
      var eleDiv = document.querySelector(this.options.elevationDiv); //eg. #elevation-div

      var newWidth = eleDiv.offsetWidth;

      if (newWidth <= 0) return;

      this.options.width = newWidth;

      eleDiv.innerHTML = ""; // analogous to: map.removeControl(elevationControl);

      var container = this.onAdd(this._map);
      container.classList.add("leaflet-control");

      if (this.options.detachedView) {
        eleDiv.appendChild(container); // analogous to: elevationControl.addTo(map); 
      } else {
        // if (this.options.detachedView == false)
        this.addTo(this._map); // FIXME: the control is always appended to the map!
      }
    }, this);

[serako]

I do :
line 74:

  if ( !opts.detachedView && opts.responsiveView) {
      opts._maxWidth = opts._maxWidth > opts.width ? opts._maxWidth : opts.width
      var containerWidth = map._container.clientWidth;
      opts.width = opts._maxWidth > containerWidth ? containerWidth - 30 : opts.width;
    }

and after on new line 193

    this._map.on('resize', function(e) {
      if ( !this.options.detachedView && this.options.responsiveView) {

        var eleDiv = this._container
        map.removeControl(this._container);

        var container = this.onAdd(this._map);
        eleDiv.classList.add("leaflet-control");

        eleDiv.appendChild(this._container);
        this.addTo(this._map);

      }

      this._resetView;

    }, this);

It s nice for responsive, but i think i dont remove the good container because after change my width screen i loop on a fantom object.
or this is not good : eleDiv.appendChild(this._container);

[Raruto]

I think the control logic must be separated if we are using the default "leaflet-container" or a generic "html-container" (eg. #elevation-div)

this._map.on('resize', function(e) {

    if (this.options.responsiveView) {

        if ( this.options.detachedView) {
          ...
            eleDiv.innerHTML = "";
            eleDiv.appendChild(container);
          ...
        } else {
          ...
            this._map.removeControl(this._container); // NB. "this._map" not just "map"
            this.addTo(this._map); // in my old tests this was a problematic part...
          ...
        }

    }

}

[serako]

same problem : i loop.
first resize i loop x2, second resize i loop x4 ...

this.addTo(this._map); // in my old tests this was a problematic part...

Perhaps function addTo() create a new instance?
i try lot of test but i'm not a confirmed javascript programmer!

[Raruto]

Take a look at the changes just made in the develop branch and let me know...

[serako]

on line 66, separate logic like you prefer:

if (opts.responsiveView) {
      
  if (opts.detachedView) {
        
    var offsetWi = document.querySelector(opts.elevationDiv).offsetWidth;
    var offsetHe = document.querySelector(opts.elevationDiv).offsetHeight;
    opts.width = offsetWi > 0 ? offsetWi : opts.width;
    opts.height = (offsetHe - 20) > 0 ? offsetHe - 20 : opts.height - 20;
        
  } else {
        
    opts._maxWidth = opts._maxWidth > opts.width ? opts._maxWidth : opts.width
    var containerWidth = map._container.clientWidth;
    opts.width = opts._maxWidth > containerWidth ? containerWidth - 30 : opts.width;
        
  }
}

and in function addData() in new line 866

this._attachMapListeners();

This because i use directely L.GPX for add my polyline, and after el.addData( x.line);
I use that because on my map i have lot of gpx, and i can switch the elevation curve if i select a gpx.

Now, it's work fine. but i don't test with opts.detachedView = true and addGPXFile and addGeoJSONFile

thank you for your help!

[Raruto]

addGPXFile: function(url) {
  ...
    this._attachMapListeners(); // handle chart resizes
  ...
}

maybe that wasn't the right place...
I moved / renamed the _attachMapListeners function into the _resizeChart (is that okay with you?)

[serako]

I try, it's OK.
I don't try with addGPXFile, just with addData.