Add interactivity
The Splunk Application Framework makes it easy to add interactivity to an app using JavaScript. Web developers who are familiar with JavaScript programming will feel right at home.
Make an interactive map and table
The following example creates a GoogleMap and a Table view, binds them to the same search manager, and uses JavaScript to listen to click events on the table. When a map marker is clicked, the table is updated to show data about the corresponding event.
{% googlemap id="example-map" managerid="mapsearch" %}Event data:
{% table id="example-table" managerid="tablesearch" count="1" %} {% searchmanager id="tablesearch" search="| inputlookup earthquakes.csv | rename Lat as lat Lon as lng | fields lat lng Magnitude | head 1" preview=True cache=True %} {% searchmanager id="mapsearch" search="| inputlookup earthquakes.csv | rename Lat as lat Lon as lng | fields lat lng Magnitude | head 1" preview=True cache=True %}This map, table, and search are declared with template tags:
{% googlemap id="example-map" managerid="geosearch" %} {% table id="example-table" managerid="geosearch" count="5" %} {% searchmanager id="geosearch" search="| inputlookup earthquakes.csv | rename Lat as lat Lon as lng | stats count by lat, lng" preview=True cache=True autostart=True %}
With JavaScript, the map and table are selected through the splunkjs.mvc object and a click handler is attached to the table. When a row in the table is clicked, the previous selection is cleared and a new marker is added to the map.
var table= splunkjs.mvc.Components.getInstance("example-table"); var exampleMap= splunkjs.mvc.Components.getInstance("example-map"); var marker = null; table.on("click:row", function(e){ e.preventDefault(); var lng = parseFloat(e.model.get("lng")); var lat = parseFloat(e.model.get("lat")); var latlng = new google.maps.LatLng(lat, lng); if(marker) marker.setMap(null); marker = new google.maps.Marker({ position: latlng, map: exampleMap.map }); });