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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...