* [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
233 lines
8.5 KiB
Text
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[]
|
|
|