Add support for protomaps in non-selfhosted mode

app/javascript/controllers/maps_controller.js

@@ -40,6 +40,7 @@ export default class extends BaseController {
     console.log("Map controller connected");
 
     this.apiKey = this.element.dataset.api_key;
+    this.selfHosted = this.element.dataset.self_hosted === "true";
     this.markers = JSON.parse(this.element.dataset.coordinates);
     this.timezone = this.element.dataset.timezone;
     this.userSettings = JSON.parse(this.element.dataset.user_settings);
@@ -425,7 +426,7 @@ export default class extends BaseController {
 
   baseMaps() {
     let selectedLayerName = this.userSettings.preferred_map_layer || "OpenStreetMap";
-    let maps = createAllMapLayers(this.map, selectedLayerName);
+    let maps = createAllMapLayers(this.map, selectedLayerName, this.selfHosted);
 
     // Add custom map if it exists in settings
     if (this.userSettings.maps && this.userSettings.maps.url) {
@@ -448,8 +449,28 @@ export default class extends BaseController {
       maps[this.userSettings.maps.name] = customLayer;
     } else {
       // If no custom map is set, ensure a default layer is added
-      const defaultLayer = maps[selectedLayerName] || maps["OpenStreetMap"] || maps["Atlas"];
-      defaultLayer.addTo(this.map);
+      // First check if maps object has any entries
+      if (Object.keys(maps).length === 0) {
+        // Fallback to OSM if no maps are configured
+        maps["OpenStreetMap"] = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+          maxZoom: 19,
+          attribution: "&copy; <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
+        });
+      }
+
+      // Now try to get the selected layer or fall back to alternatives
+      const defaultLayer = maps[selectedLayerName] || Object.values(maps)[0];
+
+      if (defaultLayer) {
+        defaultLayer.addTo(this.map);
+      } else {
+        console.error("Could not find any default map layer");
+        // Ultimate fallback - create and add OSM layer directly
+        L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+          maxZoom: 19,
+          attribution: "&copy; <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
+        }).addTo(this.map);
+      }
     }
 
     return maps;

app/javascript/controllers/trips_controller.js

@@ -53,7 +53,7 @@ export default class extends BaseController {
     // Add base map layer
     const selectedLayerName = this.userSettings.preferred_map_layer || "OpenStreetMap";
     const maps = this.baseMaps();
-    const defaultLayer = maps[selectedLayerName] || maps["OpenStreetMap"] || maps["Atlas"];
+    const defaultLayer = maps[selectedLayerName] || Object.values(maps)[0];
     defaultLayer.addTo(this.map);
 
     // Add scale control to bottom right

app/javascript/maps/layers.js

@@ -1,20 +1,34 @@
 // Import the maps configuration
 // In non-self-hosted mode, we need to mount external maps_config.js to the container
-import { mapsConfig } from './maps_config';
+import { mapsConfig as vectorMapsConfig } from './vector_maps_config';
+import { mapsConfig as rasterMapsConfig } from './raster_maps_config';
 
-export function createMapLayer(map, selectedLayerName, layerKey) {
-  const config = mapsConfig[layerKey];
+export function createMapLayer(map, selectedLayerName, layerKey, selfHosted) {
+  const config = selfHosted === "true" ? rasterMapsConfig[layerKey] : vectorMapsConfig[layerKey];
 
   if (!config) {
     console.warn(`No configuration found for layer: ${layerKey}`);
     return null;
   }
 
-  let layer = L.tileLayer(config.url, {
-    maxZoom: config.maxZoom,
-    attribution: config.attribution,
-    // Add any other config properties that might be needed
-  });
+  let layer;
+  console.log("isSelfhosted: ", selfHosted)
+  if (selfHosted === "true") {
+    layer = L.tileLayer(config.url, {
+      maxZoom: config.maxZoom,
+      attribution: config.attribution,
+      crossOrigin: true,
+      // Add any other config properties that might be needed
+    });
+  } else {
+    layer = protomapsL.leafletLayer(
+      {
+        url: config.url,
+        flavor: config.flavor,
+        crossOrigin: true,
+      }
+    )
+  }
 
   if (selectedLayerName === layerKey) {
     return layer.addTo(map);
@@ -24,11 +38,11 @@ export function createMapLayer(map, selectedLayerName, layerKey) {
 }
 
 // Helper function to create all map layers
-export function createAllMapLayers(map, selectedLayerName) {
+export function createAllMapLayers(map, selectedLayerName, selfHosted) {
   const layers = {};
-
+  const mapsConfig = selfHosted === "true" ? rasterMapsConfig : vectorMapsConfig;
   Object.keys(mapsConfig).forEach(layerKey => {
-    layers[layerKey] = createMapLayer(map, selectedLayerName, layerKey);
+    layers[layerKey] = createMapLayer(map, selectedLayerName, layerKey, selfHosted);
   });
 
   return layers;

app/javascript/maps/vector_maps_config.js

@@ -0,0 +1,32 @@
+export const mapsConfig = {
+    "Light": {
+      url: "https://tyles.dwri.xyz/20250420/{z}/{x}/{y}.mvt",
+      flavor: "light",
+      maxZoom: 16,
+      attribution: "<a href='https://github.com/protomaps/basemaps'>Protomaps</a>, &copy; <a href='https://openstreetmap.org'>OpenStreetMap</a>"
+    },
+    "Dark": {
+      url: "https://tyles.dwri.xyz/20250420/{z}/{x}/{y}.mvt",
+      flavor: "dark",
+      maxZoom: 16,
+      attribution: "<a href='https://github.com/protomaps/basemaps'>Protomaps</a>, &copy; <a href='https://openstreetmap.org'>OpenStreetMap</a>"
+    },
+    "White": {
+      url: "https://tyles.dwri.xyz/20250420/{z}/{x}/{y}.mvt",
+      flavor: "white",
+      maxZoom: 16,
+      attribution: "<a href='https://github.com/protomaps/basemaps'>Protomaps</a>, &copy; <a href='https://openstreetmap.org'>OpenStreetMap</a>"
+    },
+    "Grayscale": {
+      url: "https://tyles.dwri.xyz/20250420/{z}/{x}/{y}.mvt",
+      flavor: "grayscale",
+      maxZoom: 16,
+      attribution: "<a href='https://github.com/protomaps/basemaps'>Protomaps</a>, &copy; <a href='https://openstreetmap.org'>OpenStreetMap</a>"
+    },
+    "Black": {
+      url: "https://tyles.dwri.xyz/20250420/{z}/{x}/{y}.mvt",
+      flavor: "black",
+      maxZoom: 16,
+      attribution: "<a href='https://github.com/protomaps/basemaps'>Protomaps</a>, &copy; <a href='https://openstreetmap.org'>OpenStreetMap</a>"
+    },
+};

app/views/layouts/application.html.erb

@@ -13,6 +13,8 @@
     <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
+    <%= javascript_include_tag "https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js" unless @self_hosted %>
+
     <%= render 'application/favicon' %>
     <%= Sentry.get_trace_propagation_meta.html_safe if Sentry.initialized? %>
   </head>

app/views/map/index.html.erb

@@ -49,6 +49,7 @@
         data-points-target="map"
         data-distance_unit="<%= DISTANCE_UNIT %>"
         data-api_key="<%= current_user.api_key %>"
+        data-self_hosted="<%= @self_hosted %>"
         data-user_settings='<%= current_user.settings.to_json.html_safe %>'
         data-coordinates="<%= @coordinates %>"
         data-distance="<%= @distance %>"