topic Add a mapservice as a basemap? in ArcGIS Server with JavaScript API Questions

Add a mapservice as a basemap?

Muqit_Zoarder — Fri, 18 Aug 2017 08:15:52 GMT

Hello Everyone, is it possible to add a featureclass mapservice as a base map in esri basemap gallery with existing basemaps in arcgis js api and also can I see the pop-up information of layer onclick event?

Thanks

Re: Add a mapservice as a basemap?

RobertScheitlin__GISP — Fri, 18 Aug 2017 13:04:05 GMT

Muqit,

Sure see this blog post about custom basemaps:

Using custom basemaps | ArcGIS Blog

If you configure popups for that layer then yes.

Re: Add a mapservice as a basemap?

Muqit_Zoarder — Sun, 20 Aug 2017 19:39:47 GMT

Hi Robert, thanks for your suggestions, but your blog example in not my case, because all the examples there is related to arcgis online! I am working on seperate web mapping application made by our own, based on arcgis js api. So is it possible to add a mapservice from arcgis server in existing arcgis api base map gallery as a basemap and it will also act like a map feature thus we can see the onclick popup information...Thanks

Re: Add a mapservice as a basemap?

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:36:45 GMT

Muqit,

Yes it is. Here is a sample:

<!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="http://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.21/esri/css/esri.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #map {
      padding: 0;
    }
  </style>

  <script src="http://js.arcgis.com/3.21/"></script>
  <script>
    var map, bi;
    require([
      "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
      "esri/geometry/Extent",
      "dojo/parser", "esri/dijit/BasemapLayer", "esri/dijit/Basemap",
      "dijit/registry", "esri/dijit/util/busyIndicator", "dojo/on",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
      "dojo/domReady!"
    ], function(
      Map, BasemapGallery, arcgisUtils, Extent,
      parser, BasemapLayer, Basemap, registry, busyUtil, on
    ) {
      parser.parse();

      var initialExtent = new Extent({
        "xmin": -9810056.969652807,
        "ymin": 5131134.153249637,
        "xmax": -9807827.850611234,
        "ymax": 5132506.6820363635,
        "spatialReference": {
          "wkid": 102100
        }
      });

      map = new Map("map", {
        extent: initialExtent,
        smartNavigation: false,
        logo: false,
        showAttribution: false,
        zoom: 16,
        slider: false
      });

      map.on("zoom-end", function(evt) {
        console.info(evt.level);
      });

      bi = busyUtil.create({
        target: "map",
        fadeDuration: 500
      });

      var basemaps = [];

      var myLayer = new BasemapLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/CommunityAddressing/MapServer"
      });
      var myBasemap = new Basemap({
        layers: [myLayer],
        title: "Community Addresses",
        thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/86de95d4e0244cba80f0fa2c9403a7b2/info/thumbnail/tempimagery.jpg"
      });
      basemaps.push(myBasemap);

      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        basemaps: basemaps,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();

      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error:  ", msg);
      });

      basemapGallery.on("selection-change", function(evt) {
        var pane = registry.byId("bmTitlePane");
        if (pane.open) {
          pane.toggle();
        }
      });
    });
  </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" id="bmTitlePane" 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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Add a mapservice as a basemap?

Muqit_Zoarder — Wed, 23 Aug 2017 07:50:09 GMT

Hello Robert, thanks for your code, example seems good but the onlick event is not working for the new basemap layer. see my screenshort.

Re: Add a mapservice as a basemap?

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:36:48 GMT

Muqit,

OK a basemap does not have a infotemplate by default so that takes some more coding:

<!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="http://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.21/esri/css/esri.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #map {
      padding: 0;
    }
  </style>

  <script src="http://js.arcgis.com/3.21/"></script>
  <script>
    var map, bi;
    require([
      "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
      "esri/geometry/Extent", "esri/InfoTemplate",
      "dojo/parser", "esri/dijit/BasemapLayer", "esri/dijit/Basemap",
      "dijit/registry", "esri/dijit/util/busyIndicator", "dojo/on",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
      "dojo/domReady!"
    ], function(
      Map, BasemapGallery, arcgisUtils, Extent, InfoTemplate,
      parser, BasemapLayer, Basemap, registry, busyUtil, on
    ) {
      parser.parse();

      var initialExtent = new Extent({
        "xmin": -9810056.969652807,
        "ymin": 5131134.153249637,
        "xmax": -9807827.850611234,
        "ymax": 5132506.6820363635,
        "spatialReference": {
          "wkid": 102100
        }
      });

      map = new Map("map", {
        extent: initialExtent,
        smartNavigation: false,
        logo: false,
        showAttribution: false,
        zoom: 16,
        slider: false
      });

      map.on("zoom-end", function(evt) {
        console.info(evt.level);
      });

      bi = busyUtil.create({
        target: "map",
        fadeDuration: 500
      });

      var basemaps = [];

      var myLayer = new BasemapLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/CommunityAddressing/MapServer"
      });
      var _addressInfoTemplate = new InfoTemplate("Attributes", "${*}");
      var myBasemap = new Basemap({
        layers: [myLayer],
        title: "Community Addresses",
        thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/86de95d4e0244cba80f0fa2c9403a7b2/info/thumbnail/tempimagery.jpg"
      });
      basemaps.push(myBasemap);

      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        basemaps: basemaps,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();

      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error:  ", msg);
      });

      basemapGallery.on("selection-change", function(evt) {
        if(evt.target._selectedBasemap.title === "Community Addresses"){
          var lyr = map.getLayer(map.layerIds[0]);
          if(lyr && !lyr.infoTemplates){
            lyr.setInfoTemplates({
              0: { infoTemplate: _addressInfoTemplate }
            });
          }
        }
        var pane = registry.byId("bmTitlePane");
        if (pane.open) {
          pane.toggle();
        }
      });
    });
  </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" id="bmTitlePane" 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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

Re: Add a mapservice as a basemap?

Muqit_Zoarder — Thu, 24 Aug 2017 07:54:05 GMT

Hello Robert, Thanks for your code, but at my side your customized basemap layer is not showing any basemap! Neither my layer, that is what in my last reply I wrote.

Regards

Re: Add a mapservice as a basemap?

Muqit_Zoarder — Thu, 24 Aug 2017 08:51:12 GMT

No result if i click on new basemap "community address"

Re: Add a mapservice as a basemap?

RobertScheitlin__GISP — Thu, 24 Aug 2017 11:48:02 GMT

Muqit,

You may need to zoom in on the custom basemap so that the map is beyond the min scale of that layer. Here is a snapshot of what I see:

Re: Add a mapservice as a basemap?

Muqit_Zoarder — Thu, 24 Aug 2017 15:18:23 GMT

<!DOCTYPE html>
<html>

    #map {
      padding: 0;
    }
</style>

     var initialExtent = new Extent({
            "xmin": -765808.3553340577,
            "ymin": 5736644.734566803,
            "xmax": 2533825.281679554,
            "ymax": 7375454.621000546,
            "spatialReference": {
                "wkid": 102100 }
        });

      map = new Map("map", {
        extent: initialExtent,
        smartNavigation: false,
        logo: false,
        showAttribution: false,
        zoom: 12,
        slider: false
      });

      map.on("zoom-end", function(evt) {
        console.info(evt.level);
      });

      bi = busyUtil.create({
        target: "map",
        fadeDuration: 500
      });

var basemaps = [];

      var myLayer = new BasemapLayer({
        url: "https://services.bgr.de/rest/services/boden/buek1000de/MapServer/"
      });
      var _addressInfoTemplate = new InfoTemplate("Attributes", "${*}");
      var myBasemap = new Basemap({
        layers: [myLayer],
        title: "Community Addresses",
        thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/86de95d4e0244cba80f0fa2c9403a7b2/info/thumbnail/tempimagery.jpg"
      });
      basemaps.push(myBasemap);

      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        basemaps: basemaps,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();

      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error: ", msg);
      });

      basemapGallery.on("selection-change", function(evt) {
        if(evt.target._selectedBasemap.title === "Community Addresses"){
          var lyr = map.getLayer(map.layerIds[0]);
          if(lyr && !lyr.infoTemplates){
            lyr.setInfoTemplates({
              0: { infoTemplate: _addressInfoTemplate }
            });
          }
        }
        var pane = registry.byId("bmTitlePane");
        if (pane.open) {
          pane.toggle();
        }
      });
    });
</script>
</head>

</div>
</div>
</body>

</html>

Re: Add a mapservice as a basemap?

Muqit_Zoarder — Thu, 24 Aug 2017 15:18:55 GMT

Hi, thanks i can see ur map now, can you please test my mapservice here i have included?

Re: Add a mapservice as a basemap?

RobertScheitlin__GISP — Thu, 24 Aug 2017 16:18:16 GMT

Muqit,

Your layer is in a different spatial reference then the standard esri basemaps so it will not work with them.

Re: Add a mapservice as a basemap?

Muqit_Zoarder — Fri, 25 Aug 2017 11:14:33 GMT

Hello Robet, can I change spatial ref on the fly?

Regards

Re: Add a mapservice as a basemap?

RobertScheitlin__GISP — Fri, 25 Aug 2017 11:27:43 GMT

No all your basemaps have the be the same spatial reference to begin with.

Re: Add a mapservice as a basemap?

BrandonPrice — Tue, 14 Nov 2017 07:04:47 GMT

To piggy back on this, is it possible to add an onclick event to a basemap toggle? such as to remove another layer in the map as well as the basemap change?

Re: Add a mapservice as a basemap?

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:36:51 GMT

Brandon,

Sure just add your logic to the selection-change event handler:

      basemapGallery.on("selection-change", function(evt) {
        if(evt.target._selectedBasemap.title === "Community Addresses"){
          var lyr = map.getLayer(map.layerIds[0]);
          if(lyr && !lyr.infoTemplates){
            lyr.setInfoTemplates({
              0: { infoTemplate: _addressInfoTemplate }
            });
          }
        }
        var pane = registry.byId("bmTitlePane");
        if (pane.open) {
          pane.toggle();
        }
      });‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Add a mapservice as a basemap?

BrandonPrice — Fri, 17 Nov 2017 16:32:26 GMT

Thanks Robert. This was very helpful. I am still trying to work this out.