# How to use scroll zoom in existing Coordinate Map

**URL:** <https://discuss.elastic.co/t/how-to-use-scroll-zoom-in-existing-coordinate-map/221702>\
**Category:** Kibana\
**Created:** [March 2, 2020, 2:38pm UTC](https://discuss.elastic.co/t/how-to-use-scroll-zoom-in-existing-coordinate-map/221702 "2020-03-02T14:38:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anikesh\_Paul](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/anikesh_paul/32/54900_2.png) [@Anikesh\_Paul](https://discuss.elastic.co/u/Anikesh_Paul)\
**Post date:** [March 2, 2020, 2:38pm UTC](https://discuss.elastic.co/t/how-to-use-scroll-zoom-in-existing-coordinate-map/221702/1 "2020-03-02T14:38:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Aaron\_Caldwell](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron_caldwell/32/45755_2.png) [@Aaron\_Caldwell](https://discuss.elastic.co/u/Aaron_Caldwell)\
**Post date:** [March 2, 2020, 6:12pm UTC](https://discuss.elastic.co/t/how-to-use-scroll-zoom-in-existing-coordinate-map/221702/2 "2020-03-02T18:12:15Z")

</div>

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](https://www.elastic.co/guide/en/kibana/current/maps.html) 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

---

<div class="post-metadata">

**Author:** ![Anikesh\_Paul](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/anikesh_paul/32/54900_2.png) [@Anikesh\_Paul](https://discuss.elastic.co/u/Anikesh_Paul)\
**Post date:** [March 3, 2020, 7:24am UTC](https://discuss.elastic.co/t/how-to-use-scroll-zoom-in-existing-coordinate-map/221702/3 "2020-03-03T07:24:38Z")

</div>

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](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

---

<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:** [March 31, 2020, 7:24am UTC](https://discuss.elastic.co/t/how-to-use-scroll-zoom-in-existing-coordinate-map/221702/4 "2020-03-31T07:24:49Z")

</div>

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