Responsive view

[Coroico]

Width is supposed to be in pixel (px).
May be a width in % could be interested to be able to adapt the view to the container (responsive).

Not sure that this is possible.

[MrMufflon]

This would only be possible of a resizing mechanism is implemented. Maybe the next weeks I find some time to do some more work..

[bouton]

As far I can can tell, this is the only thing that for me is keeping this from being perfect. Thanks and I look forward to the next version.

[DietmarHartje]

A workaround I use:
var el = L.control.elevation({
position: "bottomright",
theme: "mtb-theme",
width: jQuery('#track-profile').outerWidth(),
height: jQuery('#track-profile').outerHeight(),
...
Where #track-profile is the ID of the elevation-profile container width a percentage width and height.

[svenlewerentz]

@DietmarHartje Thank you, your solution worked for me!

[LeOSW42]

Hello,

I'm using the same trick, my #map can be resized (on fullscreen for example) and the Chart is not resized.
Is that possible to change chart width after creation or delete it and create it again ?

Léo

[euri10]

excuse me but would you mind pasting a working example, I don't see how to specify an id for the elevation-profile container
thanks a lot :)

[MrMufflon]

Hi,
@LeOSW42 dynamic resizing isn't supported yet.
@euri10 There is currently no way to define an ID for the container in the constructor options. What would you need that for? If you really need it you can just set the ID by hand on control.getContainer().

[euri10]

I think I would need that id to implement @DietmarHartje workaround using what he posted

width: jQuery('#track-profile').outerWidth(),
height: jQuery('#track-profile').outerHeight(),
...
Where #track-profile is the ID of the elevation-profile container width a percentage width and height.

or maybe I don't understand well the last line :)

[pokyah]

Hi All !

Same question as @euri10 , how to link an ID to the elevation profile so that the jquery trick could work ? @svenlewerentz , how did you managed to make it work ?

Thanks a lot

[pokyah]

OK ! I managed to get it (was actually quite easy)

For those who are still wondering :

The HTML structure :

`

elevation Graph

`

The CSS :

` #map {
height:80%;
}

#elCont{
height:20%;
width:80%;
}`

And for the Javascript, while you create your elevation control set its width property not with an hard coded value (600) but using jquery to set the width to the one of the elContainer :

`var elevationControl = L.control.elevation({
  position: "bottomleft",
  width: $('#elContainer').outerWidth(), //use this instead of 600
  height: 125,
  ...`

and next, to make it append under the map while you click on the UI dedicated to make it appear (here with the id attr = elevationControlUI) :

     ` $('#elevationControlUI').on("click", function() {
        var elGraph = elevationControl.getContainer(),
        a = document.getElementById('elCont'),
        setParent = function (element, newParent)
        {
            newParent.appendChild(element);
        };
      setParent(elGraph, a);`

II hope I made it clear !

[cempro]

Could someone provide a working page link (e.g. html) for this trick? So I could review the page source and check mine. Thanks.

[pokyah]

Hi @cempro ! I'll upload a working version on my github account so that you can check it.

I'll let you know when this is online.

[cempro]

Thank you.. Trying to adapt this trick to this site. http://opengis.csb.gov.tr:8080/tur/etap.html

[pokyah]

OK. I've found my old dirty code.

It's something I tried to make work more than 6 months ago while I was begining to play with JS and leaflet. I hope it will help you.

Available here

It's inspired from someone else's code. I'll try to look who was the initial developer

[LeOSW42]

Hi,

Here is an other example of what I have : http://leo.lstronic.com/piwigo/iFrameGPX/?dark=1&basemap=outdoor&gpxID=Rhule

Léo

[cempro]

Thanks to @pokyah he provided a working example at his repo.
For those who need it here is the link: https://github.com/pokyah/leafletResponsiveElevation

For another good example without a html div is provided by @LeOSW42. Thanks.
http://leo.lstronic.com/piwigo/iFrameGPX/?dark=1&basemap=outdoor&gpxID=Rhule

[cempro]

Hi,

At least I can now properly resize elevation chart width upon page load. (Thanks to @LeOSW42 and @pokyah)

However I cannot dynamically the resize chart as in the example given by @LeOSW42
http://leo.lstronic.com/piwigo/iFrameGPX/?dark=1&basemap=outdoor&gpxID=Rhule

Am I missing to include a js/jquery library or such? (I am using geojson instead of gpx.) Or maybe is there something wrong with my apache config? Could you have a look to the page..
http://opengis.csb.gov.tr:8080/tur/etap.html

Thanks for the effort.

[pokyah]

Hi @cempro.

Having a quick look at your code, I think that the problem comes from the SVG corresponding to the profile elevation. Have a look at this and let me know if it helps : http://thenewcode.com/744/Make-SVG-Responsive

If I have some spare time this weekend, I'll give your problem a deeper look.

Good luck !