Interactive Map of Site Locations

Interactive map to view sediment site locations with meta information

NoteNote on Distance Accuracy

Calculated distances represent the shortest Euclidean path to the nearest coastline geometry (GSHHG dataset).

While the data is projected (EPSG:3035) to minimize distortion at high latitudes, please interpret these values as estimates. In areas with complex topography—such as narrow fjords or dense archipelagos—the resolution of the coastline vector data may result in minor deviations from real-world measurements.

NoteNote on Location Name Accuracy

Location names from geographic coordinates are algorithmic estimates based on geometric proximity. They may differ from historical logbooks or specific political definitions of maritime borders.

Interactive Map

The map below displays the spatial distribution of sediment cores. The markers are color-coded based on their distance from the nearest European coastline.

How to use this map:

• Zoom and Pan to explore specific coastal areas or offshore regions.
• Click the Expand icon to reset the view.
• Filter the data by toggling distance categories in the top-right menu (e.g., uncheck boxes to hide specific ranges).
• Use the Legend in the bottom right to interpret the color coding.
• Hover over a point to quickly identify the Project and Site IDs.
• Click on a marker to view exact coordinates, distance to shore (in km), and location names.

db = {
  const StratumSQLite = await window._stratumSQLite;
  return StratumSQLite.open(window._dbPath, {
    sqlJsPath: window._sqljsBase,
    cacheKey:  "pilot-ices-dome@v0.1.5",
  });
}

L = require("https://unpkg.com/leaflet@1.9.4/dist/leaflet.js")

// --- Default view ---
home_lat  = 55
home_lng  = 5
home_zoom = 4

// --- Distance category order and colours (turbo-like palette) ---
dist_order  = ["0 to 10km", "10 to 30km", "30 to 100km", "≥100km"]
dist_colors = ({
  "0 to 10km":   "#30123b",
  "10 to 30km":  "#28bbec",
  "30 to 100km": "#a2fc3c",
  "≥100km":      "#fb8022"
})

// --- Query site points ---
points_web = db.query(`
  SELECT distinct p1.project_id,
                  p1.project,
                  s2.site_id,
                  s2.station,
                  s2.latitude,
                  s2.longitude,
                  s2.dist_to_coast,
                  CASE
                      WHEN s2.dist_to_coast <= 10 THEN '0 to 10km'
                      WHEN s2.dist_to_coast <= 30 THEN '10 to 30km'
                      WHEN s2.dist_to_coast <= 100 THEN '30 to 100km'
                      ELSE '≥100km'
                  END AS Distance,
                  p1.country,
                  s2.est_country,
                  s2.country_code,
                  s2.municipality,
                  s2.sea_name
  FROM sample s1
           JOIN project p1
                ON p1.project_id = s1.project_id
           JOIN site s2
                ON s2.site_id = s1.site_id
`)

{
  // --- Map container ---
  const container = html`<div id="site-map"></div>`
  yield container

  if (!container._map) {
    // Initialise map
    const map = L.map(container, { zoomControl: true })
      .setView([home_lat, home_lng], home_zoom)

    L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/">CARTO</a>',
      maxZoom: 19
    }).addTo(map)

    // --- Home / reset button ---
    const HomeControl = L.Control.extend({
      options: { position: "topleft" },
      onAdd(map) {
        const btn = L.DomUtil.create("a", "leaflet-home-button")
        btn.innerHTML = '<i class="fa fa-expand" aria-hidden="true"></i>'
        btn.title = "Reset to default view"
        btn.setAttribute("aria-label", "Reset to default view")
        L.DomEvent.on(btn, "click", (e) => {
          L.DomEvent.stopPropagation(e)
          map.setView([home_lat, home_lng], home_zoom)
        })
        return btn
      }
    })
    new HomeControl().addTo(map)

    // --- Layer groups (one per distance category) ---
    const layerGroups = {}
    for (const cat of dist_order) {
      layerGroups[cat] = L.layerGroup().addTo(map)
    }

    // --- Add markers ---
    for (const d of points_web) {
      if (d.latitude == null || d.longitude == null) continue
      const color = dist_colors[d.Distance] ?? "#888"
      const marker = L.circleMarker([d.latitude, d.longitude], {
        radius:      4,
        color:       color,
        fillColor:   color,
        fillOpacity: 0.5,
        weight:      1
      })

      marker.bindTooltip(
        `Project ID: ${d.project_id}, Site ID: ${d.site_id}`,
        { sticky: true }
      )

      marker.bindPopup(`
        <strong>Project ID:</strong> ${d.project_id}<br>
        <strong>Project:</strong> ${d.project}<br>
        <strong>Site ID:</strong> ${d.site_id}<br>
        <strong>Latitude:</strong> ${d.latitude != null ? d.latitude.toFixed(2) : "?"}<br>
        <strong>Longitude:</strong> ${d.longitude != null ? d.longitude.toFixed(2) : "?"}<br>
        <strong>Distance:</strong> ${d.dist_to_coast != null ? d.dist_to_coast.toFixed(1) + " km" : "?"}<br>
        <strong>Country:</strong> ${d.country ?? "?"}<br>
        <strong>Country 2:</strong> ${d.est_country ?? "?"}<br>
        <strong>Country Code:</strong> ${d.country_code ?? "?"}<br>
        <strong>Municipality:</strong> ${d.municipality ?? "?"}<br>
        <strong>Sea/Ocean Name:</strong>${d.sea_name ?? "?"}
      `)

      layerGroups[d.Distance]?.addLayer(marker)
    }

    // --- Layer control (top-right toggle) ---
    // Reverse order so nearest distance is at top
    const overlays = {}
    for (const cat of [...dist_order].reverse()) {
      overlays[cat] = layerGroups[cat]
    }
    L.control.layers(null, overlays, { collapsed: false }).addTo(map)

    // --- Legend (bottom-right) ---
    const LegendControl = L.Control.extend({
      options: { position: "bottomright" },
      onAdd() {
        const div = L.DomUtil.create("div", "site-legend")
        div.innerHTML = `<div class="site-legend-title">Distance to Coast</div>` +
          dist_order.map(cat =>
            `<div>
              <span class="legend-dot" style="background:${dist_colors[cat]}"></span>${cat}
            </div>`
          ).join("")
        return div
      }
    })
    new LegendControl().addTo(map)

    container._map = map
  }
}