Changed datasets.json to allow for multiple basemaps

web_tool/datasets.json

@@ -2,7 +2,6 @@
     "hcmc_sentinel": {
         "metadata": {
             "displayName": "Ho Chi Minh City, Vietnam",
-            "imageryName": "Sentinel Imagery",
             "locationName": null
         },
         "dataLayer": {
@@ -11,19 +10,22 @@
             "padding": 500,
             "resolution": 10
         },
-        "basemapLayer": {
+        "basemapLayers": [
-            "initialZoom": 11,
+            {
-            "url": "data/basemaps/hcmc_sentinel_tiles/{z}/{x}/{y}.png",
+                "layerName": "Sentinel Imagery",
-            "initialLocation": [ 10.682, 106.752 ],
+                "initialZoom": 11,
-            "args": {
+                "url": "data/basemaps/hcmc_sentinel_tiles/{z}/{x}/{y}.png",
-                "attribution": "Georeferenced Image",
+                "initialLocation": [ 10.682, 106.752 ],
-                "tms": true,
+                "args": {
-                "maxNativeZoom": 16,
+                    "attribution": "Georeferenced Image",
-                "maxZoom": 20,
+                    "tms": true,
-                "minZoom": 10,
+                    "maxNativeZoom": 16,
-                "bounds": [[10.516963329949858, 106.88465642003204], [10.850214900118745, 106.55144323441078]]
+                    "maxZoom": 20,
+                    "minZoom": 10,
+                    "bounds": [[10.516963329949858, 106.88465642003204], [10.850214900118745, 106.55144323441078]]
+                }
             }
-        },
+        ],
         "shapeLayers": [
             {
                 "shapesFn": "data/zones/hcmc_sentinel_admin_1_clipped.geojson",
@@ -46,7 +48,6 @@
     "naip_maryland": {
         "metadata": {
             "displayName": "Maryland 2017",
-            "imageryName": "NAIP Imagery",
             "locationName": null
         },
         "dataLayer": {
@@ -55,19 +56,22 @@
             "padding": 20,
             "resolution": 1
         },
-        "basemapLayer": {
+        "basemapLayers": [
-            "initialZoom": 11,
+            {
-            "url": "data/basemaps/m_3807537_ne_18_1_20170611_tiles/{z}/{x}/{y}.png",
+                "layerName": "NAIP 2017 Imagery",
-            "initialLocation": [ 38.477018, -75.402312],
+                "initialZoom": 11,
-            "args": {
+                "url": "data/basemaps/m_3807537_ne_18_1_20170611_tiles/{z}/{x}/{y}.png",
-                "attribution": "Georeferenced Image",
+                "initialLocation": [ 38.477018, -75.402312],
-                "tms": true,
+                "args": {
-                "maxNativeZoom": 16,
+                    "attribution": "Georeferenced Image",
-                "maxZoom": 20,
+                    "tms": true,
-                "minZoom": 10,
+                    "maxNativeZoom": 16,
-                "bounds": [[38.43467413843691, -75.37107263863105], [38.50279589938556, -75.44149473165253]]
+                    "maxZoom": 20,
+                    "minZoom": 10,
+                    "bounds": [[38.43467413843691, -75.37107263863105], [38.50279589938556, -75.44149473165253]]
+                }
             }
-        },
+        ],
         "shapeLayers": [
             {
                 "shapesFn": "data/zones/m_3807537_ne_18_1_20170611_boundary.geojson",

web_tool/index.html

@@ -183,11 +183,17 @@
             //----------------------------------------------------------------------
 
             // Create the basemap for the current dataset
-            var baseLayer = L.tileLayer(DATASETS[gCurrentDataset]["basemapLayer"]["url"], DATASETS[gCurrentDataset]["basemapLayer"]["args"]);
+            var baseLayer = L.tileLayer(DATASETS[gCurrentDataset]["basemapLayers"][0]["url"], DATASETS[gCurrentDataset]["basemapLayers"][0]["args"]);
             
             // This is the list of basemaps that will be displayed on the control in bottom left of GUI
-            gCurrentBasemapLayerName = DATASETS[gCurrentDataset]["metadata"]["imageryName"];
+            gCurrentBasemapLayerName = DATASETS[gCurrentDataset]["basemapLayers"][0]["layerName"];
-            gBasemaps[DATASETS[gCurrentDataset]["metadata"]["imageryName"]] = baseLayer;
+
+            gBasemaps[gCurrentBasemapLayerName] = baseLayer;
+            for(var i=1; i<DATASETS[gCurrentDataset]["basemapLayers"].length; i++){
+                var layerName = DATASETS[gCurrentDataset]["basemapLayers"][i]["layerName"];
+                var layer = L.tileLayer(DATASETS[gCurrentDataset]["basemapLayers"][i]["url"], DATASETS[gCurrentDataset]["basemapLayers"][i]["args"])
+                gBasemaps[layerName] = layer;
+            }
             gBasemaps["OpenStreetMap"] = getOSMLayer();
             gBasemaps["ESRI World Imagery"] = getESRILayer();
 
@@ -203,8 +209,8 @@
             gMap = L.map('map', {
                 zoomControl: false,
                 crs: L.CRS.EPSG3857, // this is the projection CRS (EPSG:3857), but it is different than the data CRS (EPSG:4326). See https://gis.stackexchange.com/questions/225765/leaflet-map-crs-is-3857-but-coordinates-4326/225786.
-                center: DATASETS[gCurrentDataset]["basemapLayer"]["initialLocation"],
+                center: DATASETS[gCurrentDataset]["basemapLayers"][0]["initialLocation"],
-                zoom: DATASETS[gCurrentDataset]["basemapLayer"]["initialZoom"],
+                zoom: DATASETS[gCurrentDataset]["basemapLayers"][0]["initialZoom"],
                 keyboard: false,
                 minZoom: baseLayer.options.minZoom,
                 layers: initialLayers

web_tool/landing_page.html

@@ -261,12 +261,11 @@
       //-----------------------
       for (var dsName in datasets) {
         var dataset = datasets[dsName];
-        var tab = `<a class="list-group-item list-group-item-action" data-toggle="list" data-name="${dsName}" href="#dataset-${dsName}"  role="tab">${dataset["metadata"]["displayName"]} - ${dataset["metadata"]["imageryName"]}</a>`;
+        var tab = `<a class="list-group-item list-group-item-action" data-toggle="list" data-name="${dsName}" href="#dataset-${dsName}"  role="tab">${dataset["metadata"]["displayName"]}</a>`;
         var panel = `
             <div class="tab-pane" id="dataset-${dsName}" role="tabpanel">
               <div class="tab-pane-content">
                 <span class="tab-title">Location: </span><span class="tab-text">${dataset["metadata"]["displayName"]}</span><br>
-                <span class="tab-title">Imagery Source: </span><span class="tab-text">${dataset["metadata"]["imageryName"]}</span><br>
                 <!--<img src="${dataset["previewFn"]}" class="thumbnail" />-->
               </div>
             </div>