Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
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.
Comment | File | Size | Author |
---|---|---|---|
#6 | leaflet-viewsclassmockup-2611058-6.png | 137.23 KB | dericke |
#4 | vectorclassexample.patch | 1.91 KB | dericke |
Comments
Comment #2
dericke CreditAttribution: dericke commentedComment #3
robertwb CreditAttribution: robertwb commentedThis 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.
Comment #4
dericke CreditAttribution: dericke commentedI 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.
Comment #5
robertwb CreditAttribution: robertwb commentedVery 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.
Comment #6
dericke CreditAttribution: dericke commentedHaving hit a snag with my own attempts in developing this, here's a mockup of the end result:
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 anactive0
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."
Comment #7
tamarackmedia CreditAttribution: tamarackmedia commenteddericke, 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!