This extension is under development, it may take breaking changes.

SVG Map Picker

Select a value from a SVG Map box

Installation

In your Directus installation root

npm install directus-extension-svgmap-picker-interface

Restart directus

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

FAQ

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 value or
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 value, data-value and id

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
./extensions/interfaces/YourCustomMapPicker/index.js

Take a look at
example bundle

Important here is that you still need to install extension.

GitHub

View Github