Adding Custom Basemap in Basemap Gallery Widget

2506
3
Jump to solution
06-18-2018 02:58 AM
DenisGlibanovic
New Contributor III

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 Esteemed Contributor

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 Esteemed Contributor

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
DenisGlibanovic
New Contributor III

Robert,

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

Denis

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Great.

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