Drill down from a feature you have drawn - code included

[guarddogmonitor]

I would like to contribute to the maps+ plugin for Splunk.

Feature I implemented was a drill down option from a feature, that will set a token "token_feature_drill_down".
That way these coordinates can be used as "INPUTS" / area selection.

I am updating one file:

appserver/static/visualizations/maps-plus/visualization.js

Line 80510-80516 update, this will add another option when clicking on a feature, other than center on, and delete.

 function(e, t, r) {
				e.exports = '<h3>Point location</h3> <p>{{ model.lastCoord.dms.y }} <span class=coorddivider>/</span> {{ model.lastCoord.dms.x }}</p> <p>{{ numberFormat(model.lastCoord.dd.y, 6) }} <span class=coorddivider>/</span> {{ numberFormat(model.lastCoord.dd.x, 6) }}</p> <br><h3>Feature Definition</h3> <p><input type=text width=100% id=zone-def value="{{ model.points }}"></p> <ul class=tasks><li><a href=# class="js-drill zoomto">Drill down</a></li> <li><a href=# class="js-zoomto zoomto">Center on this location</a></li> <li><a href=# class="js-deletemarkup deletemarkup">Delete</a></li> </ul> '
			}, function(e, t, r) {
				e.exports = '<h3>Linear measurement</h3> <p>{{ model.displayStrings.lengthDisplay }}</p> <br><h3>Feature Definition</h3> <p><input type=text width=100% id=zone-def value="{{ model.points }}"></p> <ul class=tasks> <li><a href=# class="js-drill zoomto">Drill down</a></li><li><a href=# class="js-zoomto zoomto">Center on this area</a></li> <li><a href=# class="js-deletemarkup deletemarkup">Delete</a></li> </ul> '
			}, function(e, t, r) {
				e.exports = '<h3>Area measurement</h3> <p>{{ model.displayStrings.areaDisplay }}</p> <p>{{ model.displayStrings.lengthDisplay }} Perimeter</p> <br><h3>Feature Definition</h3> <p><input type=text width=100% id=zone-def value="{{ model.points }}"></p> <ul class=tasks><li><a href=# class="js-drill zoomto">Drill down</a></li> <li><a href=# class="js-zoomto zoomto">Center on this area</a></li> <li><a href=# class="js-deletemarkup deletemarkup">Delete</a></li> </ul>'
			}]);

Line 79453 add
Functionality for the drill down

try {
							var feature_drill_down = (0, p.selectOne)(".js-drill", a);
							feature_drill_down && (L.DomEvent.on(u, "click", L.DomEvent.stop), L.DomEvent.on(feature_drill_down, "click", function() {
								
                      
								// Get the current URL
								const popupContents = document.querySelectorAll('.leaflet-popup-content');
								var drill_value = ""
								
								// Loop through the selected elements (if there are multiple)
								popupContents.forEach((popupContent) => {
								// Find the zone-def input element within each div
								const zoneDefInput = popupContent.querySelector('#zone-def');

								// Check if the zone-def input exists in this div
								if (zoneDefInput) {
									drill_value = zoneDefInput.value;
								
    
    // You can perform further actions with the value as needed
  }
});
								
								
								
								require(["splunkjs/mvc","splunkjs/mvc/simplexml/ready!"], function(mvc) {
									

								var token_feature_drill_down = mvc.Components.get("default");
								token_feature_drill_down.set("token_feature_drill",drill_value);    
								token_feature_drill_down.set("form.token_feature_drill",drill_value); 								
								});
								
								
								
						

                            
							}, this));

							}
							catch (error){
								console.error('An custom error occurred:', error.message);
								
							}

Some limitations yet, token is a static and not configurable.

I have a hidden search in my dashboard that uses the feature definition as an input, to figure out what "elements of interest" are located in the polygon drawn. Currently I have a little input box set where the users needs to copy paste the feature definition manually over.

The code might not be up to par as quality, so update as need if you want to add it at all.