Support » Plugin: Extensions for Leaflet Map » Custom Icons

  • First of all, thanks for this plugin and the effort you put into support. It really adds some value to the original leaflet maps.
    I was wondering whether it is possible to use custom icons for waypoint markers or they are hard-coded.

    I know one can create markers with custom icons with the shortcode
    [leaflet-marker lat=x lng=y iconUrl=””]name[/leaflet-marker]
    But this way the markers are not added to the height profile of the map.

    On the other hand, if I add the wpt markers to the gpx file and load them using [elevation gpx], I could not find a way to define an icon.

    What I would like is the combination of both, i.e. wpt markers that appear both in the map and the elevation profile and that have configurable items. Is this possible?

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author hupe13

    (@hupe13)

    [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/leaflet-elevation@1.7.0/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/leaflet@1.7.1/dist/images/marker-icon.png) no-repeat center center / contain;
    }
    Thread Starter akoelsch

    (@akoelsch)

    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.

    Plugin Author hupe13

    (@hupe13)

    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.

    Plugin Author hupe13

    (@hupe13)

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

    Thread Starter akoelsch

    (@akoelsch)

    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 4 months, 1 week ago by akoelsch.
    Plugin Author hupe13

    (@hupe13)

    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.

    Plugin Author hupe13

    (@hupe13)

    Plugin Author hupe13

    (@hupe13)

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

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

    😉

    Thread Starter akoelsch

    (@akoelsch)

    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?

    Plugin Author hupe13

    (@hupe13)

    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 4 months, 1 week ago by hupe13.
    Thread Starter akoelsch

    (@akoelsch)

    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?

    Thread Starter akoelsch

    (@akoelsch)

    Oups, wrong thread

    • This reply was modified 4 months, 1 week ago by akoelsch.
Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.