Extra base map tile providers

src/main/webapp/WEB-INF/jsp/accession/map.jsp

@@ -37,10 +37,14 @@
 
             <ul class="dropdown-menu">
                 <li>
-                    <label class="label-map-provider"><input class="map-provider" name="provider" style='margin-right: 10px;margin-left: 5px'
+                    <label class="label-map-provider"><input class="map-provider" value="mapQuest" name="provider" style='margin-right: 10px;margin-left: 5px'
                                   type='radio'>MapQuest</label>
-                    <label class="label-map-provider"><input name="provider" class="map-provider" style='margin-right: 10px;margin-left: 5px'
+                    <label class="label-map-provider"><input name="provider" value="openstreetmap" class="map-provider" style='margin-right: 10px;margin-left: 5px'
                                   type='radio'>Openstreetmap</label>
+                    <label class="label-map-provider"><input name="provider" value="esriGray" class="map-provider" style='margin-right: 10px;margin-left: 5px'
+                                  type='radio'>ESRI Gray</label>
+                    <label class="label-map-provider"><input name="provider" value="esriTopo" class="map-provider" style='margin-right: 10px;margin-left: 5px'
+                                  type='radio'>ESRI Topo</label>
                 </li>
             </ul>
 
@@ -122,18 +126,25 @@
             var map = L.map('map').setView([20, 0], 2);
             var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);
             var mapProviders = {
-                Openstreetmap: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                openstreetmap: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                 }),
                 /*  OpenMapSurfer_Grayscale: L.tileLayer('http://openmapsurfer.uni-hd.de/tiles/roadsg/x={x}&y={y}&z={z}', {
                  maxZoom: 19,
                  attribution: 'Imagery from <a target="_blank" href="http://giscience.uni-hd.de/">GIScience Research Group, University of Heidelberg</a>, Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                  }),*/
-                MapQuest: L.tileLayer('https://otile{s}-s.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', {
+                mapQuest: L.tileLayer('https://otile{s}-s.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', {
                     attribution: "MapQuest",
                     styleId: 22677,
                     subdomains: ['1', '2', '3', '4'],
                     opacity: 0.6
+                }),
+                esriGray: L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
+                	attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
+                	maxZoom: 16
+                }),
+                esriTopo: L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
+                	attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
                 })
                 /*Stamen_TonerLines: L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lines/{z}/{x}/{y}.png', {
                  attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
@@ -194,15 +205,7 @@
                     })
                 }
             };
-            var cookieValue = cookieUtils.getCookie('mapProviders') || 'MapQuest';
-            [].forEach.call($('.label-map-provider'), function(label){
-                label.innerHTML.indexOf(cookieValue) > 1 ? $(label).find('input:radio').prop('checked', true)
-                        :$(label).find('input:radio').prop('checked', false);
-            });
-
-            mapProviders[cookieValue].addTo(map);
-            topPane.appendChild(mapProviders[cookieValue].getContainer());
-            mapProviders[cookieValue].setZIndex(0);
+            
             $(document).on('cookieUpdate', function () {
                 for (var key in mapProviders) {
                     map.removeLayer(mapProviders[key]);
@@ -212,13 +215,14 @@
                     topPane.appendChild(mapProviders[cookieUtils.getCookie('mapProviders')].getContainer());
                     mapProviders[cookieUtils.getCookie('mapProviders')].setZIndex(0);
                 } else {
-                    mapProviders.MapQuest.addTo(map);
+                    mapProviders.mapQuest.addTo(map);
                     topPane.appendChild(mapProviders[cookieUtils.getCookie('mapProviders')].getContainer());
-                    mapProviders.MapQuest.setZIndex(0);
+                    mapProviders.mapQuest.setZIndex(0);
                 }
             });
-            $("body").on("click", ".map-provider", function (e) {
-                var providerName = $(this).parent().text();
+
+            $('.map-provider').click(function (e) {
+                var providerName = $(this).val();
                 if ($(this).is(":checked")) {
                     cookieUtils.setCookie('mapProviders', providerName, 0);
                     $(document).trigger('cookieUpdate');
@@ -227,10 +231,22 @@
                     cookieUtils.setCookie('mapProviders', providerName, 0);
                     $(document).trigger('cookieUpdate');
                 }
-
             });
+            
             $('#color select').simplecolorpicker();
+            
+            var selectedBaseMap = cookieUtils.getCookie('mapProviders') || 'esriGray';
+            if (mapProviders[selectedBaseMap] === undefined) {
+				selectedBaseMap = 'esriGray';
+            }
+            [].forEach.call($('.label-map-provider input:radio'), function(radio){
+                 $(radio).prop('checked', $(radio).val() === selectedBaseMap);
+            });
 
+            mapProviders[selectedBaseMap].addTo(map);
+            topPane.appendChild(mapProviders[selectedBaseMap].getContainer());
+            mapProviders[selectedBaseMap].setZIndex(0);
+            
             $("#save-filter").on("click", function (event) {
                 event.preventDefault();