ImageServer services as basemaps in JSAPI

4070
8
02-24-2015 08:19 AM
ScottDickison
New Contributor III

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?
0 Kudos
8 Replies
RobertScheitlin__GISP
MVP Emeritus

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?

ScottDickison
New Contributor III

Excellent. Thank you very much.

0 Kudos
KellyHutchins
Esri Frequent Contributor

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

Thanks,

We'll give support a call tomorrow.

0 Kudos
ScottDickison
New Contributor III

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.

0 Kudos
KenBuja
MVP Esteemed Contributor

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);
});

basemap.png

ScottDickison
New Contributor III

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.

0 Kudos
ScottDickison
New Contributor III

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.

0 Kudos