Custom Start and End marker icons using the `"eledata_loaded"` event

[haldo98]

Thank you for your great work.

I'm a newbie in js so please forgive me if I'm writing something dumb

I have some issue with the gpxOptions inherited from leaflet-gpx

I added the options #18 of the marker from leaflet-gpx but the markers are not shown.

gpxOptions: {
marker_options: {
    startIconUrl: 'pin-icon-start.png',
    endIconUrl: 'pin-icon-end.png',
    shadowUrl: 'pin-shadow.png'
    },
},

Here is my working example:
https://www.tadini.it/temp/map.html

And..... does the event from leaflet-gpx is supported? (addpoint - loaded - error )

Thank You.

[Raruto]

In the latest versions of this library the lealfet-gpx dependency has been removed.

BTW, if you don't want to go crazy understanding too much third party code you can also do it directly adding two simple L.Markers (at the start and end of your path).

👋 Raruto

[haldo98]

Thank you.... is there a way to directly point to the start (and maybe also to the end) of the track with the plugin or should I have one or two waypoints ?
(start-end)

thank u

[Raruto]

I think there are several ways to achieve this, just FYI, here you can change the properties related to the current start and end icons (if I remember correctly, even if they are L.CircleMarkers with a little imagination, you could also use raster icons, in case please search for this on the web and let me know..)

leaflet-elevation/src/options.js

Lines 52 to 53 in 8681792

 trkStart: { className: 'start-marker', radius: 6, weight: 2, color: '#fff', fillColor: '#00d800', fillOpacity: 1, interactive: false }, 
 trkEnd: { className: 'end-marker', radius: 6, weight: 2, color: '#fff', fillColor: '#ff0606', fillOpacity: 1, interactive: false }, 

Otherwise here it is something old-fashioned:

controlElevation.on('eledata_loaded', (e) => {
  console.log(e, controlElevation._data); // <-- here you can do something much more clever.. 😃
);

controlElevation.load(url);

👋 Raruto