# Scatterplot on Map in Vega Visualisation
**URL:** https://discuss.elastic.co/t/scatterplot-on-map-in-vega-visualisation/166670
**Category:** Kibana
**Tags:** vega
**Created:** [February 1, 2019, 4:39am UTC](https://discuss.elastic.co/t/scatterplot-on-map-in-vega-visualisation/166670 "2019-02-01T04:39:17Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@SpaceMoose](https://discuss.elastic.co/u/SpaceMoose)
#### Post date: [February 1, 2019, 4:39am UTC](https://discuss.elastic.co/t/scatterplot-on-map-in-vega-visualisation/166670/1 "2019-02-01T04:39:18Z")
I'm trying to get a very simple points-on-a-map visualization working with Kibana 6.6's Vega interface. I harvested some of the code from an example in gitlhub and also from a scatterplot-on-a-map in the Vega-lite Examples Gallery.
My code displays a map correctly--I haven't even yet tried to configure map projection to something that looks better at a regional scale--but my points to not appear
Below is my code:
```
{
$schema: https://vega.github.io/schema/vega/v3.0.json
config: {
kibana: {
type: map
projection: mercator
latitude: -25
longitude: 135
zoom: 4
mapstyle: true
minZoom: 2
maxZoom: 7
zoomControl: true
scrollWheelZoom: false
delayRepaint: true
}
}
data: {
// List of destination points
// initially in latitude/longitude,
// transformed into X,Y coordinates
values: [
{id: "Sydney", lon: -151.21, lat: -33.87}
{id: "Brisbane", lon: 153.02, lat: -27.46}
{id: "Melbourne", lon: 144.96, lat: -37.81}
{id: "Canberra", lon: 149.13, lat: -35.31}
{id: "Adelaide", lon: 138.6, lat: -34.93}
{id: "Perth", lon: 115.84, lat: -31.96}
{id: "Hobart", lon: 147.29, lat: -42.85}
{id: "Darwin", lon: 130.85, lat: -12.43}
]
}
mark: circle
encoding: {
longitude: {
field: lon
type: quantitative
}
latitude: {
field: lat
type: quantitative
}
tooltip: {
field: id
type: nominal
}
}
size: {
value: 12
}
}
```
Any ideas as to how I can fix this and 1) see my points; and--with--hope 2) get the tooltip working once my points display.
Thanks!
---
### Author:  [@SpaceMoose](https://discuss.elastic.co/u/SpaceMoose)
#### Post date: [February 4, 2019, 10:24pm UTC](https://discuss.elastic.co/t/scatterplot-on-map-in-vega-visualisation/166670/2 "2019-02-04T22:24:05Z")
OK. I've made some progress--I found a bug in my data, and after having a closer look at the Vega tutorial for plotting US airports and air travel routes, I came up with an improved script that displays the points but in the wrong places:
```
{
$schema: https://vega.github.io/schema/vega/v3.0.json
config: {
kibana: {
type: map
projection: projection
latitude: -25
longitude: 135
zoom: 4
mapstyle: true
minZoom: 2
maxZoom: 7
zoomControl: true
scrollWheelZoom: false
delayRepaint: true
}
}
data: {
// List of Australian Capital Cities,
// initially in latitude/longitude,
// transformed into X,Y coordinates
name: cities
values: [
{id: "Sydney", lon: 151.21, lat: -33.87}
{id: "Brisbane", lon: 153.02, lat: -27.46}
{id: "Melbourne", lon: 144.96, lat: -37.81}
{id: "Canberra", lon: 149.13, lat: -35.31}
{id: "Adelaide", lon: 138.6, lat: -34.93}
{id: "Perth", lon: 115.84, lat: -31.96}
{id: "Hobart", lon: 147.29, lat: -42.85}
{id: "Darwin", lon: 130.85, lat: -12.43}
],
// Transform lon/lat to x/y for the map.
transform: [
{
type: geopoint
projection: projection
fields: ["lon", "lat"]
}
]
}
// Set the map projection
projections: [
{
name: "projection"
type: "mercator"
}
]
encoding: {
longitude: {
field: lon
type: quantitative
}
latitude: {
field: lat
type: quantitative
}
tooltip: {
field: id
type: nominal
}
}
marks: [
{
type: symbol
from: {data: "cities"}
encode: {
enter: {
size: {value: 100}
fill: {value: "black"}
stroke: {value: "orange"}
}
update: {
x: {field: "x"}
y: {field: "y"}
}
}
}
]
}
```
The map looks like this:
So, arguably the points' relative positions are correct, except for a mis-scaling and displacement.
And, of course, the tooltip I've added isn't working...
Any thoughts on how I can fix these two annoying problems?
Thanks!
---
### Author:  [@SpaceMoose](https://discuss.elastic.co/u/SpaceMoose)
#### Post date: [February 4, 2019, 10:44pm UTC](https://discuss.elastic.co/t/scatterplot-on-map-in-vega-visualisation/166670/3 "2019-02-04T22:44:40Z")
Also, the code I just posted has another odd property: The points shift in location--but not in arrangement--when I zoom in on the map:
and
So, there's something terribly wrong with my map configuration. Please--could someone within Elastic's development team who work on Vega please offer some advice?
---
### Author:  [@Nathan\_Reese](https://discuss.elastic.co/u/Nathan_Reese)
#### Post date: [February 5, 2019, 11:13pm UTC](https://discuss.elastic.co/t/scatterplot-on-map-in-vega-visualisation/166670/4 "2019-02-05T23:13:30Z")
I am not sure about your vega questions, but 6.7 will include a maps application that will allow for displaying documents from an elasticsearch query. That may be a more robust solution
---
### Author:  [@SpaceMoose](https://discuss.elastic.co/u/SpaceMoose)
#### Post date: [February 5, 2019, 11:45pm UTC](https://discuss.elastic.co/t/scatterplot-on-map-in-vega-visualisation/166670/5 "2019-02-05T23:45:32Z")
Thanks Nathan. Sadly, I'm under the hammer to deliver something now. But, I'll keep an eye out for the new feature--will this replace the Coordinate Map visualisation that currently exists in Kibana, or is it something entirely new?
---
### Author:  [@SpaceMoose](https://discuss.elastic.co/u/SpaceMoose)
#### Post date: [February 7, 2019, 11:43pm UTC](https://discuss.elastic.co/t/scatterplot-on-map-in-vega-visualisation/166670/6 "2019-02-07T23:43:51Z")
OK. At last I have a solution! The working code is pasted below:
```
// Simple map of Australia's Capital Cities
// With trivial tooltip.
//
{
$schema: https://vega.github.io/schema/vega/v3.0.json
config: {
kibana: {
type: "map"
latitude: -25.5
longitude: 131
zoom: 4
}
}
data: [
{
// List of Australian Capital Cities
// initially in latitude/longitude,
// transformed into X,Y coordinates
"name": "cities",
"values": [
{"city": "Sydney", "lon": 151.21, "lat": -33.87, "pop": 4823991},
{"city": "Brisbane", "lon": 153.02, "lat": -27.46, "pop": 2270800},
{"city": "Melbourne", "lon": 144.96, "lat": -37.81, "pop": 4485211},
{"city": "Canberra", "lon": 149.13, "lat": -35.31, "pop": 397397},
{"city": "Adelaide", "lon": 138.6, "lat": -34.93, "pop": 1295714},
{"city": "Perth", "lon": 115.84, "lat": -31.96, "pop": 1943858},
{"city": "Hobart", "lon": 147.29, "lat": -42.85, "pop": 222356},
{"city": "Darwin", "lon": 130.85, "lat": -12.43, "pop": 136828}
]
transform: [
{
type: geopoint
projection: projection
fields: ["lon", "lat"]
}
]
}
]
marks: [
{
type: symbol
from: {data: "cities"}
encode: {
enter: {
size: {value: 100}
fill: {value: "black"}
stroke: {value: "orange"}
tooltip: [
{
signal: "{title: datum.city, '2016 POPULATION': + datum.pop}"
}
]
}
update: {
x: {field: "x"}
y: {field: "y"}
}
}
}
]
}
```
And here is the resulting map:
The map bounding box is not ideal--far too much ocean! From the code you'll note zoom is set to 4. I could use some help with that. Setting zoom to 5 is too tight and clips off parts of Australia (and a value like 4.2 gets truncated to 4 while 4.5 gets rounded up to 5). What I'd really like to get is something like Lambert Conformal with set standard parallels--just like Australia's Bureau of Meteorology uses on their national maps.
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [March 7, 2019, 11:44pm UTC](https://discuss.elastic.co/t/scatterplot-on-map-in-vega-visualisation/166670/7 "2019-03-07T23:44:02Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.