Custom Icons

  • Resolved akoelsch

    (@akoelsch)


    3 years, 6 months ago

    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 15 replies - 1 through 15 (of 17 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/[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;
}
    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 3 years, 6 months 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)

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

    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 3 years, 6 months 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 3 years, 6 months ago by akoelsch.
    Plugin Author hupe13

    (@hupe13)

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

    Thread Starter akoelsch

    (@akoelsch)

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

    Plugin Author hupe13

    (@hupe13)

    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.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Custom Icons’ is closed to new replies.