_oldmap.qmd

---
title: "Test headline"
subtitle: "And some additional comment here"
page-layout: custom
theme: none
# this includes some default css for the titling, the bootstrap icons (since
# they only come with the bootstrap themes usually), and some extra css for the
# modals 
css:
  - style/embed.css
  - https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css
  - style/modal.css
  - https://cdn.jsdelivr.net/npm/maplibre-gl@2.1.9/dist/maplibre-gl.css
execute:
  echo: false
---

::: {.modalpanel}
<!-- check https://icons.getbootstrap.com for icons! -->
<a href="#" data-micromodal-trigger="modal-useremix" tabindex="0">
  <i class="bi bi-share-fill"></i>
  Share
</a>

<a href="#" data-micromodal-trigger="modal-about" tabindex="0">
  <i class="bi bi-clipboard-data"></i>
  About
</a>

<!-- if there's room here, put credits on two lines:
  * Editor names, 360info (hint: put &shy; in the middle of long names!)
  * Data: ORG
  (if there isn't room, put it in the ABOUT dialog) -->
Editor Name, 360info

Data: ORG
:::

```{ojs}
// load maplibre-gl. it's a bit finnicky...
maplibregl = require("maplibre-gl@2.1.9/dist/maplibre-gl.js").catch(() => window["maplibregl"]);

// tempcontrol = require("maplibre-gl-temporal-control@1.0.3")
```

```{ojs}
//| column: screen

viewof map = {
  let container = html`<div style='height:80vh;' />`;

  // 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,
    center: [127.5, -15 ],
    zoom: 3,
    style: "/style.json"
  });

  // Wait until the map loads.
  map.on("load", () => {
    container.value = map;
    container.dispatchEvent(new CustomEvent("input"));

    // add a .png file source and layer
    // (would love to do geotiff, but they're not
    // supported out of the box!)
    map.addSource("raster-example-source", {
      type: "image",
      // url: "/data/totals/raster/totalpersqkm-nonind-2015-webmerc.png",
      url: "/data/totals/png/test.png",
      coordinates: [
        [-180, 86.5],
        [180, 86.5],
        [180, -85],
        [-180, -85],
      ]
    });
    map.addLayer({
      id: "raster-example-layer",
      source: "raster-example-source",
      type: "raster",
      minzoom: 0,
      maxzoom: 24,
      paint: {
        "raster-opacity": 0.8,
        "raster-resampling": "nearest"
      }
    });
    console.log("Example TIF added!");
  });
}
```

```{ojs}
map
```

<!-- share/about popups -->

```{ojs}
//| include: false

micro = require("micromodal@0.4.10")
micro.init({
  awaitOpenAnimation: true,
  awaitCloseAnimation: true
});
```

<!-- dialog buttons -->

::::::: {#modal-useremix .modal .micromodal-slide aria-hidden="true"}
:::::: {.modal__overlay tabindex="-1" data-micromodal-close="true"}
::::: {.modal__container role="dialog" aria-modal="true" aria-labelledby="modal-useremix-title"}

<button class="modal__close" aria-label="Close modal" data-micromodal-close></button>

:::: {#modal-useremix-content}
## Use + Remix

These charts, as well as the analyses that underpin them, are available under a [**Creative Commons Attribution 4.0 licence**](https://creativecommons.org/licenses/by/4.0).

Please acknowledge [360info](https://360info.org) and our data sources when you use these charts and data.

#### Embed this chart in your article

Copy and paste the following code:

::: {.embedcode}
```
<iframe
src="https://360info-studentflows.pages.dev/
embed-netflow-scatter" title="Chart with Human
Development Index increasing to the right and Net
Student Ratio increasing upward. Countries situated
above the line, in blue, are receiving more
students from other countries than they send out."
width="550" height="560" scrolling="no"
style="border:none;"></iframe>
```
:::

This content is subject to [360info's Terms of Use](https://newshub.360info.org/page/terms).

#### Get the data and code

Visit the [GitHub repository](https://github.com/360-info/report-template/tree/main/data) to:

* [**Download the data**](https://github.com/360-info/report-template/tree/main/data)
* [**Recreate or remix the chart**](https://github.com/360-info/report-template)
::::

:::::
::::::
:::::::

<!-- notes dialog -->

::::::: {#modal-about .modal .micromodal-slide aria-hidden="true"}
:::::: {.modal__overlay tabindex="-1" data-micromodal-close="true"}
::::: {.modal__container role="dialog" aria-modal="true" aria-labelledby="modal-about-title"}

<button class="modal__close" aria-label="Close modal" data-micromodal-close></button>

<header>
## About {#modal-about-title}
</header>

:::: {#modal-about-content}
This is a great place to add some more notes on the data!
::::

:::::
::::::
:::::::