nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ImageServer services as basemaps in JSAPI

ScottDickison

I'm defining two basemaps in version 3.12 of the Javascript API as follows:

 esriBasemaps.kytcbase = {
                   baseMapLayers: [{ url: "http://maps.kytc.ky.gov/arcgis/rest/services/BaseMap/KYTCBaseMap/MapServer" }], title: "Basemap",
                   thumbnailUrl: "http://maps.kytc.ky.gov/arcgis/rest/services/BaseMap/KYTCBaseMap/mapserver/info/thumbnail"
               };
               esriBasemaps.imagery = {
                   baseMapLayers: [{ url: "http://kyraster.ky.gov/arcgis/rest/services/ImageServices/Ky_NAIP_2012_1M/ImageServer" }], title: "Imagery",
                   thumbnailUrl: "http://kyraster.ky.gov/arcgis/rest/services/ImageServices/Ky_NAIP_2012_1M/ImageServer/info/thumbnail"
               };

Both of these services have the same spatial reference. What I'm trying to do is use these in the BasemapToggle dijit. The tiled map service displays correctly but the ImageServer service doesn't draw. The error that gets returned is:

TypeError: Unable to get property '_getInfo' of undefined or null referenceTypeError: Unable to get property '_getInfo' of undefined or null reference

My question is:

Are ImageServer services allowed to be used as basemaps?

タグ付けされた投稿をもっと見る

Accepted answers

All comments

ScottDickison

I'm going to have to put this on the back burner today. I've got some other project demands that I have to meet. I'm going to flag this in my calendar so I can revisit this because I'd really like to get these dijits working with our basemap.

ScottDickison

I tried to this yesterday evening and was unable to get it work. I followed your example code and was able to get the exact opposite to occur. This time I was able to see the imageserver service but not the tiled one. This is acting like they're in two different spatial references but they are both wkid: 102763.

I'm not sure if this is a bug as much as it is that I'm not doing something right.

ScottDickison

Thanks,

We'll give support a call tomorrow.

ScottDickison

I can switch over to the Basemap Gallery if necessary but it seemed to be a bit too much since I only had the two layers that I'm dealing with.

L77_2-1753720366388.png

kenbuja

I am able to use an ImageServer service as a Basemap in the Basemap Gallery

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

var chartsBMLayer = new BasemapLayer({
    url: "http://seamlessrnc.nauticalcharts.noaa.gov/arcgis/rest/services/RNC/NOAA_RNC/ImageServer"
});
var chartBaseMap = new Basemap({
    layers: [chartsBMLayer],
    title: "NOAA Charts",
    id: "NOAAChart",
    thumbnailUrl: "../_assets/resources/assets/images/chartbasemap.png"
});
basemapGallery.on("load", function () {
    basemapGallery.add(chartBaseMap);
});

khutchins

I ran a quick test using your demo code and the code looks ok. I can try and look at it in more depth later but I think Scott should contact support for this one.

ScottDickison

Excellent. Thank you very much.

RobertScheitlin__GISP

Scott,

I have thrown together a simple app for testing purposes and I do see the issue you are running into. I am not sure what the issue is but this simple test app will help esri staff to diagnose the issue.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Basemap Toggle</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
  <style>
    html, body, #map {
      padding:0;
      margin:0;
      height:100%;
    }
    #BasemapToggle {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 50;
    }
  </style>
  <script src="http://js.arcgis.com/3.12/"></script>
  <script>
var map;
    require([
      "esri/map",
      "esri/dijit/BasemapToggle",
      "esri/dijit/Basemap",
      "esri/dijit/BasemapLayer",
      "esri/geometry/Extent",
      "esri/basemaps",
      "dojo/domReady!"
    ], function(
      Map,
      BasemapToggle,
      Basemap,
      BasemapLayer,
      Extent,
      esriBasemaps
    )  {

      esriBasemaps.kytcbase = {
        baseMapLayers: [{ url: "http://maps.kytc.ky.gov/arcgis/rest/services/BaseMap/KYTCBaseMap/MapServer" }], title: "Basemap",
        thumbnailUrl: "http://maps.kytc.ky.gov/arcgis/rest/services/BaseMap/KYTCBaseMap/mapserver/info/thumbnail",
        title: "Kentucy Base"
      };
      esriBasemaps.kyimagery = {
        baseMapLayers: [{ url: "http://kyraster.ky.gov/arcgis/rest/services/ImageServices/Ky_NAIP_2012_1M/ImageServer" }], title: "Imagery",
        thumbnailUrl: "http://kyraster.ky.gov/arcgis/rest/services/ImageServices/Ky_NAIP_2012_1M/ImageServer/info/thumbnail",
        title: "Kentucy Imagery"
      };

      map = new Map("map", {
        extent: new Extent({xmin:3595646.0096294726,ymin:2804803.5152565213,xmax:6154239.759629473,ymax:4701504.904145411,spatialReference:{wkid:102763}}),
        zoom: 3,
        basemap: 'kytcbase'
      });

      var toggle = new BasemapToggle({
        map: map,
        basemap: 'kyimagery'
      }, "BasemapToggle");
      toggle.startup();

    });
  </script>
</head>
<body>
  <div id="map" class="map">
    <div id="BasemapToggle"></div>
  </div>
</body>
</html>

Kelly Hutchins‌ Any ideas on this or should Scott just call tech support on this?

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.