Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js

Last update: Jun 13, 2022

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

  1. Create new standard field with String or Numeric type
  2. For interface select SVG Map Picker
  3. Set selector to the desired elements
  4. 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

https://github.com/dimitrov-adrian/directus-extension-svgmap-picker-interface
You might also like...

A Vue JS component for displaying dynamic data on a world map.

This is no longer being maintained, please do not open issues or PRs. Vue World Map A Vue JS Component for displaying dynamic data on a world map. Map

May 10, 2022

a simple component to generate an static google map

a simple component to generate an static google map

vue-static-map a simple component to generate an static google map Google Documentation Demo SandBox JSBin example Requirements Vue 2.X.X Usage Instal

May 17, 2022

Kartobuilder - a php package for the laravel framework that works with the inertia jetstream stack to build your own map

Kartobuilder is a php package for the laravel framework that works with the inertia jetstream stack to build your own map.

May 3, 2022

🗺 Map Module for Nuxt 3

@nuxtjs/map Map module for Nuxt ✨ Release Notes 📖 Read the documentation Features Nuxt 3 ready Easy integration with Google Maps & Leaflet Use only t

May 1, 2022

A wrapper component for consuming Google Maps API built on top of VueJs v2.

A wrapper component for consuming Google Maps API built on top of VueJs v2. Fork of the popular vue-google-maps plugin.

Jun 30, 2022

Using Google Maps with Vue.js

stores-map Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Run

Apr 22, 2022

Traveliko - Travel with Friends ~ Web application prepared using Google Street View API that allows you to real-time travel with your friends in the same place in street view mode.

Traveliko - Travel with Friends ~ Web application prepared using Google Street View API that allows you to real-time travel with your friends in the same place in street view mode.

Traveliko - Travel with Friends! You can create a room with your friends and travel in street view mode and navigate the map. The application basicall

Mar 3, 2022

Render every single road in any city, The data is fetched from OpenStreetMap using overpass API.

Render every single road in any city, The data is fetched from OpenStreetMap using overpass API.

Render every single road in any city, The data is fetched from OpenStreetMap using overpass API.

Jun 28, 2022

🗺 Vue Mapbox GL - A small components library to use Mapbox GL in Vue

🗺 Vue Mapbox GL A small components library to use Mapbox GL in Vue. Installation & usage Have a look at the small guide for information on how to set

Jun 23, 2022
Comments
  • 1. Employees in building

    Will it be possible to search for region or human body parts. Not only by clicking, but by searching... I am thinking about building each floor of the building and marking each floor where the employee is sitting or where the room is. What do you think, is it possible?

    Reviewed by koksikus at 2022-03-15 18:54
A set of Vue.js components to display an interactive SVG map

vue-svg-map A set of Vue.js components to display an interactive SVG map. Demo Take a look at the live demo! Installation npm npm install --save vue-s

Jun 19, 2022
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.

Kirby Locator A simple map & geolocation field, built on top of open-source services and Mapbox. Overview This plugin is completely free and published

Jun 25, 2022
A quick way to start a web map application with Vue.js using MapLibre GL JS.
A quick way to start a web map application with Vue.js using MapLibre GL JS.

Vue.js map using MapLibre GL JS A quick way to start a web map application with Vue.js using MapLibre GL JS. A simple fullscreen map application is us

May 28, 2022
This component allows you to display custom HTML content on the map using Overlay
This component allows you to display custom HTML content on the map using Overlay

vue3-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an update (a fork) from e

Apr 1, 2022
Baidu Map components for Vue 2.x
Baidu Map components for Vue 2.x

VUE BAIDU MAP Baidu Map components for Vue 2.x Languages 中文 English Documentation https://dafrok.github.io/vue-baidu-map Get Start Installation npm i

Jul 1, 2022
Choropleth Map component for Vue.js

vue-choropleth Vue components to display a choropleth map given a certain GeoJSON and another datasource to show information from. Using Vue2Leaflet H

Feb 12, 2022
Web map Vue components with the power of OpenLayers

VueLayers Web map Vue components with the power of OpenLayers Overview VueLayers is components library that brings the powerful OpenLayers API to the

Jun 21, 2022
vue google map custom marker component
vue google map custom marker component

vue2-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an adaptation of the Goog

May 17, 2022
New Sayobot Map Downloader Written by [email protected], [email protected], [email protected]
New Sayobot Map Downloader Written by Electron@12, Vite@2, Vue@3

SayoDownloader This software only provide in Chinese! 一个全新设计的小夜地图下载器

May 31, 2022
Web map Vue 3.x components with the power of OpenLayers
Web map Vue 3.x components with the power of OpenLayers

vue3-openlayers Web map Vue components with the power of OpenLayers Overview vue3-openlayers is components library that brings the powerful OpenLayers

Jun 24, 2022