support satellite imagery map layer from esri

src/public/index.html

@@ -27,6 +27,10 @@
     <link rel="stylesheet" href="plugins/leaflet.markercluster/MarkerCluster.css"/>
     <link rel="stylesheet" href="plugins/leaflet.markercluster/MarkerCluster.Default.css"/>
 
+    <!-- leaflet groupedlayercontrol -->
+    <script src="plugins/leaflet.groupedlayercontrol/leaflet.groupedlayercontrol.js"></script>
+    <link rel="stylesheet" href="plugins/leaflet.groupedlayercontrol/leaflet.groupedlayercontrol.css"/>
+
     <!-- moment -->
     <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
 
@@ -2025,9 +2029,14 @@
 
     var openStreetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 22, // increase from 18 to 22
-        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> | Data from <a target="_blank" href="https://meshtastic.org/docs/software/integrations/mqtt/">Meshtastic</a>',
+        attribution: 'Tiles &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> | Data from <a target="_blank" href="https://meshtastic.org/docs/software/integrations/mqtt/">Meshtastic</a>',
     }).addTo(map);
 
+    var esriWorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+        maxZoom: 21, // esri doesn't have tiles closer than this
+        attribution: 'Tiles &copy; <a href="https://developers.arcgis.com/documentation/mapping-apis-and-services/deployment/basemap-attribution/">Esri</a> | Data from <a target="_blank" href="https://meshtastic.org/docs/software/integrations/mqtt/">Meshtastic</a>'
+    });
+
     // create layer groups
     var nodesLayerGroup = new L.LayerGroup();
     var neighboursLayerGroup = new L.LayerGroup();
@@ -2068,16 +2077,9 @@
         return div;
     };
 
-    var baseLayers = {
-        "Nodes (All)": nodesLayerGroup,
-        "Nodes (Clustered)": nodesClusteredLayerGroup,
-        "Nodes (Hide All)": new L.LayerGroup(),
-    };
-
-    var overlays = {
-        "Legend": legendLayerGroup,
-        "Neighbours": neighboursLayerGroup,
-        "Waypoints": waypointsLayerGroup,
+    var tileLayers = {
+        "Map": openStreetMap,
+        "Satellite": esriWorldImagery,
     };
 
     // handle adding/remove legend on map (can't use L.Control as an overlay, so we toggle an empty L.LayerGroup)
@@ -2092,7 +2094,21 @@
     });
 
     // add layers to control ui
-    L.control.layers(baseLayers, overlays).addTo(map);
+    L.control.groupedLayers(tileLayers, {
+        "Nodes": {
+            "All": nodesLayerGroup,
+            "Clustered": nodesClusteredLayerGroup,
+            "None": new L.LayerGroup(),
+        },
+        "Overlays": {
+            "Legend": legendLayerGroup,
+            "Neighbours": neighboursLayerGroup,
+            "Waypoints": waypointsLayerGroup,
+        },
+    }, {
+        // make the "Nodes" group exclusive (use radio inputs instead of checkbox)
+        exclusiveGroups: ["Nodes"],
+    }).addTo(map);
 
     // enable base layers
     nodesClusteredLayerGroup.addTo(map);