Add a mapservice as a basemap?

3016
16
08-18-2017 01:15 AM
Muqit_Zoarder
Occasional Contributor

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

Tags (1)
0 Kudos
16 Replies
RobertScheitlin__GISP
MVP Emeritus

Muqit,

 Sure see this blog post about custom basemaps:

Using custom basemaps | ArcGIS Blog 

If you configure popups for that layer then yes.

0 Kudos
Muqit_Zoarder
Occasional Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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/tem..."
      });
      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>
Muqit_Zoarder
Occasional Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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/tem..."
      });
      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.

Muqit_Zoarder
Occasional Contributor

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

0 Kudos
Muqit_Zoarder
Occasional Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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:

Muqit_Zoarder
Occasional Contributor

<!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": -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/tem..."
      });
      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>

0 Kudos