# ojs Leaflet ≠ js Leaflet ?

**URL:** <https://talk.observablehq.com/t/ojs-leaflet-js-leaflet/10863>\
**Category:** Feedback\
**Created:** [September 18, 2026, 9:33am UTC](https://talk.observablehq.com/t/ojs-leaflet-js-leaflet/10863 "2026-09-18T09:33:32Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![neocarto](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/neocarto/32/6554_2.png) [@neocarto](https://talk.observablehq.com/u/neocarto)\
**Post date:** [September 18, 2026, 9:33am UTC](https://talk.observablehq.com/t/ojs-leaflet-js-leaflet/10863/1 "2026-09-18T09:33:32Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [September 18, 2026, 2:52pm UTC](https://talk.observablehq.com/t/ojs-leaflet-js-leaflet/10863/2 "2026-09-18T14:52:57Z")

</div>

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`:

```auto
{
  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`):

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

```