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!

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 ...

Splunk Community Platform Survey

Hey Splunk Community, Starting today, the community platform may prompt you to participate in a survey. The ...

Observability Highlights | November 2022 Newsletter

 November 2022Observability CloudEnd Of Support Extension for SignalFx Smart AgentSplunk is extending the End ...