From 4aa7ee1d548f26c80d4d644d5d8da9fb8ecf2831 Mon Sep 17 00:00:00 2001
From: Eric Tuvesson <eric.tuvesson@gmail.com>
Date: Wed, 20 Sep 2023 10:13:27 +0200
Subject: [PATCH] chore: Add Mapbox reverse geocoding example (#7)

---
 library/modules/mapbox/guides/geocoder.md | 68 ++++++++++++++++++++++-
 1 file changed, 66 insertions(+), 2 deletions(-)

diff --git a/library/modules/mapbox/guides/geocoder.md b/library/modules/mapbox/guides/geocoder.md
index 56b230a..6ce82de 100644
--- a/library/modules/mapbox/guides/geocoder.md
+++ b/library/modules/mapbox/guides/geocoder.md
@@ -101,11 +101,75 @@ To make the parameters match, we can make a few changes in this code:
 ```js
 const queryParams = {
   access_token, // Provide the access token
-  proximity: [Script.Inputs.lng, Script.Inputs.lat].join(','), // Bias results towards user's location
+  proximity: [Script.Inputs.lng, Script.Inputs.lat].join(","), // Bias results towards user's location
   limit: 5, // Maximum number of results to return
-  language: 'en-GB'
+  language: "en-GB",
 };
 ```
 
 The main change here is the `proximity` that we changed to a Geopoint instead of `ip`.
 This requires 2 new inputs to the Script node, `lng` and `lat`, connected from the Mapbox node center lng and lat position.
+
+## Get Country name from Longitude and Latitude
+
+Here is an example of how to use [Mapbox reverse geocoding](https://docs.mapbox.com/api/search/geocoding/#reverse-geocoding) to get information about a specific longitude and latitude.
+
+The types can be changed to get more information `types: ["country"]`, but the outputs have to be updated to match the desired data.
+
+```js
+// Define the expected inputs for the script
+Script.Inputs = {
+  Longitude: "number",
+  Latitude: "number",
+};
+
+// Define the expected outputs for the script
+Script.Outputs = {
+  Country: "string",
+  Done: "signal",
+};
+
+const ENDPOINT = "https://api.mapbox.com/geocoding/v5/mapbox.places";
+
+// Define an asynchronous function to make the API request
+async function makeRequest() {
+  // Get the Mapbox access token from Noodl project settings
+  const access_token = Noodl.getProjectSettings().mapboxAccessToken;
+
+  const longitude = encodeURIComponent(Script.Inputs.Longitude);
+  const latitude = encodeURIComponent(Script.Inputs.Latitude);
+
+  // https://docs.mapbox.com/api/search/geocoding/#reverse-geocoding
+  const queryParams = {
+    access_token, // Provide the access token
+    limit: 5, // Maximum number of results to return
+    types: ["country"].join(","), // Filter results to include only addresses
+  };
+
+  // Construct the query string from the query parameters
+  const query = Object.keys(queryParams)
+    .filter((key) => !!queryParams[key]) // Filter out empty values
+    .map(
+      (key) =>
+        `${encodeURIComponent(key)}=${encodeURIComponent(queryParams[key])}`
+    )
+    .join("&");
+
+  // Make the API request and get the response as JSON
+  const response = await fetch(
+    `${ENDPOINT}/${longitude},${latitude}.json?${query}`
+  );
+  const json = await response.json();
+
+  const countries = json.features.map((x) => x.text);
+
+  Script.Outputs.Country = countries.length > 0 ? countries[0] : "";
+  Script.Outputs.Done();
+}
+
+Script.Signals = {
+  Fetch() {
+    makeRequest();
+  },
+};
+```