Custom icon/color for POI markers

[Phyks]

trafficstars

Hi,

I've just discovered the POI feature in BRouter, which is really great! Not sure if this requires a lot of work or not, but it would be nice to be able to pick a different icon per marker.

My typical use case is pointing out things I want to see on a trip and places where I'm staying. Having different icons would help having a visual distinction for places where I'm staying, hence easing planning multi-day trips in BRouter.

Thanks!

[rkflx]

Thanks for reaching out! You are not the first to have this idea, but as far as I can see the first to create an issue about it. So many ideas, so little time...

The UI part is probably not trivial, but should not be too hard either.

What's more difficult is shaping this into a consistent user experience:

• Should we allow to customize only icons, or colors too? In particular since the icons would be quite small and hard to distinguish, with a large number of POIs they could be hard to see against each other on a cluttered map, diminishing the usefulness of custom icons. Custom colors might be easier to see? Maybe a different shape for POI markers vs. route start/via/end markers would help too, e.g. see "square markers" here.
• UI-wise, a long list of icons to scroll through is not ideal. It would be better to find a search-as-you-type style icon picker.
• Adding POIs to the map is not enough, they would have to be saved to the URL too. It might be possible to save plain icon names (user-supplied POI names are already saved that way), but they would be only valid until the next FontAwesome upgrade breaks backward compatibility. We can probably live with that or add some kind of mapping, it is not ideal though.
• Not a must-have, but IMO expected by users: POIs and specifically their custom icons should also transfer to exported files, otherwise they could only be used in the planning stage, but not when riding. It might get very hairy to do this in a manner compatible with a wide range of file formats, apps and devices. For example, a GPX viewed in OsmAnd might give totally different results compared to a FIT file exported to a Garmin Edge (note: this format is not yet implemented, but might be in the future). This will need lots of manual testing, and research into existing standards. Do we only support a common subset of icons, or will this become even worse than the many different turn instructions modes (including per-device incompatible turn direction markers)? Again, maybe colors are more standardized?
• Would users importing tracks with waypoints expect any contained custom waypoint icons to work?
• There could be a fallback by adding the icon name to the name tag of the POI. Or perhaps it should work this way in the first place, e.g. name your POI !!beach at the lake to give it a "beach" icon?
• What about emojis? Those could be also used in the name, and if a name starts with an emoji, it could be displayed on top of the marker automatically. It would also "only" require appropriate fonts on the target app/device, without specific support for an icon tag in the file format.
• Suppose you want to "bookmark/save" a POI from one of the overpass layers as a custom POI: Should the icon be copied over? In that case, support for icons used there would be needed.

As you can see, lots of things to consider. This should not prevent anyone from submitting a PR, but it is probably best to discuss things here a bit first...

It would also help to have a specific use case in mind (e.g. "plan bikepacking trip in BRouter-Web, mark sleeping places with POI type A and must-see attractions with POI type B") and rule out other scenarios (e.g. communicate clearly in the UI that POIs will lose custom icons upon export).

---

In case it helps for your trips: We now also support auto-generated POI layers based on overpass queries, with many of them already predefined and only a checkbox away, including opening hours for restaurants in the marker tooltip.

Try finding them, and make sure to open a new issue if you think they are hard to find, if adding them to the map is too complicated or if you struggle to "bookmark" an overpass POI as a custom POI for later. (I might have an opinion on that, but external feedback is also valuable...)

[Phyks]

Hi,

Thanks for raising these points! For my very simple use case (distinguishing POI types), colors are more than enough and probably easier to implement. I edited the issue title in this direction.

POIs icons are probably a very difficult task and over-engineered for a very simple use case, which you summarized very well:

It would also help to have a specific use case in mind (e.g. "plan bikepacking trip in BRouter-Web, mark sleeping places with POI type A and must-see attractions with POI type B")

---

Try finding them, and make sure to open a new issue if you think they are hard to find, if adding them to the map is too complicated or if you struggle to "bookmark" an overpass POI as a custom POI for later. (I might have an opinion on that, but external feedback is also valuable...)

That's a great feature which I missed as well, indeed! I didn't find easily how to bookmark an overpass POI marker to a custom POI though. And I'd expect it to be available under the "Import" dropdown, if one of the designed use case is to be able to bookmark them, not only in the "personal layer" menu.

[rkflx]

I kinda hoped you'd stumble over the two-step process to add overpass POIs to the map, but I guess you used that part of the UI before and now know too much ;)

I didn't find easily how to bookmark an overpass POI marker to a custom POI though.

Well, sorry for the trick question. Currently the only way to achieve something similar is to create a new custom POI and manually copy over the name from the overpass POI, with no way to paste any additional info.

It would be great to have a button on overpass POIs to convert them to custom POIs, though. (Perhaps it would be enough to store the name, the OSM node id and potentially a color value in the URL, and look up the additional info on demand?)

I'd expect it to be available under the "Import" dropdown

Allowing to export and import POIs independently from waypoints in a track is actually an interesting idea. If we allow to import tracks for planning purposes, why not provide the same functionality for POIs too?

Feel free to open new issues for both points (including example use cases), if you think they might be worth having. It won't magically translate into a PR, but at least the idea is not forgotten.

[rkflx]

Regarding colored POIs, let me add a note concerning a potential color picker UI (for anyone considering submitting a PR for this feature):

Usability-wise it is usually better to allow the user to pick between a couple of predefined colors from a well-chosen color palette. Choosing an arbitrary color from something like a color wheel could be possible too, but it should not be the only option. This is because in general this type of UI is slow to use, it is hard for users to pick a good-looking color, and it is difficult to switch back to a color used earlier.

In that sense, simply integrating https://itsjavi.com/bootstrap-colorpicker or relying on <input type="color"> might be tempting, but it would be better to also add additional buttons with predefined colors.

Better examples (without having spent too much time on research):

1. https://baijs.com/tinycolorpicker/
2. https://seballot.github.io/spectrum/
3. https://huebee.buzz/

Number 1 looks quite neat, but might be a bit too minimal. Number 3 would need lots of styling changes to not look out-of-place in a Leaflet-centric UI. Number 2 (configured to only show palette + "more" button, and to close on click) seems to be the best option, it is clean and easy to use, yet functional.

(It would also be good to use the same color picker everywhere in the UI, see also #297.)