Custom Icons

[elevation ...] uses the Leaflet plugin https://github.com/Raruto/leaflet-elevation. Raruto has not included a configuration option for this. But you can include in your custom css a modified code from https://unpkg.com/@raruto/[email protected]/dist/leaflet-elevation.css:

.elevation-waypoint-icon:before {
  background: url(../images/elevation-pushpin.svg) no-repeat center center / contain;
  content: "";
  width: 100%;
  height: 100%;
  display: inline-block;
}

I tested it and it works, for example:

.elevation-waypoint-icon:before {
  background: url(https://unpkg.com/[email protected]/dist/images/marker-icon.png) no-repeat center center / contain;
}

Thanks, that I actually saw. So, one can only set one kind of icon that applies to all waypoints, right? Means, I cannot define an icon per waypoint.

I just remembered, I had a problem with wptIcons some time ago. Whose options can be found in the gpx.js file. Its new version will be in the next release of my plugin. I will have a look at it.

I’ll put it on the wish list. Some things should be possible.
https://github.com/mpetazzoni/leaflet-gpx#about-marker-icons
and following.

Hey,
I did some digging in the code and found out, custom icons are already possible. If you want, feel free to add it to the documented features.

In the gpx file add the <sym> tag to your waypoint, e.g.

<wpt lat="x" lon="y">
  <ele>0</ele>
  <name>Name</name>
  <sym>symClass</sym>
  </wpt>

In the CSS file add symclass as follows:

.elevation-waypoint-icon.symclass:before {
	background: url(xxxxxxxxxxxxx) no-repeat 50%/contain;
}

et voila ??

You can find the corresponding code here

Now, the question is, can I add custom CSS somewhere so it does not get overridden when the plugin is updated?

• This reply was modified 3 years, 6 months ago by akoelsch.

Thank you for your code.

Now, the question is, can I add custom CSS somewhere so it does not get overridden when the plugin is updated?

I would use a child theme.

You can also use inline css:
https://leafext.de/en/doku/elevation/waypoints/

Just detected: https://github.com/Raruto/leaflet-elevation/issues/120#issuecomment-916958969

// Display track waypoints: (true || false)
waypoints: false,

??

I would use a child theme.

Well, very obvious solution. I was so focussed on the plugin that I totally forgot ??

For inline CSS, you mean to add it to every single page?

How would it help to disable the waypoints completely?

For inline CSS, you mean to add it to every single page?

Yes.

How would it help to disable the waypoints completely?

Leap of thought from me, sorry. It has nothing to do with your question.
I created the above-mentioned website, while I got the idea to disable waypoints at all. And I detected this new function of the Leaflet plugin. Maybe someone will want it. I will install it in the next release.

• This reply was modified 3 years, 6 months ago by hupe13.

Cool. Nice documentation by the way ??

The only thing that appears to be hard-coded to 30px is the iconSize. If I change it in the js it will be lost with the next update, right?

Oups, wrong thread

• This reply was modified 3 years, 6 months ago by akoelsch.

Raruto has implemented new options in Leaflet-Elevation. These are available in version 2.2.5 now.

Cool. 1 and “defined” is the same for me, though

No, it is not the same. It also took me a while before I understood it.
It is very difficult to write a good and easy to understand documentation. And on leaflet.de not everything was configured yet.
If wptIcons is 1, then the Icons from Leaflet-elevation are used. If is “defined” you have to write some css and must configure some Javascript for the Icons, e.g. iconSize, iconAnchor, popupAnchor on the admin page: /wp-admin/admin.php?page=extensions-leaflet-map&tab=elevationwaypoints
So like here, there is now still missing the Javascript.