Trouble when refresh a notebook with leaflet

Community Help
1

Hello,
In my new notebook antarctica-leaflet, after a refresh, I encouter this error message: map2 = TypeError: Cannot read properties of undefined (reading ‘CRS’)
To display the map, I need to play the cell where map2 is defined . It seems to be linked to the “require” of L[proj] but I can’t figure out how to solve this.

Any suggestion is welcome. Thank you.
jb

1 Like
2

L.Proj is not part of the standard Leaflet distribution; rather, you’ve added it on in the penultimate cell, which looks like so:

(L["Proj"] = await require("https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js"))

You can simply name that cell and then insert that name into the definition of map2 to ensure that L.Proj is defined when map2 runs. Here’s an example:

3

Thank you so much for your help.

4

As a perhaps “cleaner” alternative you can pass the leaflet dependency to proj4leaflet via require.alias:

L = {
  const L = await require("leaflet@1");
  await require.alias({leaflet: L})("proj4leaflet@1.0.2");
  // ...
  return L;
}
5

There’s also no need to store a reference to the link element if you remove it when the cell is invalidated. With all of these changes applied, the final code could look like this:

L = {
  // Resolve base URL once to avoid additional requests.
  // "." at the end prevents d3-require from appending ".js"
  const base = await require.resolve("leaflet@1/dist/.");
  const style = document.head.appendChild(html`<link href="${base}/leaflet.css" rel=stylesheet>`);
  // Remove <link> element when this cell is rerun.
  invalidation.then(() => style.remove());
  
  const L = await require(`${base}/leaflet.js`);
  await require.alias({leaflet: L})("proj4leaflet@1.0.2");
  return L;
}
6

I now see better how to deal with. thank you very much.