Pan & Zoom - Vega-lite map

Community Help
1

Fairly new to coding/JS/Observable

I have been searching forum, observable, stack overflow, youtube, etc for an example of a vega-lite map that allows the user to zoom and pan via mouse events. I was able to find this example (Zoomable World Map Example | Vega) in vega, but I’m having trouble translating it into what it would like using the vega-lite api. This example (Interaction / UW Interactive Data Lab / Observable) shows how to achieve this with a scatterplot, but it doesn’t translate to a map.

Would anyone have an example I could look at?

2

Can you share you notebook of what you have tried so far?

The Introduction to Vega-Lite / UW Interactive Data Lab / Observable section might help when doing a quick import of the json example

3

Oh, good pointer! I’ve seen that notebook many times but did not catch that part that explains the api to json conversion. I’ll look into it now.

Here’s the notebook I have: Vega Lite Zoom on a Map / Aldo Viramontes / Observable

I have been successful creating maps and adding sliders for zooming and panning, so there are some commented snippets for that at the bottom of that cell.

4

I had a quick play, I don’t really know VL but got some of it working. I hope it can help you carry on.

5

Zooming and panning a projected map is much harder to implement under the hood than for a simple Cartesian projection as you see in common charts. Hence the ‘bind scales’ examples you have found only only work for charts with simple X,Y positioning.

There is currently no map scale binding in the same way. Instead, you can bind interactive sliders to various map projection properties that give you a form of map zooming and panning.

I’ve tried to create a simple example here, which I hope you can adapt for your case:

1 Like