feat: add more warming scenarios

Author: MoustafaWehbe

assets/css/pf-maps.css

@@ -32,7 +32,7 @@
   transition: background 0.3s ease, transform 0.2s;
 }
 
-.change-scenario-button:hover {
+.change-scenario-button:hover, .selected-scenario {
   background-color: #cc1717;
   transform: scale(1.05);
 }
@@ -45,3 +45,11 @@
 #map-code-editor {
   margin-top: 10px;
 }
+
+.pf-warming-scenario-button-wrapper {
+  display: flex;
+  justify-content: start;
+  gap: 10px; 
+  margin-top: 10px;
+  row-gap: 15px; 
+}

assets/js/pf-maps.js

@@ -5,7 +5,7 @@ editor.session.setMode("ace/mode/javascript");
 const editableCode = `
   async function initializeMap() {
     const htmlTemplate = await ProbableFuturesMapsHTMLGenerator.generateEmbedMap({
-      datasetId: 40101,
+      datasetId: 40104,
       viewState: { zoom: 4 },
       scenario: 2,
     });
@@ -32,8 +32,25 @@ function saveAndRunCode() {
   document.getElementById("map-container").innerHTML = "";
 
   try {
+    const scenarioMatch = newCode.match(/scenario:\s*([\d.]+)/);
+    let scenarioValue = scenarioMatch ? parseFloat(scenarioMatch[1]) : null;
+
     eval(newCode);
     initializeMap();
+
+    document.querySelectorAll(".change-scenario-button").forEach(button => {
+      button.classList.remove("selected-scenario");
+    });
+
+    // Find and add "active" class to the button with the matching scenario value
+    if (scenarioValue !== null) {
+      const matchingButton = [...document.querySelectorAll(".change-scenario-button")]
+        .find(button => button.textContent.includes(`${scenarioValue}°C`));
+
+      if (matchingButton) {
+        matchingButton.classList.add("selected-scenario");
+      }
+    }
   } catch (error) {
     console.error("Error executing the new code:", error);
   }
@@ -46,7 +63,7 @@ window.onload = async function () {
   }
 
   const htmlTemplate = await ProbableFuturesMapsHTMLGenerator.generateEmbedMap({
-    datasetId: 40101,
+    datasetId: 40104,
     viewState: { zoom: 4 },
     scenario: 2,
   });
@@ -65,8 +82,15 @@ window.onload = async function () {
   iframeDoc.close();
 };
 
-function changeScenario(degree) {
+function changeScenario(event, degree) {
   const iframe = document.querySelector("#map-container iframe");
+  
+  document.querySelectorAll(".change-scenario-button").forEach(button => {
+    button.classList.remove("selected-scenario");
+  });
+
+  event.target.classList.add("selected-scenario");
+
   if (iframe) {
     iframe.contentWindow.postMessage(
       { action: "onDegreeChanged", degree },

map-api.md

@@ -59,4 +59,13 @@ Learn more about this package and find installation instruction in [the npm regi
 <button class="generate-maps-button" onclick="saveAndRunCode()">Save and Run Code</button>
 
 <div id="map-container"></div>
-<button class="change-scenario-button" onclick="changeScenario(3)">Change Scenario to 3°C</button>
+
+<div class="pf-warming-scenario-button-wrapper">
+  <div>Warming scenarios:</div>
+  <button class="change-scenario-button" onclick="changeScenario(event, 0.5)">0.5°C</button>
+  <button class="change-scenario-button" onclick="changeScenario(event, 1)">1°C</button>
+  <button class="change-scenario-button" onclick="changeScenario(event, 1.5)">1.5°C</button>
+  <button class="change-scenario-button selected-scenario" onclick="changeScenario(event, 2)">2°C</button>
+  <button class="change-scenario-button" onclick="changeScenario(event, 2.5)">2.5°C</button>
+  <button class="change-scenario-button" onclick="changeScenario(event, 3)">3°C</button>
+</div>