Use local countries.geojson

app/javascript/controllers/maps_controller.js

@@ -154,9 +154,20 @@ export default class extends Controller {
       }
     })
 
-    // the JSON is 23MB, so it's better to fetch it asynchronously or cache or use local copy
+    try {
-    const response = await fetch('https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson')
+      // Up-to-date version can be found on Github:
-    const worldData = await response.json()
+      // https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson
+      const response = await fetch('/countries.geojson', {
+        headers: {
+          'Accept': 'application/geo+json,application/json'
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const worldData = await response.json();
 
       const visitedCountries = this.getVisitedCountries(countryCodesMap)
       const filteredFeatures = worldData.features.filter(feature =>
@@ -167,7 +178,11 @@ export default class extends Controller {
         type: 'FeatureCollection',
         features: filteredFeatures
       })
+    } catch (error) {
+      console.error('Error loading GeoJSON:', error);
     }
+  }
+
 
   getVisitedCountries(countryCodesMap) {
     if (!this.markers) return [];

config/environments/development.rb

@@ -64,6 +64,10 @@ Rails.application.configure do
   # Suppress logger output for asset requests.
   config.assets.quiet = true
 
+  config.assets.content_type = {
+    geojson: 'application/geo+json'
+  }
+
   # Raises error for missing translations.
   # config.i18n.raise_on_missing_translations = true
 

config/initializers/mime_types.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+Mime::Type.register 'application/geo+json', :geojson