ojs Leaflet ≠ js Leaflet ?

Feedback
1

There are differences in how Leaflet behaves in JS and OJS.
Here’s an example with zoomSnap.
https://observablehq.com/@neocarto/feedback-leaflet-zoom-snap

(I’m not sure whether this belongs under the Feedback or Help section)

In any case, having snippets for this kind of thing would be really useful.

2

You need to display the map container before you pass it to Leaflet. Leaflet inspects the size of the passed-in container when initializing the map, so if you haven’t displayed it yet (_i.e._, inserted the container into the page), then the apparent size is 0×0 and the map won’t render correctly.

In the Observable JavaScript cell, you were displaying the container using yield:

{
  const container = yield htl.html`<div style="height: 500px;">`;
  const map = L.map(container);
  …
}

In a vanilla JavaScript cell, the equivalent is to call display (before calling L.map):

const container = display(html`<div style="height: 500px;">`);
const map = L.map(container);
…