Henry's Story Map Project

[henryyzh1]

This project is an interactive story map that visualizes global earthquakes of magnitude 6.0 and above from 1990 to 2023.
The map highlights the relationship between earthquake epicenters and tectonic plate boundaries, providing context to the distribution of seismic activity across the Pacific "Ring of Fire" and beyond.

Link to the project: https://henryyzh1.github.io/JS-story-map-project/

[mjumbewu]

I like it; the aesthetic is understated, and hides the complexity of what you're doing with the data to make it look right (which is nice).

[mjumbewu]

suggestion: Because you're using worldCopyJump: true when creating the map (which I think is absolutely the right thing to do in this case), I'd consider modifying the toPacificCentric function to copy your data over the antimeridian in both directions instead of just to the west (negative).

That should be just a small set of modifications to what you currently have in geo-utils.js -- e.g., add:

  const geometryHasNegativeLng = (geometry) => {
    let hasNegative = false;
    forEachCoordinate(geometry, (coord) => {
      if (Array.isArray(coord) && typeof coord[0] === "number" && coord[0] < 0) {
        hasNegative = true;
      }
    });
    return hasNegative;
  };

And then in addition to checking for geometryHasPositiveLng, add:

    if (geometryHasNegativeLng(feature.geometry)) {
      const shifted = {
        type: "Feature",
        properties: { ...feature.properties, __pacificDuplicate: true },
        geometry: shiftGeometry(feature.geometry, 360),
      };
      markShifted(shifted);
      duplicates.push(shifted);
    }

Also, even though the browser on my computer seems to handle the number of points just fine, I might still recommend using preferCanvas: true setting when you create the map, as it will ensure a smoother experience on more resource-constrained devices.

Suggested change

	worldCopyJump: true,
	worldCopyJump: true,
	preferCanvas: true,

Lastly, normally Leaflet will limit how much it draws outside of the current map view (for efficiency). However, with worldCopyJump that means that the data on the "other side of the world" won't appear until you release the mouse. To avoid this, you can override the renderer to use a larger padding than default. Compare the following:

Default Padding	Padding of 1.5

Also note that, if you do override renderer, then preferCanvas is unnecessary, because you can just tell the map to use a Canvas renderer directly.

Suggested change

	worldCopyJump: true,
	worldCopyJump: true,
	renderer: L.canvas({ padding: 1.5 }),