GeoJSON support (#2130)

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 <[email protected]>

_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/[email protected]/dist/leaflet.css"
+ integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+ crossorigin=""
+ >
+{% endif %}

_includes/scripts/leaflet.liquid

@@ -0,0 +1,28 @@
+{% if page.map %}
+ <script
+ src="https://unpkg.com/[email protected]/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 %}

_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 %}

_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"
+ }
+ }
+ ]
+}
+```

_sass/_base.scss

@@ -1083,6 +1083,11 @@ nav[data-toggle="toc"] {
 }
 
 .echarts {
+ height: 400px;
  width: 100%;
+}
+
+.map {
  height: 400px;
+ width: 100%;
 }

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