# Visualize locations on map using Vega Plugin
**URL:** https://discuss.elastic.co/t/visualize-locations-on-map-using-vega-plugin/115289
**Category:** Kibana
**Created:** [January 12, 2018, 12:06pm UTC](https://discuss.elastic.co/t/visualize-locations-on-map-using-vega-plugin/115289 "2018-01-12T12:06:17Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@romanc](https://discuss.elastic.co/u/romanc)
#### Post date: [January 12, 2018, 12:06pm UTC](https://discuss.elastic.co/t/visualize-locations-on-map-using-vega-plugin/115289/1 "2018-01-12T12:06:17Z")
I am trying to understand how to visualize data on a map using Vega Plugin.
I have a index called test with document containing location as a geo\_point type which I would like to visualize on a map:
> ```
> TEST
> {
> "mappings": {
> "doc": {
> "properties": {
> "location": {
> "type": "geo_point"
> }
> }
> }
> }
> }
>
> ```
So I created the following Vega configuration:
> ```
> {
> "$schema": "https://vega.github.io/schema/vega/v3.0.json",
> "config": {
> "kibana": {
> "type": "map",
> "latitude": 40.0,
> "longitude": -74.0,
> "zoom": 8,
> "mapStyle": "default",
> "minZoom": 5,
> "maxZoom": 13,
> "zoomControl": true,
> "delayRepaint": true,
> "controlsDirection": "horizontal"
> }
> },
>
> "data": [
> {
> "name": "myEsDataSource",
> "url": {
> "index": "test",
> "body": {
> "_source": ["location"],
> "query": {
> "match_all": {}
> }
> }
> }
> "format": {"type": "json", "property": "hits.hits"},
> "transform": [
> {
> "type": "formula",
> "as": "lon",
> "expr": "datum._source.location.lon"
> },
> {
> "type": "formula",
> "as": "lat",
> "expr": "datum._source.location.lat"
> },
> {
> "type": "geopoint",
> "projection": "projection",
> "fields": [
> {"expr": "datum._source.location.lon"},
> {"expr": "datum._source.location.lat"}
> ],
> "as": ["x", "y"]
> }
> ]
> },
>
> ],
> }
>
> ```
The map shows but it contains no data.
How to tell Vega to show these location data on a map?
---
### Author:  [@nyuriks](https://discuss.elastic.co/u/nyuriks)
#### Post date: [January 13, 2018, 10:00pm UTC](https://discuss.elastic.co/t/visualize-locations-on-map-using-vega-plugin/115289/2 "2018-01-13T22:00:13Z")
@romanc, were you able to resolve this issue? I saw [your comment](https://discuss.elastic.co/t/monitoring-with-maps-in-kibana/115262/3) where you said something showed up on the graph. Thanks!
---
### Author:  [@romanc](https://discuss.elastic.co/u/romanc)
#### Post date: [January 13, 2018, 10:37pm UTC](https://discuss.elastic.co/t/visualize-locations-on-map-using-vega-plugin/115289/3 "2018-01-13T22:37:48Z")
Not fully yet. I am still trying to figure out how to create configuration when the popup will show on user action on point.
Some example would be very helpfull. I can learn on that what and how can be used in Vega. Would you be able to demonstrate it on the example of custom map from Vega Github?:
>
---
### Author:  [@nyuriks](https://discuss.elastic.co/u/nyuriks)
#### Post date: [January 13, 2018, 11:18pm UTC](https://discuss.elastic.co/t/visualize-locations-on-map-using-vega-plugin/115289/4 "2018-01-13T23:18:28Z")
@romanc The very simple path is to add "tooltip" field for the "enter" section of the symbol mark (or whichever mark should have a toolip). See [docs](https://vega.github.io/vega/docs/marks/symbol/). The more appropriate (but fairly complex) example is [logstash-geosrc-map-with-destinations.hjson](https://github.com/nyurik/kibana-vega-vis/blob/master/examples/logstash/logstash-geosrc-map-with-destinations.hjson) - to use it, first generate some dummy data using [makelogs](https://github.com/elastic/makelogs#makelogs) (not on production cluster!). That graph creates a "hover" signal when the user mouse is over the countrymark symbol (signal is equal to the data object for that symbol), or becomes null on mouseout. There is also a group mark (line 137) that draws a rectangle with a pie chart for the currently selected item. The drawing is fairly involved because it needs to access sub-aggregation for the current country, take only the first N elements and group the rest, etc, but this is not relevant for this question. You would probably want to modify the signal to become activated on click rather than mouse over. Good luck!
---
### Author:  [@romanc](https://discuss.elastic.co/u/romanc)
#### Post date: [January 14, 2018, 1:46pm UTC](https://discuss.elastic.co/t/visualize-locations-on-map-using-vega-plugin/115289/5 "2018-01-14T13:46:51Z")
@nyuriks Thank you very much, this was very helpful. Tooltips and Hrefs works like expected and Group marks are very good way to show a custom rectangle with specific data and other visualizations :}
I have two questions:
1. what you mean by
> You would probably want to modify the signal to become activated on click rather than mouse over.
it means modifying Vega plugin or to create custom signal configuration inside visualization for click?
1. Is it possible to somehow create user input text area where user will input comment and it will be indexed in current document in elasticsearch? Is it possible with Vega? I am not aware of such functionality in Kibana itself, but would like to have it.
---
### Author:  [@nyuriks](https://discuss.elastic.co/u/nyuriks)
#### Post date: [January 14, 2018, 5:51pm UTC](https://discuss.elastic.co/t/visualize-locations-on-map-using-vega-plugin/115289/6 "2018-01-14T17:51:58Z")
@romanc, I meant you can set your own conditions for your own graph in the vega JSON. See [https://github.com/nyurik/kibana-vega-vis/blob/master/examples/logstash/logstash-geosrc-map-with-destinations.hjson#L320](https://github.com/nyurik/kibana-vega-vis/blob/master/examples/logstash/logstash-geosrc-map-with-destinations.hjson#L320) -- the current signal there has two `on` conditions -- on `@countrymark:mouseover` the value is set to the "datum" - the data behind the currently drawn object. And on `@countrymark:mouseout` it is set to `null`. In your graph you could for example use `@countrymark:click` to set the value. There are some examples in the vega docs that do that. Also check out [Vega examples in the editor](https://vega.github.io/editor/#/).
---
### Author:  [@romanc](https://discuss.elastic.co/u/romanc)
#### Post date: [January 15, 2018, 8:39pm UTC](https://discuss.elastic.co/t/visualize-locations-on-map-using-vega-plugin/115289/7 "2018-01-15T20:39:37Z")
Thank you, @nyuriks, for your help.
My last issue is that I am not able to encode href in mark type symbol with parameter. If you can help, please [Vega encode URL with parameter in Mark Symbol href](https://discuss.elastic.co/t/vega-encode-url-with-parameter-in-mark-symbol-href/115593).
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [February 12, 2018, 8:39pm UTC](https://discuss.elastic.co/t/visualize-locations-on-map-using-vega-plugin/115289/8 "2018-02-12T20:39:45Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.