feat: update map api page (#54)

* feat: update map api page

* feat: add compare maps

---------

Co-authored-by: Moustafa <[email protected]>

Author: petercroce

Gemfile.lock

@@ -20,6 +20,7 @@ GEM
     ffi (1.16.3)
     forwardable-extended (2.6.0)
     google-protobuf (3.25.1-arm64-darwin)
+    google-protobuf (3.25.1-x86_64-darwin)
     http_parser.rb (0.8.0)
     i18n (1.14.1)
       concurrent-ruby (~> 1.0)
@@ -66,13 +67,16 @@ GEM
     safe_yaml (1.0.5)
     sass-embedded (1.69.5-arm64-darwin)
       google-protobuf (~> 3.23)
+    sass-embedded (1.69.5-x86_64-darwin)
+      google-protobuf (~> 3.23)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
     unicode-display_width (2.5.0)
     webrick (1.8.1)
 
 PLATFORMS
   arm64-darwin-22
+  x86_64-darwin-23
 
 DEPENDENCIES
   bundler (>= 2.3.5)

assets/css/pf-maps.css

@@ -1,4 +1,4 @@
-.generate-maps-button {
+.generate-maps-button, .change-scenario-button {
   background-color: #851fff;
   color: white;
   border: none;
@@ -10,36 +10,12 @@
   transition: background 0.3s ease, transform 0.2s;
 }
 
-.generate-maps-button:hover {
+.generate-maps-button:hover, .change-scenario-button:hover, .selected-scenario {
   background-color: #6a17cc;
-  transform: scale(1.05);
 }
 
-.generate-maps-button:active {
+.generate-maps-button:active, .change-scenario-button:active {
   background-color: #5a14a8;
-  transform: scale(0.98);
-}
-
-.change-scenario-button {
-  background-color: #DA2E80;
-  color: white;
-  border: none;
-  padding: 8px 16px;
-  font-size: 12px;
-  font-weight: bold;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.3s ease, transform 0.2s;
-}
-
-.change-scenario-button:hover, .selected-scenario {
-  background-color: #cc1717;
-  transform: scale(1.05);
-}
-
-.change-scenario-button:active {
-  background-color: #a81414;
-  transform: scale(0.98);
 }
 
 #map-code-editor {

assets/js/pf-maps.js

@@ -6,7 +6,7 @@ const editableCode = `
   async function initializeMap() {
     const htmlTemplate = await ProbableFuturesMapsHTMLGenerator.generateEmbedMap({
       datasetId: 40104,
-      viewState: { zoom: 4 },
+      viewState: { zoom: 4, latitude: 3.8, longitude: -70.4},
       scenario: 2,
     });
 
@@ -56,15 +56,10 @@ function saveAndRunCode() {
   }
 }
 
-window.onload = async function () {
-  if (typeof ProbableFuturesMapsHTMLGenerator === "undefined") {
-    console.error("ProbableFuturesMapsHTMLGenerator is not loaded. Check the script URL.");
-    return;
-  }
-
+async function generateSimpleMap() { 
   const htmlTemplate = await ProbableFuturesMapsHTMLGenerator.generateEmbedMap({
     datasetId: 40104,
-    viewState: { zoom: 4 },
+    viewState: { zoom: 4, latitude: 3.8, longitude: -70.4},
     scenario: 2,
   });
 
@@ -80,6 +75,40 @@ window.onload = async function () {
   iframeDoc.open();
   iframeDoc.write(htmlTemplate);
   iframeDoc.close();
+}
+
+async function generateCompareMap() { 
+  const htmlTemplate = await ProbableFuturesMapsHTMLGenerator.generateEmbedMap({
+    datasetId: 40702,
+    viewState: { zoom: 4, latitude: 3.8, longitude: -70.4},
+    compare: {
+      scenarioBefore: 1,
+      scenarioAfter: 3,
+    },
+  });
+
+  // Create an iframe
+  const iframe = document.createElement("iframe");
+  iframe.style.width = "100%";
+  iframe.style.height = "600px";
+  iframe.style.border = "none";
+  document.getElementById("compare-map-container").appendChild(iframe);
+
+  // Write the generated HTML template inside the iframe
+  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+  iframeDoc.open();
+  iframeDoc.write(htmlTemplate);
+  iframeDoc.close();
+}
+
+window.onload = async function () {
+  if (typeof ProbableFuturesMapsHTMLGenerator === "undefined") {
+    console.error("ProbableFuturesMapsHTMLGenerator is not loaded. Check the script URL.");
+    return;
+  }
+
+  generateSimpleMap();
+  generateCompareMap();
 };
 
 function changeScenario(event, degree) {

map-api.md

@@ -7,19 +7,15 @@ parent: Maps
 
 # Map APIs and embeds
 
-This section is for people who want to integrate the Probable Futures maps into their own websites or applications. It is possible to achieve this in three ways:
+This section describes how to integrate the Probable Futures maps into any website or application. Typically, there are two ways people prefer to do this. If a map will be added to an article, embeddable maps downloaded directly from the Probable Futures website are a simple and efficient option. If the maps will be used in an application, where the maps will change dynamically, one of the two map API packages work best. For more customization options, see the [map customizations page](/map-customization).
 
-1. Use the map APIs (npm packages) to integrate the maps into your own application, for example if you are creating an application where you will display more than one map. 
-2. Download an embeddable map, for example to display a map in an article.
-3. Customize, restyle, and host the maps with your own Mapbox account, for example if you would like to use different colors or bins on the maps.
+## Embeddable maps - downloaded from probablefutures.org
 
-### Use cases
+1. On [probablefutures.org/maps](https://probablefutures.org/maps), position the map location and zoom level exactly as you would like it to appear in the embed.
+2. Click the download button on the right side. In the pop-up, select between either a standard embeddable map or embeddable comparison map. When you are done choosing your options, click the download button to download the embeddable map as an HTML file.
+3. Add the file to any website. Typically, it's best to do this by placing the contents of the HTML file inside an `<iframe>` element.
 
-These maps APIs can be used to:
-
-- Add clear and compelling visual maps of our changing climate to any website, article, story, or app
-- Show any place in the world, at any zoom level
-- Do the above for a single warming scenario or multiple, in comparison or sequentially
+<div id="compare-map-container"></div>
 
 ## Embeddable maps API - using React
 
@@ -42,18 +38,9 @@ This package offers an HTML generator that creates pure HTML versions of the Pro
 
 Learn more about this package and find installation instruction in [the npm registry: @probable-futures/probable-futures-maps-html-generator](https://www.npmjs.com/package/@probable-futures/probable-futures-maps-html-generator).
 
-## Embeddable maps - direct download
-
-1. Go to [probablefutures.org/maps](https://probablefutures.org/maps).
-2. Navigate the map to a place in the world that you would like to show in the embeddable map.
-3. Click the download button on the top right.
-4. Select "Download as embeddable map" or "Download as embeddable comparison map". If selecting a standard embeddable map, the warming scenario you are viewing will be shown in the embeddable map. If selecting a comparison map, choose the warming scenarios you would like to include in the embeddable map in the next step.
-5. Click the download button to download the embeddable map file.
-6. Add the file to any website, application, or article.
-
-## Demo
+### Demo: Generating a climate map using a map API package
 
-### Generating climate map using `@probable-futures/probable-futures-html-generator` package
+The code below uses the `@probable-futures/probable-futures-html-generator` package to generate a map. You can edit the code and click the "Save and Run Code" button to change the map. For example, change the `datasetID` to change the type of map being shown, change the `zoom` to change the zoom of the map, and change the `latitude` or `longitude` to change the center focus of the map. 
 
 <div id="map-code-editor" style="height: 300px; width: 100%; border: 1px solid #ccc;"></div>
 <button class="generate-maps-button" onclick="saveAndRunCode()">Save and Run Code</button>