From 1492cb9c4e3183f09ce6ffcf790ecb432d2585dd Mon Sep 17 00:00:00 2001
From: George <31376482+george-gca@users.noreply.github.com>
Date: Sat, 27 Jan 2024 11:06:49 -0300
Subject: [PATCH] GeoJSON support (#2130)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added support for GeoJSON maps.


![image](https://github.com/alshedivat/al-folio/assets/31376482/48e91158-a717-4d01-b6d7-47d45f0580e4)

---------

Signed-off-by: George Araújo <george.gcac@gmail.com>
---
 _includes/head.liquid            | 10 ++++
 _includes/scripts/leaflet.liquid | 28 ++++++++++
 _layouts/default.liquid          |  1 +
 _posts/2024-01-26-geojson-map.md | 93 ++++++++++++++++++++++++++++++++
 _sass/_base.scss                 |  5 ++
 assets/js/copy_code.js           |  1 +
 6 files changed, 138 insertions(+)
 create mode 100644 _includes/scripts/leaflet.liquid
 create mode 100644 _posts/2024-01-26-geojson-map.md

diff --git a/_includes/head.liquid b/_includes/head.liquid
index 8e42e9df9134..dd242e3271b3 100644
--- a/_includes/head.liquid
+++ b/_includes/head.liquid
@@ -61,3 +61,13 @@
   >
   <script src="{{ '/assets/js/theme.js' | relative_url | bust_file_cache }}"></script>
 {% endif %}
+
+<!-- GeoJSON support via Leaflet -->
+{% if page.map %}
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+    crossorigin=""
+  >
+{% endif %}
diff --git a/_includes/scripts/leaflet.liquid b/_includes/scripts/leaflet.liquid
new file mode 100644
index 000000000000..516f23985d97
--- /dev/null
+++ b/_includes/scripts/leaflet.liquid
@@ -0,0 +1,28 @@
+{% if page.map %}
+  <script
+    src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+    crossorigin=""
+  ></script>
+  <script>
+    /* Create leaflet map as another node and hide the code block, appending the leaflet node after it
+    this is done to enable retrieving the code again when changing theme between light/dark */
+    document.querySelectorAll('pre>code.language-geojson').forEach((elem) => {
+      const jsonData = elem.textContent;
+      const backup = elem.parentElement;
+      backup.classList.add('unloaded');
+      /* create leaflet node */
+      let mapElement = document.createElement('div');
+      mapElement.classList.add('map');
+      backup.after(mapElement);
+
+      var map = L.map(mapElement);
+      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 19,
+        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+      }).addTo(map);
+      let geoJSON = L.geoJSON(JSON.parse(jsonData)).addTo(map);
+      map.fitBounds(geoJSON.getBounds());
+    });
+  </script>
+{% endif %}
diff --git a/_layouts/default.liquid b/_layouts/default.liquid
index 0f12156423a6..e6c46a950bc0 100644
--- a/_layouts/default.liquid
+++ b/_layouts/default.liquid
@@ -48,6 +48,7 @@
     {% include scripts/bootstrap.liquid %}
     {% include scripts/masonry.liquid %}
     {% include scripts/mermaid.liquid %}
+    {% include scripts/leaflet.liquid %}
     {% include scripts/chartjs.liquid %}
     {% include scripts/echarts.liquid %}
     {% include scripts/misc.liquid %}
diff --git a/_posts/2024-01-26-geojson-map.md b/_posts/2024-01-26-geojson-map.md
new file mode 100644
index 000000000000..c8d51643be90
--- /dev/null
+++ b/_posts/2024-01-26-geojson-map.md
@@ -0,0 +1,93 @@
+---
+layout: post
+title: a post with geojson
+date: 2024-01-26 17:57:00
+description: this is what included geojson code could look like
+tags: formatting charts maps
+categories: sample-posts
+map: true
+---
+
+This is an example post with some [geojson](https://geojson.org/) code. To create your own visualization, go to [geojson.io](https://geojson.io/).
+
+````markdown
+```geojson
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -60.11363029935569,
+              -2.904625022183211
+            ],
+            [
+              -60.11363029935569,
+              -3.162613728707967
+            ],
+            [
+              -59.820894493858034,
+              -3.162613728707967
+            ],
+            [
+              -59.820894493858034,
+              -2.904625022183211
+            ],
+            [
+              -60.11363029935569,
+              -2.904625022183211
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      }
+    }
+  ]
+}
+```
+````
+
+Which generates:
+
+```geojson
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -60.11363029935569,
+              -2.904625022183211
+            ],
+            [
+              -60.11363029935569,
+              -3.162613728707967
+            ],
+            [
+              -59.820894493858034,
+              -3.162613728707967
+            ],
+            [
+              -59.820894493858034,
+              -2.904625022183211
+            ],
+            [
+              -60.11363029935569,
+              -2.904625022183211
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      }
+    }
+  ]
+}
+```
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 7c4d6d920ad8..02f8b7d6d057 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -1083,6 +1083,11 @@ nav[data-toggle="toc"] {
 }
 
 .echarts {
+  height: 400px;
   width: 100%;
+}
+
+.map {
   height: 400px;
+  width: 100%;
 }
diff --git a/assets/js/copy_code.js b/assets/js/copy_code.js
index 4a34e5f52ab3..0781d8c0c86d 100644
--- a/assets/js/copy_code.js
+++ b/assets/js/copy_code.js
@@ -5,6 +5,7 @@ codeBlocks.forEach(function (codeBlock) {
     (codeBlock.querySelector("pre:not(.lineno)") || codeBlock.querySelector("code")) &&
     codeBlock.querySelector("code:not(.language-chartjs)") &&
     codeBlock.querySelector("code:not(.language-echarts)") &&
+    codeBlock.querySelector("code:not(.language-geojson)") &&
     codeBlock.querySelector("code:not(.language-mermaid)")
   ) {
     // create copy button