AnsweredAssumed Answered

Adding Custom Basemap in Basemap Gallery Widget

Question asked by G.Denis on Jun 18, 2018
Latest reply on Jun 19, 2018 by rscheitlin

I'm trying to add custom basemap from organisation ArcGIS Server in the ESRI Basemap Gallery Widget. I cannot get it to work  although my custom basemap has a same spatial reference (wkid:100102 (3857)) as ESRI Basemaps.

Has anybody Idea what I'm doing wrong?

 

Thanks

 

    <!DOCTYPE html>  
    <html>    
    <head>   
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
      <!--The viewport meta tag is used to improve the presentation and behavior of the samples   
        on iOS devices-->  
      <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>  
      <title></title>  
      
      <link rel="stylesheet" href="//js.arcgis.com/3.24/dijit/themes/claro/claro.css">      
      <link rel="stylesheet" href="//js.arcgis.com/3.24/esri/css/esri.css">  
      <style>   
        html, body { height: 100%; width: 100%; margin: 0; padding: 0; }  
        #map{  
          padding:0;  
        }  
      </style>   
        
      <script src="//js.arcgis.com/3.24/"></script>  
      <script>   
        var map;  
        require([  
          "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",  
          "dojo/parser",  
          "esri/dijit/BasemapLayer", "esri/dijit/Basemap",  
          "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",  
          "dojo/domReady!"  
        ], function(  
          Map, BasemapGallery, arcgisUtils,  
          parser, BasemapLayer, Basemap  
        ) {  
          parser.parse();  
      
          map = new Map("map");  
 

         var basemaps = [];
              
          var customBasemapLayer = new BasemapLayer({  
            url: "https://organisationServer/arcgis/rest/services/folder/MapServer"  
          });  
          var customBasemap = new Basemap({  
            layers: [customBasemapLayer],  
            title: "custom Basemap",  
            thumbnailUrl: "images/basemap.png"  
          });  
          basemaps.push(customBasemap);  
        
          var worldImageryLayer = new BasemapLayer({  
            url: "http://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer"  
          });  
          var satelliteBasemap = new Basemap({  
            layers: [worldImageryLayer],  
            title: "Satellite",  
            thumbnailUrl: "images/satellite.png"  
          });  
          basemaps.push(satelliteBasemap);  
          
         
          var basemapGallery = new BasemapGallery({  
            showArcGISBasemaps: true,  
            basemaps: basemaps,  
            map: map  
          }, "basemapGallery");  
          basemapGallery.startup();  
            
        
          basemapGallery.on("error", function(msg) {  
            console.log("basemap gallery error:  ", msg);  
          });  
       
        });  
      </script>   
    </head>   
      
    <body class="claro">   
      <div data-dojo-type="dijit/layout/BorderContainer"   
           data-dojo-props="design:'headline', gutters:false"   
           style="width:100%;height:100%;margin:0;">  
      
        <div id="map"   
             data-dojo-type="dijit/layout/ContentPane"   
             data-dojo-props="region:'center'"   
             style="padding:0;">  
      
          <div style="position:absolute; right:20px; top:10px; z-Index:999;">  
            <div data-dojo-type="dijit/TitlePane"   
                 data-dojo-props="title:'Switch Basemap', closable:false, open:false">  
              <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">  
                <div id="basemapGallery"></div>  
              </div>  
            </div>  
          </div>  
      
        </div>  
      </div>  
    </body>   
      
    </html> 

Outcomes