Adding Custom Basemap in Basemap Gallery Widget

3137
3
Jump to solution
06-18-2018 02:58 AM
Den-GIS
Occasional Contributor

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="https://community.esri.com//js.arcgis.com/3.24/dijit/themes/claro/claro.css">      
      <link rel="stylesheet" href="https://community.esri.com//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> 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Great.

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Emeritus

Denis,

   Your Layer has to have the same WKID and tiling Scheme. So if your WKID is the same then your tiling scheme must not match.

0 Kudos
Den-GIS
Occasional Contributor

Robert,

Thanks for the hint. I got it to work now.

Denis

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Great.

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.