Giter Site home page Giter Site logo

Comments (8)

Raruto avatar Raruto commented on August 15, 2024 1

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

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:

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.

/*
* 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();
},

/*
* 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:

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

👋 Raruto

from leaflet-elevation.

FranGhe avatar FranGhe commented on August 15, 2024

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

from leaflet-elevation.

Raruto avatar Raruto commented on August 15, 2024

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

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:

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

from leaflet-elevation.

FranGhe avatar FranGhe commented on August 15, 2024

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

from leaflet-elevation.

FranGhe avatar FranGhe commented on August 15, 2024

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?

from leaflet-elevation.

Raruto avatar Raruto commented on August 15, 2024

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

from leaflet-elevation.

FranGhe avatar FranGhe commented on August 15, 2024

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

from leaflet-elevation.

Raruto avatar Raruto commented on August 15, 2024

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

Have a nice day,
Raruto

from leaflet-elevation.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.