Comments (8)
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:
- 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
- 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
- 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
leaflet-elevation/src/control.js
Lines 29 to 44 in bd9316b
or the usual:
leaflet-elevation/src/control.js
Lines 232 to 238 in bd9316b
👋 Raruto
from leaflet-elevation.
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.
@FranGhe probably the color is stored somewhere else (honestly, I don't remember..):
leaflet-elevation/src/control.js
Line 195 in bd9316b
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
👋 Raruto
from leaflet-elevation.
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.
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.
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.
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.
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)
- Polyline layer turns black after turning off all legend filters (`legend: true` + `preferCanvas: false`) HOT 6
- Updating a track continuously (live tracking) HOT 3
- Unsopperted GeoJSON feature geometry type:Point HOT 1
- Download link HOT 1
- How to show Elevation in decimal? HOT 3
- Marker tooltip with negative elevation HOT 1
- Polyline layer turns black after turning off all legend filters on custom colors HOT 4
- Disable built-in lazy loader (dynamic imports) and load all dependencies statically HOT 8
- Leaflet elevation get track properties (Length, Elevation, time, etc) HOT 1
- Unable to Display Elevation Chart in Angular Project with leaflet-elevation HOT 6
- {{track_info}} not always correctly build HOT 5
- Angular and leaflet-elevation HOT 1
- Elevation profile for drawn line using Leaflet Drawn polyline HOT 2
- How to sort `L.gpxGroup` tracks in alphabetical order? HOT 8
- hotline and linearGradient HOT 2
- [How to] get a callback when file gpx is loaded? HOT 3
- ruler on leaflet-elevation_hoverable-tracks.html HOT 1
- Customize Tooltip/Popup css for `<wpt>` elements when displayed on map HOT 3
- Incorrect time shown in y-axis HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from leaflet-elevation.