Raruto/leaflet-elevation

[How to] hide track on map | 100% chart width | dynamically change gpx data

FranGhe opened this issue · 8 comments

FranGhe commented

Hi, I'm newer on leaflet-elevation and I have some trouble.

I have a map with my track already done with track and points that I use them to make actions and I show the same map from different point changing the data set dynamically.

I would like to add on bottom only the elevation graph, so I configured like this:

<head>
    ...
    <link type="text/css" rel="stylesheet" href="leaflet/Elevation_2.5.1/libs/fullpage.css" />
    <link type="text/css" rel="stylesheet" href="leaflet/Elevation_2.5.1/src/leaflet-elevation.min.css" />
    <script type="text/javascript" src="leaflet/Elevation_2.5.1/src/leaflet-elevation.min.js"></script>
    ...
</head>
var elevationOptions = {
    theme: "lightblue-theme",           // Default chart colors: theme lime-theme, magenta-theme, ...
    detached: false,                    // Chart container outside/inside map container
    elevationDiv: "#elevation-div",     // if (detached), the elevation chart container
    autohide: false,                    // if (!detached) autohide chart profile on chart mouseleave
    collapsed: false,                   // if (!detached) initial state of chart profile control
    position: "bottomright",            // if (!detached) control position on one of map corners
    closeBtn: true,                     // Toggle close icon visibility
    followMarker: true,                 // Autoupdate map center on chart mouseover.
    autofitBounds: true,                // Autoupdate map bounds on chart update.
    imperial: false,                    // Chart distance/elevation units.
    reverseCoords: false,               // [Lat, Long] vs [Long, Lat] points. (leaflet default: [Lat, Long])
    acceleration: false,                // Acceleration chart profile: true || "summary" || "disabled" || false
    slope: false,                       // Slope chart profile: true || "summary" || "disabled" || false
    speed: false,                       // Speed chart profile: true || "summary" || "disabled" || false
    altitude: true,                     // Altitude chart profile: true || "summary" || "disabled" || false
    time: false,                         // Display time info: true || "summary" || false
    distance: true,                     // Display distance info: true || "summary" || false
    summary: false,               // Summary track info style: "inline" || "multiline" || false
    downloadLink: false,               // Download link: "link" || false || "modal"
    ruler: false,                        // Toggle chart ruler filter
    legend: false,                       // Toggle chart legend filter
    almostOver: false,                   // Toggle "leaflet-almostover" integration
    distanceMarkers: false,             // Toggle "leaflet-distance-markers" integration
    edgeScale: false,                   // Toggle "leaflet-edgescale" integration
    hotline: false,                      // Toggle "leaflet-hotline" integration
    timestamps: false,                  // Display track datetimes: true || false
    waypoints: false,                    // Display track waypoints: true || "markers" || "dots" || false
    wptIcons: {                         // Toggle custom waypoint icons: true || { associative array of <sym> tags } || false
        '': L.divIcon({
          className: 'elevation-waypoint-marker',
          html: '<i class="elevation-waypoint-icon"></i>',
          iconSize: [30, 30],
          iconAnchor: [8, 30],
        }),
    },
    wptLabels: true,                    // Toggle waypoint labels: true || "markers" || "dots" || false
    preferCanvas: false,                 // Render chart profiles as Canvas or SVG Paths
};

if(!elevationViewer){
    // Instantiate elevation control.
        elevationViewer = L.control.elevation(elevationOptions).addTo(thisMap);
    // Load track from url (allowed data types: "*.geojson", "*.gpx", "*.tcx")
        elevationViewer.load("https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx");
}

I would like:

  1. don't have the track drawing by leaflet-elevation because my point and track have action inside
  2. to have the elevation graph on bottom with a width of 100% like this demo
  3. create a new L.control.elevation or change the exists with new gpx data when I show the map.

is it possible?

Raruto commented

Hi @FranGhe,

also search among the closed issues because it may have already been discussed before.

Below I will simply point out some significant portions of code:

  1. don't have the track drawing by leaflet-elevation because my point and track have action inside

It depends a lot on your "other" code, at worst: opacity: 0

leaflet-elevation/src/options.js

Lines 31 to 37 in bd9316b

polyline: {
className: 'elevation-polyline',
color: '#000',
opacity: 0.75,
weight: 5,
lineCap: 'round'
},

  1. to have the elevation graph on bottom with a width of 100% like this demo

You can calculate it yourself before creating the control:

leaflet-elevation/src/options.js

Line 75 in bd9316b

width: (screen.width * 0.6) || 600,

  1. create a new L.control.elevation or change the exists with new gpx data when I show the map.

leaflet-elevation/src/control.js

Lines 60 to 78 in bd9316b

/*
* Reset data and display
*/
clear() {
if (this._marker) this._marker.remove();
if (this._chart) this._clearChart();
if (this._layers) this._clearLayers(this._layers);
if (this._markers) this._clearLayers(this._markers);
if (this._circleMarkers) this._circleMarkers.remove();
if (this._hotline) this._hotline.eachLayer(l => l.options.renderer.remove()); // hotfix for: https://github.com/Raruto/leaflet-elevation/issues/233
if (this._hotline) this._clearLayers(this._hotline);
this._data = [];
this.track_info = {};
this._fireEvt("eledata_clear");
this._updateChart();
},

leaflet-elevation/src/control.js

Lines 29 to 44 in bd9316b

/*
* Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
*/
addData(d, layer) {
this.import(this.__D3)
.then(() => {
if (this._modulesLoaded) {
layer = layer ?? (d.on && d);
this._addData(d);
this._addLayer(layer);
this._fireEvt("eledata_added", { data: d, layer: layer, track_info: this.track_info });
} else {
this.once('modules_loaded', () => this.addData(d,layer));
}
});
},

or the usual:

leaflet-elevation/src/control.js

Lines 232 to 238 in bd9316b

/**
* Load elevation data (GPX, GeoJSON, KML or TCX).
*/
load(data) {
this._parseFromString(data).then( geojson => geojson ? this._loadLayer(geojson) : this._loadFile(data));
},

👋 Raruto

  • 🎉1
FranGhe commented

thanks for your support and your great work:

About my requests, I used this code:

var elevationViewer=null;
var elevationOptions=null;
var fileGpx=null;

if(!elevationViewer){    
  elevationOptions = {
    theme: "blue-theme",                // Default chart colors: theme lime-theme, magenta-theme, ...
    height: screen.height * 0.20,
    width: screen.width,
    margins: { top: 0, right: 0, bottom: 0, left: 0 },
    polyline: { opacity: 0 },
    trkStart: null,
    trkEnd: null, 
  };
  elevationViewer = L.control.elevation(elevationOptions).addTo(thisMap);
}

elevationViewer.clear();

// this is a rude example...

if(!fileGpx || fileGpx=="https://raruto.github.io/leaflet-elevation/examples/via-aurelia.gpx"){
  fileGpx = "https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx";
  elevationViewer.load(fileGpx);
} else {
  fileGpx = "https://raruto.github.io/leaflet-elevation/examples/via-aurelia.gpx";
  elevationViewer.load(fileGpx);
}

Now I would like to change color about the track... I tried to do this:

if(!fileGpx || fileGpx=="https://raruto.github.io/leaflet-elevation/examples/via-aurelia.gpx"){
  fileGpx = "https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx";
  elevationViewer.options.theme = "orange-theme";
  elevationViewer.load(fileGpx);
} else {
  fileGpx="https://raruto.github.io/leaflet-elevation/examples/via-aurelia.gpx";
  elevationViewer.options.theme = "violet-theme";
  elevationViewer.load(fileGpx);
}

First time the color is orange (changed from blue to orange) but any after time the color is alwais orange and not change to green.

Looking console.dir(elevationViewer.options.theme); the theme is changed but not the color on graph.

Sorry if I'm boring you

Raruto commented

@FranGhe probably the color is stored somewhere else (honestly, I don't remember..):

leaflet-elevation/src/control.js

Line 195 in bd9316b

if (opts.theme) opts.polylineSegments.className += ' ' + opts.theme;

Here too, at worst you can access/select the DOM element by yourself and assign it the color/class you prefer. For example, the following should be how it is handled using D3JS:

leaflet-elevation/src/components/d3.js

Lines 17 to 38 in bd9316b

export const Path = ({
name,
color,
strokeColor,
strokeOpacity,
fillOpacity,
className = ''
}) => {
let path = d3.create('svg:path')
if (name) path.classed(name + ' ' + className, true);
path.style("pointer-events", "none");
path
.attr("fill", color || '#3366CC')
.attr("stroke", strokeColor || '#000')
.attr("stroke-opacity", strokeOpacity || '1')
.attr("fill-opacity", fillOpacity || '0.8');
return path;
};

👋 Raruto

FranGhe commented

After many and many test... I deced to replace it... remove and create

if(elevationViewer && ...){
    thisMap.removeControl(elevationViewer);
    elevationViewer=null;
}

if(!elevationViewer){
  elevationViewer = L.control.elevation(elevationOptions).addTo(thisMap);
}

I hope this to be usefull to someone

Bye

FranGhe commented

One more question... I hope I'm not boring.

I have a short wide chart and I would like to have more numbers on x and y axes... I also accept a less font-size.

is it possible?

Raruto commented

I hope this to be usefull to someone

Issue searches are indexed more by their title than their content, that's the reasoning or having one question per issue..

I have a short wide chart and I would like to have more numbers on x and y axes... I also accept a less font-size.

Please search old issues first: #43 (comment) (or link what you've already found in your questions)

👋 Raruto

FranGhe commented

I have to edit your code... this works for me:

In leaflet-elevation.js I add

var Options = {
  ...
  min_xTicks: 8, // min of ticks that I want in x axes
  min_yTicks: 4, // min of ticks that I want in y axes
  ...
}

In altitude.js on scale I edit like this

scale: {
  axis    : "y",
  position: "left",
  scale   : "y", // this._chart._y,
  labelX  : -3,
  labelY  : -8,
  //ticks   : () => _.clamp(this._chart._yTicks() / 2, [4, +Infinity]),
  ticks   : () => _.clamp(this._chart._yTicks() / 2, [opts.min_yTicks, +Infinity]),
},

In distance.js I edit like this

scale: opts.distance && {
  axis    : "x",
  position: "bottom",
  scale   : "x", // this._chart._x,
  labelY  : 25,
  labelX  : () => this._width() + 6,
  ticks   : () => _.clamp(this._chart._xTicks() / 2, [opts.min_xTicks, +Infinity]),
},

I hope it will be helpful for someone

Raruto commented

Ok, I don't think it was necessary to modify the source, but if it works for you 🙆

Have a nice day,
Raruto