Hotspot Module

Purpose

Hotspots makes it possible to add a data point with interactive popups.

Usage

import DistrictMap from "~MapApi/BaseMap";

<district-hotspot-image :src="src" :layers="layers"/>

Props

/**
* The image src.
*/
src: {
    type: String,
    required: true
},
/**
* Whether new data points can be added.
* Should be used in conjunction with the hotspot layer builder and hotspot image upload, if true.
* See Modules/Hotspot/Resources/assets/js/Components/Formulate/FormulateHotspotLayerBuilder.vue
* See Modules/Hotspot/Resources/assets/js/Components/Formulate/FormulateHotspotImageUpload.vue
*/
addNewDataPoint: { 
    type: Boolean,
    default: false
},
/**
* Layers to render on the hotspot image.
* [{"settings":{"title":"Point 1","description":"Description","color":"#8866ff","size":"30","positionX":"20","positionY":"50"},"uuid":"69d4594e-1dc0-45c7-9a07-cee8c8a8f248-1702457591274","type":"Modules\\Hotspot\\Plugins\\HotspotLayers\\Plugins\\HotspotDataPoint","id":"1702457591274"}]
*/
layers: {
    type: Array,
    default: () => [],
},

In order to add hotspot to an image, there is only one plugin available at the moment which is Modules/Hotspot/Plugins/HotspotLayers/Plugins/HotspotDataPoint.php. Further addition of plugin requires extending Modules/Hotspot/Plugins/HotspotLayers/BaseHotspotLayer.php. Further addition of plugin may require refactor on both the frontend and backend on rendering, storage and also on hotspot layer builder stuffs.