
{% load splunkmvc %}

<!DOCTYPE html>
<html>
    <head>
        <title>Splunk Application Framework Quick Start</title>
        <!-- Bootstrap -->
        <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}splunkjs/css/bootstrap.css"/>
        <link href="{{STATIC_URL}}quickstartfx/css/style.css" rel="stylesheet" type="text/css" media="screen">
        <link href="{{STATIC_URL}}quickstartfx/css/prettify.css" rel="stylesheet" type="text/css" media="screen">
        <script type="text/javascript" src="{{STATIC_URL}}quickstartfx/js/prettify.js"></script>
        <script type="text/javascript" src="{{STATIC_URL}}quickstartfx/js/jquery-1.8.2.min.js"></script>

        <style type="text/css">
            #example-map{

                height:400px;
                width:600px;
                margin-top: 40px;
                margin-bottom: 40px; 
            }

        </style>
    </head>
    <body onload="prettyPrint();">
        <div id="splunk-bar"></div>
        <div id="container">
            <div class="progress-buttons">
                <a href="{% url 'quickstartfx:steps' id='addResultTable' %}" class="btn">Back</a>
                <a href="{% url 'quickstartfx:steps' id='addInteractivity' %}" class="btn btn-next btn-success">Next</a>
            </div>
            <h1>Splunk Application Framework Quick Start</h1>
            
            
            <div class="row" id="content-container">
                <div class="span23" id="main">
                        <h2>Map your results</h2>
                        <p>If you want to see your geo-tagged search results on a map, add a <b>GoogleMap</b> view and bind it to the search manager.</p>
                        <!-- <ul class="nav nav-tabs" id="main-tabs">
                            <li class="active">
                                <a href="#">Regular</a>
                            </li>
                            <li>
                                <a href="#">splunkjs.Async</a>
                            </li>
                        </ul> -->
                        <div class="well well-white" id="well-main">

                            <h3>Add a map</h3>
                            <p>Add the <b>GoogleMap</b> view like any other view. You can bind it to any search, but the view works best when your search includes geographic data. To indicate geographic coordinates, the search query must include latitude and longitude fields. The following map and table are bound to the same search manager:</p>

                            {% googlemap id="example-map" managerid="geosearch" %}

                            {% resulttable 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 %}

                            
                            </br>

                            <p>The code to create these views is similar to what we've seen so far. We have a <b>GoogleMap</b> view and a <b>ResultTable</b> view, both bound to the same search manager. Note <code>lat</code> and <code>lng</code> fields in the search query.</p>

<pre class="prettyprint linenums">
&#123;% googlemap id="example-map" managerid="geosearch" %&#125;

&#123;% resulttable id="example-table" managerid="geosearch" count="5" %&#125;

&#123;% 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 %&#125; 
</pre>
                            
                            
                        </div>
                    
                </div>
                <div class="span9 offset1" id="sidebar">
                    <div class="well well-white">
                        <ul class="nav nav-list ">
                            <li class="nav-header">Quick Start</li>
                            <li><a href="{% url 'quickstartfx:steps' id='createApp' %}">Create an app</a></li>
                            <li><a href="{% url 'quickstartfx:steps' id='addSearch' %}">Add a search</a></li>
                            <li><a href="{% url 'quickstartfx:steps' id='addResultTable' %}">Add search results to table</a></li>
                            <li class="active"><a href="{% url 'quickstartfx:steps' id='addMap' %}">Map your results</a></li>
                            <li><a href="{% url 'quickstartfx:steps' id='addInteractivity' %}">Add interactivity</a></li>
                            <li><a href="{% url 'quickstartfx:steps' id='nextSteps' %}">Next steps</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="progress-buttons">
                <a href="{% url 'quickstartfx:steps' id='addResultTable' %}" class="btn">Back</a>
                <a href="{% url 'quickstartfx:steps' id='addInteractivity' %}" class="btn btn-next btn-success">Next</a>
            </div>
            <div style="clear: both;"></div>
        </div>      
        {% component_loader %}
    </body>
</html>