[Maps] Custom icons point styling

[alexfrancoeur]

When we demoed the prototype of the maps app, we had a feature that allowed you to select from a group of icons.

I think this is a valid use case but an even more powerful feature would be the ability to upload your own image, similar to Canvas. If we only allowed for an SVG upload, I think the load on the app would be pretty small. This image could be persisted with the map JSON object itself if we wanted.

This is an example from @eskibars blog and done in Vega and it's a very valid use case. You can imagine an SVG of a plane for flight tracking, cell tower for telecom coverage, etc.

[elasticmachine]

Pinging @elastic/kibana-gis

[thomasneirynck]

Looking at the mapbox-gl API and style spec (https://docs.mapbox.com/mapbox-gl-js/style-spec/):

The individual properties of SVG icons cannot be styled dynamically, based on data-driven properties with the same primitives as regular circle markers. The maps app as of 6.7/7.0 will use border-width/color to style the border of a circle marker, and fill-color for the color itself. This will be difficult to translate as-is to any arbitrary SVG icon.

With basic usage of the mapbox-API, icon-size can be data-driven, but border-color, fill-color, and border-width cannot.

For the maps app, we could consider a work-around, and generate icons for all the possible outline-width and outline/fill-color combinations. That would introduce quite some complexity.

We could limit scope somewhat:
a) only allow static-styling of the border-width and fill/border-color for svg icons. the maps-app needs to generate these new SVGs with the modified properties.
b) preserve dynamic styling of icon size (so size can be driven by ordinal values. aka. bigger values = bigger icons). mapbox will handle the rescaling of size based on style-rules.

• These limitations would somehow need to be exposed in the UX of the vector-style editor.
• (a) would only apply for a fixed symbol set that we know is clean and where uniform change of fill and border color could be desirable (https://labs.mapbox.com/maki-icons/). It assumes any SVG icon would have those properties and it would make sense to style them individually (e.g. what about two-toned SVG-icons (?)). Perhaps (a) should be limited even further, to just make fill-color modifiable.
• this doesn't address user-provided SVGs or raster images, where static styling of (a) is even more difficult.

The above limitations seem fairly reasonable imho, and would be inline with the majority of GIS toolkits.

[alexfrancoeur]

Thanks for digging in @thomasneirynck! This is great, I think we definitely have a path forward here. Some quick comments.

With basic usage of the mapbox-API, icon-size can be data-driven, but border-color, fill-color, and border-width cannot.

Bummer, but hey - it was worth looking into

For the maps app, we could consider a work-around, and generate icons for all the possible outline-width and outline/fill-color combinations. That would introduce quite some complexity.

I agree, this is crazy for a custom icon. It would be nice to provide out of the box fill colors for pre-packaged Maki icons though. I could imagine a similar experience to the one I described here for Canvas elements (#34393). But instead of elements, they would just be the maki icons with a handful of our brands colors. So it's not a completely custom approach, but there are enough icons and color options to differentiate data points on a map.

We could limit scope somewhat:
a) only allow static-styling of the border-width and fill/border-color for svg icons. the maps-app needs to generate these new SVGs with the modified properties.
b) preserve dynamic styling of icon size (so size can be driven by ordinal values. aka. bigger values = bigger icons). mapbox will handle the rescaling of size based on style-rules.

I think this would be more than enough for the majority of use cases. Static styling is fine, dynamic sizing would be great to have if possible. I would think SVG's lend themselves to being dynamically sized pretty easily.

this doesn't address user-provided SVGs or raster images, where static styling of (a) is even more difficult.

I think we can approach user provided SVG's in two ways. The first, we push for a bit and wait to figure it out. The second, we simply only allow the upload of the SVG without customization. If you're uploading an SVG, you can color it beforehand. Static only. But you can still dynamically size.

[gose]

Will custom icons support an orientation property? Often it's useful to indicate direction of travel.

[alexfrancoeur]

Update from our discussion this week:

• Likely, we'll come up with our own icons in EUI (need to work with design here) or can use existing libraries potentially such as Maki
• Static colors only, dynamic resizing Choose colors, client side spreadsheet for sizing
• We'll need to generate a spreadsheet on the fly, ideally allowing the user to define any color vs. choosing a standard set of colors to choose from
• Orientation of the icons can also be data driven, we should support this

[thomasneirynck]

@gose @alexfrancoeur agreed that orientation should be supported

[alexfrancoeur]

@thomasneirynck thoughts on adding a custom CSS input box (similar to Canvas) so users can customize even further if they'd like?

[thomasneirynck]

Reopening: this asks for user-provided icons, not ability to add icons from a fixed set

[glazou]

I would really appreciate to be able to use custom SVG (even with limitations on styling).

For my use case, the important feature would be to offer to choose the symbol based on a field value. I opened a ticket for this #60781

More advanced styling would be bonus to me. Altough, I can see use case for your option b "preserve dynamic styling of icon size (so size can be driven by ordinal values. aka. bigger values = bigger icons). mapbox will handle the rescaling of size based on style-rules."

[thomasneirynck]

thx @glazou for following up on this issue (and #60781 earlier).

In general, the earlier discussion in this ticket has grown a little out-of-date:

The situation as of 7.6:

• Maps provides a default icon-set (see here https://github.com/elastic/maki)
• All properties (fill width/color, line width/color, rotation) of these icons can be driven by a value. This value can either be:
  • numerical: this can drive size, color (from default ramps or from custom ramp), orientation.
  • categorical: this can drive color (from a default or custom palette).

We reopened this ticket because a core-ask, the ability for a user to provide an ad-hoc icon is still open. Will post here if there's any updates on the topic from the maintainer-side.

[glazou]

Thanks Thomas, it's much appreciated

[thekofimensah]

I'd also love to have this. I have several different companies I'd like to put on a map and if I could import their logos, the map would be way more intuitive.

[3dog]

I stumbled upon this issue looking for the same type of feature. I would be happy if there were "network" type of icons to use on the map layer. Switches, hubs, VPN Concentrator, Satellite, etc.

[thomasneirynck]

thx @3dog for the feedback, I created an ER for your specific request here: elastic/maki#11

[grantcurell]

I also went looking for this feature. Elasticsearch maps is amazing, but it does limit the utility not being able to change the icons. For example, I have to display a bunch of global conflict data and need an icon for battle. I'm just going with "blood bank" 😂

[thomasneirynck]

other user comment from @hbs128, #80651

The current limited selection of icons used to symbolize geo_points on a map limits customization options and appropriate symbolization of data.

Implementing a feature that allows for the ability to upload/personalize icons to display on the map allows for enhanced customization of the visualization. This can give users the option to build maps more tailored to their data, and the message they are trying to convey and visualize. Customized/personalized icons can better communicate what the data represents, allowing for an overall more impactful and appropriate visualization. Many users would benefit.
Any plans for this type of feature?

[irwazr]

Just want to join the chorus and say I too agree the ability to upload SVGs would seem to be the best option here. Effective communication of the message of the dashboard data is the primary KPI that determines if the audience will see the value delivered.

[kmartastic]

Multiple customers asking for this from GeoCAB (feedback group).

[seanbirdsell]

Any movement on this issue/request?

[nickpeihl]

We are currently exploring options for supporting custom icons in #113144. But we're still very early in the process so we don't know now when the feature will be released.

Any movement on this issue/request?

@seanbirdsell does your use case require dynamically styling the icons (color, orientation, etc) based on attributes? Would you be using SVG icons, PNG icons, or both?

[seanbirdsell]

Thank you for the clarification. On your question regarding dynamic styling: yes. Given that, I'd think SVGs are the way to go, no?

[nickpeihl]

Thank you for the clarification. On your question regarding dynamic styling: yes. Given that, I'd think SVGs are the way to go, no?

Yes, SVGs will also be easier to scale and style in the legend. So I think supporting SVG icons is the goal. If necessary, we can examine PNG icon support in the future.

[alexfrancoeur]

This is awesome, thank you @nickpeihl 🙏