Dashboards & Visualizations

Can a dashboard user change a map's location & zoom based on a selected drop-down token?

Phil219
Path Finder

I currently have a dashboard that has a drop-down to display cool statistics in graphical form based on state (i.e. Alabama, Alaska, etc.). I have a map panel as well that has the default location and zoom as the entire U.S.. I think it would be neat to have the location and zoom change based on the state drop-down token. How would I do that?

0 Karma
1 Solution

MuS
SplunkTrust
SplunkTrust

Hi Phil219,

You can do this by passing the token for the zoom level to the dashboard; look at this XML which uses Twitter data - will maybe not work for you - but you will get the idea how it can be done:

<form>
  <label>drop down map</label>
  <fieldset submitButton="true">
    <input type="dropdown" token="zoom" searchWhenChanged="true">
      <label>Zoom:</label>
      <choice value="1">1</choice>
      <choice value="3">3</choice>
      <choice value="6">6</choice>
      <default>1</default>
    </input>
    <input type="dropdown" token="location" searchWhenChanged="false">
      <label>Country:</label>
      <search>
        <query>tag=twitter coordinates.type=Point | dedup user.location | table user.location | rename user.location AS location</query>
        <earliest>@d</earliest>
        <latest>now</latest>
      </search>
      <fieldForLabel>location</fieldForLabel>
      <fieldForValue>location</fieldForValue>
      <choice value="*">all</choice>
      <default>*</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <map>
        <search>
          <query>tag=twitter coordinates.type=Point user.location=$location$ | rename coordinates.coordinates{} as lnglat | eval lat=mvindex(lnglat,1) | eval lng=mvindex(lnglat,0) | geostats latfield=lat longfield=lng count</query>
          <earliest>@d</earliest>
          <latest>now</latest>
        </search>
        <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.drilldown">all</option>
        <option name="mapping.map.center">(0,0)</option>
        <option name="mapping.map.panning">true</option>
        <option name="mapping.map.scrollZoom">false</option>
        <option name="mapping.map.zoom">$zoom$</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="mapping.type">marker</option>
        <option name="drilldown">all</option>
      </map>
    </panel>
  </row>
</form>

The key element is this XML option

<option name="mapping.map.zoom">$zoom$</option>

which gets the $zoom$ from the drop down

<input type="dropdown" token="zoom" searchWhenChanged="true">
   <label>Zoom:</label>
   <choice value="1">1</choice>
   <choice value="3">3</choice>
   <choice value="6">6</choice>
   <default>1</default>
 </input>

Hope this helps to get you started ...

cheers, MuS

View solution in original post

MuS
SplunkTrust
SplunkTrust

Hi Phil219,

You can do this by passing the token for the zoom level to the dashboard; look at this XML which uses Twitter data - will maybe not work for you - but you will get the idea how it can be done:

<form>
  <label>drop down map</label>
  <fieldset submitButton="true">
    <input type="dropdown" token="zoom" searchWhenChanged="true">
      <label>Zoom:</label>
      <choice value="1">1</choice>
      <choice value="3">3</choice>
      <choice value="6">6</choice>
      <default>1</default>
    </input>
    <input type="dropdown" token="location" searchWhenChanged="false">
      <label>Country:</label>
      <search>
        <query>tag=twitter coordinates.type=Point | dedup user.location | table user.location | rename user.location AS location</query>
        <earliest>@d</earliest>
        <latest>now</latest>
      </search>
      <fieldForLabel>location</fieldForLabel>
      <fieldForValue>location</fieldForValue>
      <choice value="*">all</choice>
      <default>*</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <map>
        <search>
          <query>tag=twitter coordinates.type=Point user.location=$location$ | rename coordinates.coordinates{} as lnglat | eval lat=mvindex(lnglat,1) | eval lng=mvindex(lnglat,0) | geostats latfield=lat longfield=lng count</query>
          <earliest>@d</earliest>
          <latest>now</latest>
        </search>
        <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.drilldown">all</option>
        <option name="mapping.map.center">(0,0)</option>
        <option name="mapping.map.panning">true</option>
        <option name="mapping.map.scrollZoom">false</option>
        <option name="mapping.map.zoom">$zoom$</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="mapping.type">marker</option>
        <option name="drilldown">all</option>
      </map>
    </panel>
  </row>
</form>

The key element is this XML option

<option name="mapping.map.zoom">$zoom$</option>

which gets the $zoom$ from the drop down

<input type="dropdown" token="zoom" searchWhenChanged="true">
   <label>Zoom:</label>
   <choice value="1">1</choice>
   <choice value="3">3</choice>
   <choice value="6">6</choice>
   <default>1</default>
 </input>

Hope this helps to get you started ...

cheers, MuS

Phil219
Path Finder

Thanks MuS, I took time to try this out. The zoom dropdown works great!

I am trying to implement a dropdown for center:

 <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>
<input type="dropdown" token="city_token" searchWhenChanged="true">
  <label>Pick a City (must be on "All" to change State)</label>
  <search>
    <query>host=coolstuff  State=$state_token$  | stats count by City | sort -count</query>
    <earliest>0</earliest>
  </search>
  <fieldForLabel>City</fieldForLabel>
  <fieldForValue>City</fieldForValue>
  <choice value="*">All</choice>
  <default>*</default>
</input>

My problem comes trying to implement these tokens into this field:

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

So, I currently have "mapping.map.center" default to:

(52.7,-124.45)

I tried replacing numbers with variables (i.e.: (latfield, longfield) and (avg(latfield),avg(longfield)) but it wasn't working. Any suggestions?

0 Karma

Aftab_alam
Explorer

Hi Phil, were you able to make this work. I have similar usecase
UseCase - Use world map to show register health/activities across the globe

Data - storeData - has all store related info including latitude and longitude

activity log --- by store and register

what we need is build a dashboard with input as country/state/city. once one of selection is made we are supposed to zoom that area.

0 Karma

Phil219
Path Finder

Thanks MuS! I will give this a go and let you know what happens.

0 Karma
Get Updates on the Splunk Community!

Using Machine Learning for Hunting Security Threats

WATCH NOW Seeing the exponential hike in global cyber threat spectrum, organizations are now striving more for ...

New Learning Videos on Topics Most Requested by You! Plus This Month’s New Splunk ...

Splunk Lantern is a customer success center that provides advice from Splunk experts on valuable data ...

How I Instrumented a Rust Application Without Knowing Rust

As a technical writer, I often have to edit or create code snippets for Splunk's distributions of ...