index

r = require.alias({
  maplibregl: "maplibre-gl@2.4.0/dist/maplibre-gl.js",
  h3: {},
  deck: "deck.gl@8.9.4/dist.min.js",
  lumaconstants: "@luma.gl/constants@8.5.16/dist/dist.min.js"
});

maplibregl = r("maplibregl").catch(() => window["maplibregl"]);

// absolutely convulted deck.gl + luma.gl constants loading based on
// https://observablehq.com/@observablehq/how-to-require-stubborn-modules#cell-68
// (manually patching luma constants into deck's luma)
lib = {
  const deck = (window.deck = await r("deck"));
  const luma = (window.luma = await r("deck"));
  const lumaconstants = await r("lumaconstants")
  luma.GL = lumaconstants.GL;
  return {
    deck: deck,
    luma: luma
  }
}

cityBounds = FileAttachment("/data/map-bounds-extent.csv").csv({ typed: true })
cityBoundsExtracted = cityBounds
  .map(d => ({...d, city: d.filename.split("_")[0] }))

// get bounds of selected city
// (there'll be duplicates; just grab the first)
// mapbox and deckgl take bounds in different orders, ugh
filteredCityInfo = cityBoundsExtracted.filter(d => d.city == selectedCity)
filteredCityBoundsMapbox = [
    [filteredCityInfo[0].lon_min, filteredCityInfo[0].lat_min],
    [filteredCityInfo[0].lon_max, filteredCityInfo[0].lat_max]
  ]
filteredCityBoundsDeckGL = [
  filteredCityInfo[0].lon_min,
  filteredCityInfo[0].lat_min,
  filteredCityInfo[0].lon_max,
  filteredCityInfo[0].lat_max
]

// fly to the selected city whenever it changes (accounting for bottom bar)
map.fitBounds(filteredCityBoundsMapbox, {
  linear: false,
  offset: [0, 0]
  })

max_city_sink = Math.abs(Math.min(...filteredCityInfo.map(d => d.file_min)))
cityLabel = selectedCity.replace(/([A-Z])/g, ' $1').replace(",", " ").trim()
map_title = md`# Sinking cities: ${cityLabel}`
map_subtitle = md`Measurements from researchers found that parts of the city are sinking by as much as **${(max_city_sink * 100).toFixed(1)} cm per year.**`

defaultCity = {
  const pageURL = new URL(window.location.href);
  const cityChoice = pageURL.searchParams.get("city");
  
  return allCities.includes(cityChoice) ? cityChoice : "Jakarta";
}

// get list of all unique cities (with which to populate dropdown menu below)
allCities = [...new Set(cityBoundsExtracted.map(d => d.city))]

viewof selectedCity = Inputs.select(allCities, {
  label: "City",
  value: defaultCity });

viewof certaintyBound = Inputs.checkbox(["Show less precise estimates"])

/* legend */

refpointLegend = md`✚ Reference point`

width = 25
bins = 10
legend =
  svg`<svg height="65px" width="${width * bins}px">
    <text fill="black" y=15 text-anchor="start" x=0>Land sinking</text>
    <text fill="black" y=15 text-anchor="end" x=${width * bins}>
      Land rising
    </text>
    ${d3.schemeRdYlBu[bins].map(
      (colour, i) => svg`<rect height=15 y=23 width=${width}
        x=${width * i} fill="${colour}"></rect>`
    )}
    <text fill="black" y=55 text-anchor="start" x=0>-${(filteredCityInfo[0].palette_extent * 100).toFixed(1)} cm/yr</text>
    <text fill="black" y=55 text-anchor="end" x=${width * bins}>
      +${(filteredCityInfo[0].palette_extent * 100).toFixed(1)} cm/yr
    </text>
  </svg>`

layer_0to25 = new lib.deck.MapboxLayer({
  id: "raster_0to25",
  type: lib.deck.BitmapLayer,
  image: [],
  textureParameters: {
    [lib.luma.GL.TEXTURE_MIN_FILTER]: lib.luma.GL.NEAREST,
    [lib.luma.GL.TEXTURE_MAG_FILTER]: lib.luma.GL.NEAREST
  }
});
layer_25to50 = new lib.deck.MapboxLayer({
  id: "raster_25to50",
  type: lib.deck.BitmapLayer,
  image: [],
  textureParameters: {
    [lib.luma.GL.TEXTURE_MIN_FILTER]: lib.luma.GL.NEAREST,
    [lib.luma.GL.TEXTURE_MAG_FILTER]: lib.luma.GL.NEAREST
  }
});
layer_50to100 = new lib.deck.MapboxLayer({
  id: "raster_50to100",
  type: lib.deck.BitmapLayer,
  image: [],
  textureParameters: {
    [lib.luma.GL.TEXTURE_MIN_FILTER]: lib.luma.GL.NEAREST,
    [lib.luma.GL.TEXTURE_MAG_FILTER]: lib.luma.GL.NEAREST
  }
});
layer_gt100 = new lib.deck.MapboxLayer({
  id: "raster_gt100",
  type: lib.deck.BitmapLayer,
  image: [],
  textureParameters: {
    [lib.luma.GL.TEXTURE_MIN_FILTER]: lib.luma.GL.NEAREST,
    [lib.luma.GL.TEXTURE_MAG_FILTER]: lib.luma.GL.NEAREST
  }
});

// add a layer for the reference points too
layer_refpoints = new lib.deck.MapboxLayer({
  id: "refpoints",
  type: lib.deck.IconLayer,
  data: cityBoundsExtracted,
  getPosition: d => [d.ref_lon, d.ref_lat],
  getColor: d => [0, 256, 128],
  sizeScale: 50,
  sizeUnits: "pixels",
  getIcon: d => ({
    url: "cross.png",
    width: 48,
    height: 48,
    anchorX: 24,
    anchorY: 24
  })
})

path_0to25 = "/data/3-pngs/" + selectedCity + "_0to25pp.png"

// conditionally display city's less precise pngs if certainty is checked
path_25to50 = certaintyBound.includes("Show less precise estimates") ?
    "/data/3-pngs/" + selectedCity + "_25to50pp.png" : null
path_50to100 = certaintyBound.includes("Show less precise estimates") ?
    "/data/3-pngs/" + selectedCity + "_50to100pp.png" : null
path_gt100 = certaintyBound.includes("Show less precise estimates") ?
    "/data/3-pngs/" + selectedCity + "_gt100pp.png" : null

// update the layers with the selected city's file paths and bounds
layer_0to25.setProps({ image: path_0to25, bounds: filteredCityBoundsDeckGL })

layer_25to50.setProps({ image: path_25to50, bounds: filteredCityBoundsDeckGL })

layer_50to100.setProps({ image: path_50to100, bounds: filteredCityBoundsDeckGL })

layer_gt100.setProps({ image: path_gt100, bounds: filteredCityBoundsDeckGL })

viewof map = {
  let container = html`<div style="position: absolute; left: 0; top: 0; height: 100vh; width: 100%;" />`;

  // Give the container dimensions.
  yield container;

  // Create the \`map\` object with the mapboxgl.Map constructor, referencing
  // the container div
  let map = new maplibregl.Map({
    container,
    zoom: 1,
    center: [0, 0],
    
    // pitch: 30,
    antialias: true,
    style: "style.json",
    attributionControl: false
  });

  // on map load:
  // - dispatch its value back to ojs
  // - add the deck.gl layers to the map
  map.on("load", () => {
    container.value = map;
    container.dispatchEvent(new CustomEvent("input"));
    
    map.addLayer(layer_0to25);
    map.addLayer(layer_25to50);
    map.addLayer(layer_50to100);
    map.addLayer(layer_gt100);
    map.addLayer(layer_refpoints)

    // TODO - opacity not working
    // map.setPaintProperty("raster_25to50", "raster-opacity", 0.75)
    // map.setPaintProperty("raster_50to100", "raster-opacity", 0.5)
    // map.setPaintProperty("raster_gt100", "raster-opacity", 0.25)
    
  });
}

GET THIS MAP