Zoom and Pan on map

[farhanreynaldo]

Thank you for this amazing library.

I'm currently working to plot an interactive map, which requires zooming and panning. After reviewing the discussion on #1590, I learned that you can mimic the zoom capabilities by manually modifying the .translate and .scale in the projection.

However, how do I zoom and pan on maps properly? Below is the code to zoom and pan using Inputs:

const x = view(Inputs.range([100, 500], {value: 500, step: 10, label: "x"}));
const y = view(Inputs.range([100, 500], {value: 500, step: 10, label: "y"}));
const scale = view(Inputs.range([100, 600], {value: 250, step: 10, label: "scale"}));

const mapPlot = resize((width) => Plot.plot({
    width,
    projection: ({width, height}) => d3.geoEqualEarth()
    .translate([x, y])
    .scale(scale)
    .clipAngle(0),
    marks: [
        Plot.sphere(),
        Plot.raster(data,
            x: "lon",
            y: "lat",
            fill: "value",
            interpolate: "barycentric",
            clip: "sphere"
        }),
        Plot.geo(countries, {
            fill: "none",
            stroke: "white"
        }),
        Plot.tip(data, Plot.pointer({
          x: "lon",
          y: "lat",
          fill: "value"
        }))
    ]
}));