create OSM.MapLibre.defaultSecondaryMapOptions to share the map style between the secondary maps

Author: CommanderStorm

app/assets/javascripts/dashboard.js

@@ -1,25 +1,11 @@
 //= require maplibre.map
-//= require maplibre.i18n
 //= require maplibre.combinedcontrolgroup
 
 $(function () {
-  const defaultHomeZoom = 11;
   let map;
 
   if ($("#map").length) {
-    map = new maplibregl.Map({
-      container: "map",
-      style: OSM.MapLibre.Styles.Mapnik,
-      attributionControl: false,
-      locale: OSM.MapLibre.Locale,
-      rollEnabled: false,
-      dragRotate: false,
-      pitchWithRotate: false,
-      bearingSnap: 180,
-      maxPitch: 0,
-      center: OSM.home ? [OSM.home.lon, OSM.home.lat] : [0, 0],
-      zoom: OSM.home ? defaultHomeZoom : 0
-    });
+    map = new maplibregl.Map(OSM.MapLibre.defaultSecondaryMapOptions);
 
     const position = $("html").attr("dir") === "rtl" ? "top-left" : "top-right";
     const navigationControl = new maplibregl.NavigationControl({ showCompass: false });

app/assets/javascripts/maplibre.map.js

@@ -1,4 +1,5 @@
 //= require maplibre-gl/dist/maplibre-gl
+//= require maplibre.i18n
 
 OSM.MapLibre.Styles.Mapnik = {
   version: 8,
@@ -21,6 +22,21 @@ OSM.MapLibre.Styles.Mapnik = {
   ]
 };
 
+OSM.MapLibre.defaultHomeZoom = 11;
+OSM.MapLibre.defaultSecondaryMapOptions = {
+  container: "map",
+  style: OSM.MapLibre.Styles.Mapnik,
+  attributionControl: false,
+  locale: OSM.MapLibre.Locale,
+  rollEnabled: false,
+  dragRotate: false,
+  pitchWithRotate: false,
+  bearingSnap: 180,
+  maxPitch: 0,
+  center: OSM.home ? [OSM.home.lon, OSM.home.lat] : [0, 0],
+  zoom: OSM.home ? OSM.MapLibre.defaultHomeZoom : 0
+};
+
 // Helper function to create Leaflet style (SVG comes from Leaflet) markers for MapLibre
 // new maplibregl.Marker({ color: color }) is simpler, but does not have the exact same gradient
 OSM.MapLibre.getMarker = function ({ icon = "dot", color = "var(--marker-red)", ...options }) {

app/assets/javascripts/user.js

@@ -1,10 +1,8 @@
 //= require maplibre.map
-//= require maplibre.i18n
 //= require maplibre.combinedcontrolgroup
 //= require ./home_location_name-endpoint
 
 $(function () {
-  const defaultHomeZoom = 11;
   let map, marker, deleted_lat, deleted_lon, deleted_home_name, homeLocationNameGeocoder, savedLat, savedLon;
 
   if ($("#social_links").length) {
@@ -52,19 +50,7 @@ $(function () {
   }
 
   if ($("#map").length) {
-    map = new maplibregl.Map({
-      container: "map",
-      style: OSM.MapLibre.Styles.Mapnik,
-      attributionControl: false,
-      locale: OSM.MapLibre.Locale,
-      rollEnabled: false,
-      dragRotate: false,
-      pitchWithRotate: false,
-      bearingSnap: 180,
-      maxPitch: 0,
-      center: OSM.home ? [OSM.home.lon, OSM.home.lat] : [0, 0],
-      zoom: OSM.home ? defaultHomeZoom : 0
-    });
+    map = new maplibregl.Map(OSM.MapLibre.defaultSecondaryMapOptions);
 
     savedLat = $("#home_lat").val();
     savedLon = $("#home_lon").val();
@@ -132,7 +118,7 @@ $(function () {
       const lat = $("#home_lat").val(),
             lon = $("#home_lon").val();
 
-      map.flyTo({ center: [lon, lat], zoom: defaultHomeZoom });
+      map.flyTo({ center: [lon, lat], zoom: OSM.MapLibre.defaultHomeZoom });
     });
 
     $("#home_delete").click(function () {