Keep zoom and position from a Leaflet map

Community Help
1

Is there a way to keep zoom and position in a Leaflet map whereas the displayed layer
comes from from a reavaluated cell ?

Play with: WMS GCA / Patrick Brockmann / Observable
by changing the ressource after having zoomed and panned.
When the new ressource is choosen, the cell map is revaluated and
then loose the zoom and position.

Is there a way to keep this information ?

Same problems occurs when a inputs.radios choice has been done by the user.
When the cell is evaluated, the default setting is done.
How to keep the user choice between reevaluation of cells ?

2

Simplest is put the zoom state in a different cell (e.g. a viewof Inputs.input(…) or mutable).

3

I agree with Tom, but let’s mention an alternative, which is to look for this when you evaluate the cell. It contains the previous value, and you can pick from it in case it is not undefined.

1 Like
4

A example would be nice to understand how to test this and this.

Leaflet API has a getZoom() to get the map parameters that is displayed. But here again
how to reuse them if they exist.

5

you need to fix your notebook first, currently it is all red with a fail to fetch on ‘https://www.globalcarbonatlas.org:8443/thredds/catalog/Atlas/Flux_Transcom/catalog.xml’ so I do not have a base to start from

6

Please accept the self signed certificat first from the link.
Then reload the notebook.

7

I’ve sent you a suggestion using this

8

Here is a solution to re-use pre-existing value from a user choice on a radio input.

viewof variable = {
  if (typeof this !== "undefined" && variablesArray.includes(this.value)) {
    var variableToSet = this.value;
  } else {
    var variableToSet = variablesArray[0];
  }
  var variable = Inputs.radio(variablesArray, {
    value: variableToSet,
    label: "Variable"
  });
  return variable;
}

For the Leaflet map, a solution proposed by @Fil is available from the notebook.

{
  const bounds =  this && this.map ? this.map.getBounds() : null;

  const container = html`<div style="width:800px;height:400px;"><div id="map" style="position:absolute;left:0px;width:700px;height:400px;"></div>`;
  yield container;

  const map = (container.map = L.map("map"));

  if (bounds) {
    map.fitBounds(bounds);
  } else {
    map.setView([0, 0], 1);
  }
}