Example: Maps using JavaScript for apps outside Splunk Web

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

To use this code, save it as an HTML file in your own web site's directory. Make sure to update the splunkjs.config section for your own web app.

Notes

  • This example 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 an app in $SPLUNK_HOME/etc/apps/, such as $SPLUNK_HOME/etc/apps/search/lookups.
  • The authenticate function redirects to a login_form.html example login page, which you can find here.

For more, see Use SplunkJS Stack in your own web apps.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Maps</title>

    <link rel="stylesheet" type="text/css" href="static/splunkjs/css/bootstrap.css" />
    <style>
        .main-area {
            padding: 30px;
        }
    </style>
</head>

<body>
    <div>
        <div class="main-area">
            <h4>Marker info</h4>
            <div id="markerinfotable"></div>

            <h3>SplunkMap</h3>
            <div id="mysplunkmapview"></div>
        </div>
    </div>

    <script src="static/splunkjs/config.js"></script>

    <script>
        // Configure SplunkJS Stack
        splunkjs.config({
            proxyPath: "/proxy",
            scheme: "https",
            host: "localhost",
            port: 8089,
            authenticate: function(done) { 
                require([
                    "jquery",
                    "jquery.cookie"
                ], function($) {
                    // Retrieve the session key and username from cookies
                    var splunkSessionKey = $.cookie("splunk_sessionkey");
                    var splunkCurrentUser = $.cookie("splunk_username");

                    // Log in using the session key and username
                    if (splunkSessionKey) {
                        done(null, {sessionKey: splunkSessionKey, username: splunkCurrentUser}); 
                    }
                    // If there is no session key, redirect to the login form
                    else {
                        window.location.replace("login_form.html");
                    }
                });
            }
        });
        
        // Configure the web site's base URL
        require.config({
            baseUrl: "static/"
        });

        // Set up the Web Framework components
        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 managers and postprocess managers
            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", This doesn't work outside of Splunk Web
                "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>
</body>
</html>