Example: Maps using a Simple XML extension

This example uses a Simple XML extension to show data on a Splunk map.

[example]

To use this code:

  1. Save the XML file under an existing app in $SPLUNK_HOME/etc/apps/app_name/local/data/ui/views/.
  2. Save the JS file under $SPLUNK_HOME/etc/apps/app_name/appserver/static/.
  3. This example also uses search results from a sample earthquakes lookup table, and includes fields for latitude and longitude in the search queries. To try it for yourself, download earthquakes.csv to a /lookups directory under $SPLUNK_HOME/etc/apps/your_app_name.
  4. Restart Splunk.
  5. Open Splunk Web and view the dashboard in your app. For example, to view myexample in mysplunkapp, go to http://<localhost:port>/app/mysplunkapp/myexample.

example_map.xml

<dashboard script="example_map.js">
  <label>Map view</label>
  <row>
    <panel>
      <html>
        <div>
          <div class="main-area">
            <h4>Table view</h4>
            <div id="markerinfotable"></div>

            <h4>SplunkMap view</h4>
            <div id="mysplunkmapview"></div>
          </div>
        </div>
      </html>
    </panel>
  </row>
</dashboard>

example_map.js

require([
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/postprocessmanager",
    "splunkjs/mvc/tableview",
    "splunkjs/mvc/splunkmapview",
    "splunkjs/mvc/simplexml/ready!"
], function(
    SearchManager,
    PostProcessManager, 
    TableView,
    SplunkMapView
) {

    // Define the search manager and postprocess manager
    var searchmain = new SearchManager({
        id: "search-map",
        search: "| inputlookup earthquakes.csv | search  Region=Washington",
        preview: true,
        cache: true
    });

    var searchsub1 = new PostProcessManager({
        id: "search-splunkmap",
        managerid: "search-map",
        search: "| rename Lat as lat, Lon as lon | geostats count"
    });

    // Set up a table for displaying marker info
    new TableView({
        id: "markerinfo",
        managerid: "search-map",
        el: $("#markerinfotable")
    }).render();

    // Set up the Splunk map
    var mysplunkmap = new SplunkMapView({
        id: "example-splunkmap",
        managerid: "search-splunkmap",
        drilldown: true,
        drilldownRedirect: true,
        tileSource: "splunk",
        "mapping.map.zoom": 7,
        "mapping.map.center": "(47.5,-120)", // Center on Washington state
        "mapping.markerLayer.markerOpacity": 0.6,
        "mapping.markerLayer.markerMinSize": 15,
        el: $("#mysplunkmapview")
    }).render();

    // Capture click data and display the object in the console
    mysplunkmap.on("click:marker", function(e) {
        e.preventDefault();

        // Display a data object in the console
        console.log("Map click: ", e.data['row.count'] + " earthquakes near (" + e.data['row.latitude'] + ", " +e .data['row.longitude'] + ")");
    });

});