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.


  • 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">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

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

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

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

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

        // Configure SplunkJS Stack
            proxyPath: "/proxy",
            scheme: "https",
            host: "localhost",
            port: 8089,
            authenticate: function(done) { 
                ], 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 {
        // Configure the web site's base URL
            baseUrl: "static/"

        // Set up the Web Framework components
        var deps = [
        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")

            // 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")

            // Capture click data and display the object in the console
            mysplunkmap.on("click:marker", function(e) {
                alert(e.data.count+" earthquakes near ("+e.data.latitude+", "+e.data.longitude+")");