This extension is under development, it may take breaking changes.
SVG Map Picker
Select a value from a SVG Map box
In your Directus installation root
npm install directus-extension-svgmap-picker-interface
How to use
- Create new standard field with String or Numeric type
- For interface select SVG Map Picker
- Set selector to the desired elements
- Put your SVG image as a XML document in the SVG field
What SVG I can use?
You can use whatever SVGs you like, it is just necessery to have proper selection (such as class) and have
data-value attributes on wanted elements.
Can I use hover/active custom styles in place of the colors of picker?
Yes, just use
:hover pseudo class for hovering effect and
.active class name for current selected item.
What is the value source order?
Selected element emits first matched attribute in order
Extending the extension???
If you want to reuse your custom map across multiple project and do not want to fill the SVG document multiple times,
you could reuse the extension and pack with your custom map. Place it in your
Take a look at
Important here is that you still need to install extension.