Dashboards & Visualizations

Can a dashboard map's center location change based on a drop-down token?

Phil219
Path Finder

I currently implement dropdowns:

<input type="dropdown" token="state_token" searchWhenChanged="true">
   <label>Pick a State</label>
      <search>
          <query>host=coolstuff  | dedup State | table State</query>
          <earliest>0</earliest>
      </search>
      <fieldForLabel>State</fieldForLabel>
      <fieldForValue>State</fieldForValue>
      <default>California</default>
 </input>    

This returns all the results within that state. So, instead of (52.7,-124.45) in the following:

<option name="mapping.map.center">(52.7,-124.45)</option>

I would like to use variables like (avg(latfield),avg(longfield)) but it then centers on the equator and Prime meridian. Is it possible to use variables in this field? Any suggestions?

Tags (3)
1 Solution

talla_ranjith
Engager

Hi Phil219,

Yes you can change the map's center location based on the drop down selection. here I'm posting the code that i have done. based on the city name selection the map center location will be set automatically and displays the map with city info.

<form>
      <label>MapDashboard</label>
      <fieldset submitButton="false" autoRun="true">
        <input type="dropdown" token="state_token" searchWhenChanged="true">
          <label>Pick a State</label>
          <search>
            <query>| inputlookup geomaps_data.csv | iplocation device_ip | where City != ""| stats count by City lat lon | table City, lat, lon</query>
          </search>
          <fieldForLabel>City</fieldForLabel>
          <fieldForValue>City</fieldForValue>
          <default>London</default>
          <change>
            <set token="lat_tok">$row.lat$</set>
            <set token="lon_tok">$row.lon$</set>
          </change>
        </input>
      </fieldset>
      <row>
        <panel>
          <map>
            <title>Maps</title>
            <search>
              <query>| inputlookup geomaps_data.csv | iplocation device_ip | search lat=$lat_tok$ lon=$lon_tok$ | geostats latfield=lat longfield=lon count by City</query>
            </search>
            <option name="mapping.type">marker</option>
            <option name="mapping.map.center">($lat_tok$,$lon_tok$)</option>
            <option name="mapping.choroplethLayer.colorBins">5</option>
            <option name="mapping.choroplethLayer.colorMode">auto</option>
            <option name="mapping.choroplethLayer.maximumColor">0xDB5800</option>
            <option name="mapping.choroplethLayer.minimumColor">0x2F25BA</option>
            <option name="mapping.choroplethLayer.neutralPoint">0</option>
            <option name="mapping.choroplethLayer.shapeOpacity">0.75</option>
            <option name="mapping.choroplethLayer.showBorder">1</option>
            <option name="mapping.data.maxClusters">100</option>
            <option name="mapping.map.panning">true</option>
            <option name="mapping.map.scrollZoom">true</option>
            <option name="mapping.map.zoom">2</option>
            <option name="mapping.markerLayer.markerMaxSize">50</option>
            <option name="mapping.markerLayer.markerMinSize">10</option>
            <option name="mapping.markerLayer.markerOpacity">0.8</option>
            <option name="mapping.showTiles">1</option>
            <option name="mapping.tileLayer.maxZoom">7</option>
            <option name="mapping.tileLayer.minZoom">0</option>
            <option name="mapping.tileLayer.tileOpacity">1</option>
            <option name="drilldown">all</option>
          </map>
        </panel>
      </row>
    </form>

First im getting City name, lat and lon values but displaying only city in the Dropdown, for other two fields i have taken two more tokens. that tokens im binding to mapcenter location. you can download geomaps_data.csv sample lookup from webframework toolkit app.

alt text

alt text

View solution in original post

talla_ranjith
Engager

Hi Phil219,

Yes you can change the map's center location based on the drop down selection. here I'm posting the code that i have done. based on the city name selection the map center location will be set automatically and displays the map with city info.

<form>
      <label>MapDashboard</label>
      <fieldset submitButton="false" autoRun="true">
        <input type="dropdown" token="state_token" searchWhenChanged="true">
          <label>Pick a State</label>
          <search>
            <query>| inputlookup geomaps_data.csv | iplocation device_ip | where City != ""| stats count by City lat lon | table City, lat, lon</query>
          </search>
          <fieldForLabel>City</fieldForLabel>
          <fieldForValue>City</fieldForValue>
          <default>London</default>
          <change>
            <set token="lat_tok">$row.lat$</set>
            <set token="lon_tok">$row.lon$</set>
          </change>
        </input>
      </fieldset>
      <row>
        <panel>
          <map>
            <title>Maps</title>
            <search>
              <query>| inputlookup geomaps_data.csv | iplocation device_ip | search lat=$lat_tok$ lon=$lon_tok$ | geostats latfield=lat longfield=lon count by City</query>
            </search>
            <option name="mapping.type">marker</option>
            <option name="mapping.map.center">($lat_tok$,$lon_tok$)</option>
            <option name="mapping.choroplethLayer.colorBins">5</option>
            <option name="mapping.choroplethLayer.colorMode">auto</option>
            <option name="mapping.choroplethLayer.maximumColor">0xDB5800</option>
            <option name="mapping.choroplethLayer.minimumColor">0x2F25BA</option>
            <option name="mapping.choroplethLayer.neutralPoint">0</option>
            <option name="mapping.choroplethLayer.shapeOpacity">0.75</option>
            <option name="mapping.choroplethLayer.showBorder">1</option>
            <option name="mapping.data.maxClusters">100</option>
            <option name="mapping.map.panning">true</option>
            <option name="mapping.map.scrollZoom">true</option>
            <option name="mapping.map.zoom">2</option>
            <option name="mapping.markerLayer.markerMaxSize">50</option>
            <option name="mapping.markerLayer.markerMinSize">10</option>
            <option name="mapping.markerLayer.markerOpacity">0.8</option>
            <option name="mapping.showTiles">1</option>
            <option name="mapping.tileLayer.maxZoom">7</option>
            <option name="mapping.tileLayer.minZoom">0</option>
            <option name="mapping.tileLayer.tileOpacity">1</option>
            <option name="drilldown">all</option>
          </map>
        </panel>
      </row>
    </form>

First im getting City name, lat and lon values but displaying only city in the Dropdown, for other two fields i have taken two more tokens. that tokens im binding to mapcenter location. you can download geomaps_data.csv sample lookup from webframework toolkit app.

alt text

alt text

Phil219
Path Finder

Nice! Thank you talla_ranjith!

I appreciate how thorough you are

0 Karma

ranjith_kumar
Path Finder

you are welcome.... 🙂

Regards
Ranjith Talla
Vedicsoft Solutions Ind Pvt Ltd
Hyderabad, India

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...