How to use scroll zoom in existing Coordinate Map

[Anikesh_Paul]

Hi,

I was trying to implement mouse scroll zoom in/out in coordinate map graph under visualization. But I'm getting only tool tip with +/- for zooming. Is there any possible way to achieve mouse scroll zoom in/out in coordinate map by altering the settings or so. Please help me get this zooming feature. Thanks in advance for your help.

Thanks

[Aaron_Caldwell]

Hello Anikesh,

I'm guessing you're using a Dashboard. This capability was intentionally disabled in Dashboard to prevent the user from accidentally getting stuck zooming on the map when they were scrolling down the dashboard. Moving forward, the majority of the Geo focus will be on the new Maps app so this functionality is unlikely to change in our Legacy Coordinate Maps. Unfortunately the setting isn't configurable so it can't be changed.

Regards,
Aaron

[Anikesh_Paul]

Hello Aaron,

I still have few doubts:

First, when you talk about the new Maps app, did you mean elastic maps? And if its is elastic maps , then as per my knowledge it comes with X PACK. Please correct me if I'm wrong.

Second, I was exploring Vega code part of visualization and come across a code(mentioned below) which is able to mouse scroll zoom in/out. Is there any way we can incorporate this Vega code in existing coordinate map widget of Visualization in Kibana 6.6.

Vega Code
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 900,
"height": 500,
"autosize": "none",
"signals": [
{ "name": "tx", "update": "width / 2" },
{ "name": "ty", "update": "height / 2" },
{
"name": "scale",
"value": 150,
"on": [{
"events": {"type": "wheel", "consume": true},
"update": "clamp(scale * pow(1.0005, -event.deltaY * pow(16, event.deltaMode)), 150, 3000)"
}]
},
{
"name": "angles",
"value": [0, 0],
"on": [{
"events": "mousedown",
"update": "[rotateX, centerY]"
}]
},
{
"name": "cloned",
"value": null,
"on": [{
"events": "mousedown",
"update": "copy('projection')"
}]
},
{
"name": "start",
"value": null,
"on": [{
"events": "mousedown",
"update": "invert(cloned, xy())"
}]
},
{
"name": "drag", "value": null,
"on": [{
"events": "[mousedown, window:mouseup] > window:mousemove",
"update": "invert(cloned, xy())"
}]
},
{
"name": "delta", "value": null,
"on": [{
"events": {"signal": "drag"},
"update": "[drag[0] - start[0], start[1] - drag[1]]"
}]
},
{
"name": "rotateX", "value": 0,
"on": [{
"events": {"signal": "delta"},
"update": "angles[0] + delta[0]"
}]
},
{
"name": "centerY", "value": 0,
"on": [{
"events": {"signal": "delta"},
"update": "clamp(angles[1] + delta[1], -60, 60)"
}]
}
],
"projections": [
{
"name": "projection",
"type": "mercator",
"scale": {"signal": "scale"},
"rotate": [{"signal": "rotateX"}, 0, 0],
"center": [0, {"signal": "centerY"}],
"translate": [{"signal": "tx"}, {"signal": "ty"}]
}
],
"data": [
{
"name": "world",
"url": "data/world-110m.json",
"format": {
"type": "topojson",
"feature": "countries"
}
},
{
"name": "graticule",
"transform": [
{ "type": "graticule", "step": [15, 15] }
]
}
],
"marks": [
{
"type": "shape",
"from": {"data": "graticule"},
"encode": {
"enter": {
"strokeWidth": {"value": 1},
"stroke": {"value": "#ddd"},
"fill": {"value": null}
}
},
"transform": [
{ "type": "geoshape", "projection": "projection" }
]
},
{
"type": "shape",
"from": {"data": "world"},
"encode": {
"enter": {
"strokeWidth": {"value": 0.5},
"stroke": {"value": "#bbb"},
"fill": {"value": "#e5e8d3"}
}
},
"transform": [
{ "type": "geoshape", "projection": "projection" }
]
}
]
}

Thanks,
Anikesh