# How visualize location on map with Vega Plugin

**URL:** https://discuss.elastic.co/t/how-visualize-location-on-map-with-vega-plugin/124763
**Category:** Kibana
**Created:** [March 20, 2018, 12:54pm UTC](https://discuss.elastic.co/t/how-visualize-location-on-map-with-vega-plugin/124763 "2018-03-20T12:54:19Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![fifilanthrope](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/fifilanthrope/32/29042_2.png) [@fifilanthrope](https://discuss.elastic.co/u/fifilanthrope)
#### Post date: [March 20, 2018, 12:54pm UTC](https://discuss.elastic.co/t/how-visualize-location-on-map-with-vega-plugin/124763/1 "2018-03-20T12:54:19Z")

</div>

Hi, I am new to kibana and vega, I am trying to create a map visualization like [this exemple](https://vega.github.io/vega-lite/examples/geo_choropleth.html).  
I have a index called geoloc with document containing "location" as a geo\_point type and a "pop" field as a number type.  
I want to present the sum of pop field by location on my map but I don't know how to recovery the data needed.  
I was able to make it with kibana but I can't make it in vega.

> **Here is my query :**
>
> ```auto
> data: {
> url: {
> index: geoloc
> %context%: true
> %timefield%: @timestamps
> body: {
> aggs: {
> table: {
> composite: {
> sources: [
> {
> location: {
> geohash_grid: {field: "location", precision: 3}
> }
> }
> {
> population: {
> sum: {field: "pop"}
> }
> }
> ]
> }
> }
> }
> }
> }
> }
> 
> ```

---

<div class="post-metadata">

### Author: ![nyuriks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nyuriks/32/26171_2.png) [@nyuriks](https://discuss.elastic.co/u/nyuriks)
#### Post date: [March 20, 2018, 9:04pm UTC](https://discuss.elastic.co/t/how-visualize-location-on-map-with-vega-plugin/124763/2 "2018-03-20T21:04:10Z")

</div>

@fifilanthrope, the cloropleth example you linked is not very good with your aggregation. Cloropleth vis requires closed polygons (shapes/regions), with each region filled with a different color. If your data is a set of points, you need to convert each point into some "region code". I think there was some effort in Elasticsearch to support that conversion automatically (e.g. you pass shapes to ES, and it aggregates points into clusters based on those shapes). When you use grid aggregation, you can only clump points together into a grid. You can use Vega to draw those points, e.g. [this example](https://vega.github.io/vega-lite/examples/geo_circle.html), but to do that you will have to somehow calculate latitude and longitude from the geohash, which is not very simple (see [algorithm](https://en.wikipedia.org/wiki/Geohash#Algorithm_and_example)

---

<div class="post-metadata">

### Author: ![fifilanthrope](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/fifilanthrope/32/29042_2.png) [@fifilanthrope](https://discuss.elastic.co/u/fifilanthrope)
#### Post date: [March 21, 2018, 9:04am UTC](https://discuss.elastic.co/t/how-visualize-location-on-map-with-vega-plugin/124763/3 "2018-03-21T09:04:11Z")

</div>

I have in my index a field `state` containing the first 2 letters of each states as a string, can i use it ?  
Do you have any simple example of queries ? I don't really understand how queries must be write in vega.

---

<div class="post-metadata">

### Author: ![nyuriks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nyuriks/32/26171_2.png) [@nyuriks](https://discuss.elastic.co/u/nyuriks)
#### Post date: [March 21, 2018, 11:50pm UTC](https://discuss.elastic.co/t/how-visualize-location-on-map-with-vega-plugin/124763/4 "2018-03-21T23:50:07Z")

</div>

@fifilanthrope there is a difference between "first two letters" and the "US state code". For example, for North Carolina, the code is "NC", but the first two letters are "No". If you had the state codes, you can simply use the region map visualization. Or you can use that same file from Vega. As far as the ES query - you used it correctly in your initial post - you just need to change it to get the data you need for the visualization - e.g. group by the state ID (see [term aggregation](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations-bucket-terms-aggregation.html)), and sum up up each bucket by the `pop` field. You will also need to use [emsfile service](https://www.elastic.co/guide/en/kibana/current/vega-esmfiles.html) in Vega to get the outlines of each state. See [this example](https://github.com/nyurik/kibana-vega-vis/blob/master/examples/logstash/logstash-simple-map.hjson).

---

<div class="post-metadata">

### Author: ![fifilanthrope](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/fifilanthrope/32/29042_2.png) [@fifilanthrope](https://discuss.elastic.co/u/fifilanthrope)
#### Post date: [March 22, 2018, 3:38pm UTC](https://discuss.elastic.co/t/how-visualize-location-on-map-with-vega-plugin/124763/5 "2018-03-22T15:38:36Z")

</div>

With your help @nyuriks, I am almost complete my visualization.  
I receive the 'State code' and the 'population number'.  
My visualization doesn't return any error but it doesn't work I don't see where is the problem.

> **my visualization**
>
> ```auto
> {
> $schema: https://vega-lite.github.io/schema/vega/v2.0.json
> config: {
> kibana: {
> type: map
> latitude: 10
> longitude: -5
> zoom: 2
> }
> }
> data: {
> url: {
> index: geoloc
> body: { _source: ["state"]}
> format: {type: "topojson", feature: "counties"}
> }
> }
> transform: [
> {
> lookup: _id
> from: {
> data: {url: {
> index: geoloc
> body: { _source: ["pop"]}
> format: {property: "hits.hits"}
> }
> }
> key: _id
> fields: ["pop"]
> }
> }
> ]
> projection: {type: "albersUsa"}
> mark: "geoshape",
> encoding: {
> color: {
> field: "pop",
> type: "quantitative"
> }
> }
> }
> 
> ```

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)
#### Post date: [April 19, 2018, 3:39pm UTC](https://discuss.elastic.co/t/how-visualize-location-on-map-with-vega-plugin/124763/6 "2018-04-19T15:39:03Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.
