Like markers, vector paths can be assigned classes with the className method. I would like the Views interface to allow a user to pass classes to vector paths, so that they can be styled with CSS or called in Javascript. The field should also allow tokens.

My personal use case for this: when displaying a block on a node page, I want to use this StackOverflow answer to highlight the currently displayed node on a Leaflet map. Passing classes from the Views interface through the className method is the most general way I can think to do that.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

dericke created an issue. See original summary.

dericke’s picture

Title: Assign class to SVG paths in views » Assign class to SVG paths in Views
robertwb’s picture

This seems like a reasonable request (an potentially powerful). I would be glad to work up a patch for this if you can you provide a before/after example of what the resulting GeoJson would look like, and a mock-up of where you think this should appear in the interface.

dericke’s picture

FileSize
1.91 KB

I actually started working on this on my own. It was easy to create a field in the View settings and pass the class to the Leaflet object, but I don't know where to call tokenize_value() to evaluate the tokens. I've attached a patch so you get a better idea of what I think this should be.

I didn't have to touch any GeoJSON. I just made a new field with the label "className", same as the Leaflet method, and leaflet.drupal.js picked it up and used it.

robertwb’s picture

Very solid - I don't currently have my own need for this right now, but I will be glad to do follow-up testing on this if you can post a CSS class that you used to achieve the result, and an image of the finished product.

It's definitely an easy tweak.

dericke’s picture

Having hit a snag with my own attempts in developing this, here's a mockup of the end result:

Screenshot of leaflet map, with Firefox inspector highlighting an SVG path.

The expression from the linked StackExchange answer evaluates the difference between the current page nid and each View row's nid. Appended to "active," the class "active0" marks the active item. In this mockup, I used Firefox Inspector to add an active0 class to the path element representing the current displayed node, and to make some CSS styling for the class to highlight the SVG path.

The problem I'm having is that the field I created won't evaluate a token representing a view field, so the class displayed becomes "active[expression]" instead of "active0."

tamarackmedia’s picture

dericke, did you ever figure this out? I'm trying to do the same thing. Looks like you were closer than anything else I've found!