kibana/docs/maps/maps-getting-started.asciidoc
Nathan Reese 9f54841095
[Maps] Getting started docs - Adding the map to a dashboard (#35636)
* [Maps] Getting started docs - Adding the map to a dashboard

* clean up instructions

* Update docs/maps/maps-getting-started.asciidoc

Co-Authored-By: nreese <reese.nathan@gmail.com>

* Update docs/maps/maps-getting-started.asciidoc

Co-Authored-By: nreese <reese.nathan@gmail.com>

* Update docs/maps/maps-getting-started.asciidoc

Co-Authored-By: nreese <reese.nathan@gmail.com>

* Update docs/maps/maps-getting-started.asciidoc

Co-Authored-By: nreese <reese.nathan@gmail.com>

* Update docs/maps/maps-getting-started.asciidoc

Co-Authored-By: nreese <reese.nathan@gmail.com>

* Update docs/maps/maps-getting-started.asciidoc

Co-Authored-By: nreese <reese.nathan@gmail.com>

* Update docs/maps/maps-getting-started.asciidoc

Co-Authored-By: nreese <reese.nathan@gmail.com>

* Update docs/maps/maps-getting-started.asciidoc

Co-Authored-By: nreese <reese.nathan@gmail.com>

* combine Filtering sections into single section as suggested

* fix zoom instructions and clean up save map section

* add more wording about why the tutorial is adding a terms join

* talk about static and data-driving styling in Set the vector style section

* more review comments

* add screen shot of document layer

* Update docs/maps/maps-getting-started.asciidoc

Co-Authored-By: gchaps <33642766+gchaps@users.noreply.github.com>

* avoid using lets since there is no we
2019-05-10 13:49:07 -06:00

233 lines
8.5 KiB
Text

[role="xpack"]
[[maps-getting-started]]
== Getting started with Maps
You work with *Maps* by adding layers. The data for a layer can come from
sources such as {es} documents, vector sources, tile map services, web map
services, and more. You can symbolize the data in different ways.
For example, you might show which airports have the longest flight
delays by using circles from small to big. Or,
you might show the amount of web log traffic by shading countries from
light to dark.
[role="screenshot"]
image::maps/images/sample_data_web_logs.png[]
[float]
=== Prerequisites
Before you start this tutorial, <<add-sample-data, add the web logs sample data set>>. Each
sample data set includes a map to go along with the data. Once you've added the data, open *Maps* and
explore the different layers of the *[Logs] Total Requests and Bytes* map.
You'll re-create this map in this tutorial.
[float]
=== Take-away skills
In this tutorial, you'll learn to:
* Create a multi-layer map
* Connect a layer to a data source
* Use symbols, colors, and labels to style a layer
* Create layers for {es} data
[role="xpack"]
[[maps-create]]
=== Creating a new map
The first thing to do is to create a new map.
. If you haven't already, open *Maps*.
. On the maps list page, click *Create map*.
. Set the time range to *Last 7 days*.
+
A new map is created using a base tile layer.
+
[role="screenshot"]
image::maps/images/gs_create_new_map.png[]
[role="xpack"]
[[maps-add-choropleth-layer]]
=== Adding a choropleth layer
Now that you have a map, you'll want to add layers to it.
The first layer you'll add is a choropleth layer to shade world countries
by web log traffic. Darker shades symbolize countries with more web log traffic,
and lighter shades symbolize countries with less traffic.
==== Add a vector layer from the Elastic Maps Service source
. In the map legend, click *Add layer*.
. Click the *Vector shapes* data source.
. From the *Layer* dropdown menu, select *World Countries*.
. Click the *Add layer* button.
. Set *Layer name* to `Total Requests by Country`.
. Set *Layer transparency* to 0.5.
===== Join the vector layer with the sample web log index
You now have a vector layer containing the world countries.
To symbolize countries by web traffic, you'll need to augment the world country features with the count of Elasticsearch weblog documents originating from each country.
To do this, you'll create a <<terms-join, terms join>> to link the vector source *World Countries* to
the {es} index `kibana_sample_data_logs` on the shared key iso2 = geo.src.
. Click plus image:maps/images/gs_plus_icon.png[] to the right of *Term Joins* label.
. Click *Join --select--*
. Set *Left field* to *ISO 3166-1 alpha-2 code*.
. Set *Right source* to *kibana_sample_data_logs*.
. Set *Right field* to *geo.src*.
===== Set the vector style
All of the world countries are still a single color because the layer is using <<maps-vector-style-static, static styling>>.
To shade the world countries based on which country is sending the most requests, you'll need to use <<maps-vector-style-data-driven, data driven styling>>.
. Click image:maps/images/gs_link_icon.png[] to the right of *Fill color*.
. Select the grey color ramp.
. In the field select input, select *count of kibana_sample_data_logs:geo.src*.
. Click *Save & close*.
+
Your map now looks like this:
+
[role="screenshot"]
image::maps/images/gs_add_cloropeth_layer.png[]
[role="xpack"]
[[maps-add-elasticsearch-layer]]
=== Adding layers for {es} data
To avoid overwhelming the user with too much data at once, you'll add two layers for {es} data.
* The first layer will display individual documents.
The layer will appear when the user zooms in the map to show smaller regions.
* The second layer will show aggregated data that represents many documents.
The layer will appear when the user zooms out the map to show larger amounts of the globe.
==== Add a vector layer from the document source
This layer displays web log documents as points.
The layer is only visible when users zoom in the map past zoom level 9.
. In the map legend, click *Add layer*.
. Click the *Documents* data source.
. Set *Index pattern* to *kibana_sample_data_logs*.
. Click the *Add layer* button.
. Set *Layer name* to `Actual Requests`.
. Set *Zoom range for layer visibility* to the range [9, 24].
. Set *Layer transparency* to 1.
. Set *Fill color* to *#2200ff*.
. Click *Save & close*.
+
Your map now looks like this between zoom levels 9 and 24:
+
[role="screenshot"]
image::maps/images/gs_add_es_document_layer.png[]
==== Add a vector layer from the grid aggregation source
Aggregations group {es} documents into grids. You can calculate metrics
for each gridded cell.
You'll create a layer for aggregated data and make it visible only when the map
is zoomed out past zoom level 9. Darker colors will symbolize grids
with more web log traffic, and lighter colors will symbolize grids with less
traffic. Larger circles will symbolize grids with
more total bytes transferred, and smaller circles will symbolize
grids with less bytes transferred.
[role="screenshot"]
image::maps/images/grid_metrics_both.png[]
===== Add the layer
. In the map legend, click *Add layer*.
. Click the *Grid aggregation* data source.
. Set *Index pattern* to *kibana_sample_data_logs*.
. Click the *Add layer* button.
. Set *Layer name* to `Total Requests and Bytes`.
. Set *Zoom range for layer visibility* to the range [0, 9].
. Set *Layer transparency* to 1.
===== Configure the aggregation metrics
. Click plus image:maps/images/gs_plus_icon.png[] to the right of *Metrics* label.
. Select *Sum* in the aggregation select.
. Select *bytes* in the field select.
===== Set the vector style
. In *Vector style*, change *Symbol size*:
.. Set *Min size* to 1.
.. Set *Max size* to 25.
.. In the field select, select *sum of bytes*.
. Click *Save & close* button.
+
Your map now looks like this between zoom levels 0 and 9:
+
[role="screenshot"]
image::maps/images/gs_add_es_layer.png[]
[role="xpack"]
[[maps-save]]
=== Saving the map
Now that your map is complete, you'll want to save it so others can use it.
. In the application toolbar, click *Save*.
. Enter `Tutorial web logs map` for the title.
. Click *Confirm Save*.
+
You have completed the steps for re-creating the sample data map.
*Next steps:*
* Continue with this tutorial and <<maps-embedding, use your map in a Kibana dashboard>>.
* Create a map using your own data. You might find these resources helpful:
** <<heatmap-layer, Heat map layer>>
** <<tile-layer, Tile layer>>
** <<vector-layer, Vector layer>>
[role="xpack"]
[[maps-embedding]]
=== Adding the map to a dashboard
You can add your saved map to a {kibana-ref}/dashboard.html[dashboard] and view your geospatial data alongside bar charts, pie charts, and other visualizations.
. In the side navigation, click *Dashboard*.
. Click *Create new dashboard*.
. Set the time range to *Last 7 days*.
. Click *Add*.
+
A panel opens with a list of objects that you can add to the dashboard. You'll add a map and two visualizations.
+
. Set the *Types* select to *Map*.
. Click the name of your saved map or the *[Logs] Total Requests and Bytes* map included with the sample data set to add a map to the dashboard.
. Set the *Types* select to *Visualization*.
. Click *[Logs] Heatmap* to add a heatmap to the dashboard.
. Click *[Logs] Visitors by OS* to add a pie chart to the dashboard.
. Close the panel.
+
Your dashboard should look like this:
+
[role="screenshot"]
image::maps/images/gs_dashboard_with_map.png[]
==== Exploring your data using filters
You can apply filters to your dashboard to hone in on the data that you are most interested in.
The dashboard is interactive--you can quickly create filters by clicking on the desired data in the map and visualizations.
The panels are linked, so that when you apply a filter in one panel, the filter is applied to all panels on the dashboard.
. In the *[Logs] Visitors by OS* visualization, click on the *osx* pie slice.
+
Both the visualizations and map are filtered to only show documents where *machine.os.keyword* is *osx*.
The *machine.os.keyword: osx* filter appears in the dashboard query bar.
+
. Click the *x* to remove the *machine.os.keyword: osx* filter.
. In the map, click in the United States vector.
. Click plus image:maps/images/gs_plus_icon.png[] to the right of *iso2* row in the tooltip.
+
Both the visualizations and the map are filtered to only show documents where *geo.src* is *US*.
The *geo.src: US* filter appears in the dashboard query bar.
+
Your dashboard should look like this:
+
[role="screenshot"]
image::maps/images/gs_dashboard_with_terms_filter.png[]