Example: Maps using JavaScript in a template

This example uses JavaScript to show data on a Splunk map.

[example]

To use this code save it as an HTML file under an existing app in $SPLUNK_HOME/etc/apps/app_name/django/app_name/templates. 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. Then, view the page in Splunk. For example, to view mypage.html in mysplunkapp, go to http://localhost:8000/dj/mysplunkapp/mypage. For more about creating an app, see How to create a Web Framework app using SplunkJS Stack.

{% extends 'splunkdj:base_with_app_bar.html' %}

{% load splunkmvc %}

{% block title %}Map view (JavaScript){% endblock title %}

{% block css %}
<style>
    .main-area {
        padding: 30px;
    }
</style>
{% endblock css %}

{% block content %}
<div>
    <div class="main-area">
        <h4>Table view</h4>
        <div id="markerinfotable"></div>
        <h4>SplunkMap view</h4>
        <div id="mysplunkmapview"></div>
    </div>
</div>  
{% endblock content %}

{% block js %}
<script>
    var deps = [
        "splunkjs/ready!",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/postprocessmanager",
        "splunkjs/mvc/tableview",
        "splunkjs/mvc/splunkmapview"
    ];
    require(deps, function(mvc) {
        // Load individual components
        var SearchManager = require("splunkjs/mvc/searchmanager");
        var PostProcessManager = require("splunkjs/mvc/postprocessmanager");
        var TableView = require("splunkjs/mvc/tableview");
        var SplunkMapView = require("splunkjs/mvc/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
        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();
            alert(e.data.count+" earthquakes near ("+e.data.latitude+", "+e.data.longitude+")");
            console.log(e.data);
        });

    });
</script>
{% endblock js %}