No basemap causing error

TiakiRice · ‎01-19-2016

I am trying to create a web based map viewer which consists of a single Map Service with no base map layer.

I have managed to do this with the 3.15 API by specifying no base map, however when I try to do this with the 4.0 API beta the layer is displayed but I get the following error on load:

Uncaught TypeError: a.constrain is not a function

Additionally when I try to zoom or pan the map I get the following error:

Uncaught TypeError: this.constraints.constrain is not a function

Here is my javascript code:

var map;
var layer ;
var view;
require(
                [
                    "esri/Map",
                    "esri/views/MapView",
                    "esri/layers/ArcGISDynamicLayer"
                ],
                function(
                        Map,
                        MapView,
                        ArcGISDynamicLayer,
                ){

                    layer = new ArcGISDynamicLayer({
                        url: "http://my.service.url"
                    });

                    map = new Map({
                        layers: [layer]
                    });

                    view = new MapView({
                        container: "map",
                        map: map,
                        ui: {
                            components: ["compass"]
                        }
                    });
                }
);

Also if I put in a basemap everything works correctly.

RickeyFight · ‎01-20-2016

Byron,

Look here: Local scene grid

It looks like at this point you cannot remove a basemap.

Kristian Ekenes

TiakiRice · ‎01-20-2016

That is in SceneView, would the same apply to MapView?

KristianEkenes · ‎02-11-2016

This is a bug that we're working on fixing for the 4.0 final release.

TiakiRice · ‎02-14-2016

Thanks for the info Kristian!

MichaelMatuszak · ‎02-16-2016

Given this issue, has anyone been able to successfully create their own custom Basemap? I've tried creating an instance using the url to one my locally-hosted tiled services, but the URLs it generates to request tiles seem to be off. My services were using a state-plain spatial reference (WKID 4269), which I passed as an option. Is it possible that it expects a Basemap to be in a specific spatial reference, or be generated a particular way? If anyone has any guidance or could provide a working code example I'd be much obliged.

YannCabon · ‎02-17-2016

I create a temporary workaround here: JS Bin - Collaborative JavaScript Debugging

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>MapView</title>


  <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/4.0beta3/esri/css/main.css">
  <style type="text/css" media="screen">
    html, body, #mapDiv {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }
  </style>


  <script src="//js.arcgis.com/4.0beta3/"></script>


  <script>
    var map, view;


    require([
      "esri/Map",
      "esri/Basemap",


      "esri/layers/Layer",
      "esri/layers/ArcGISDynamicLayer",


      "esri/layers/support/TileInfo",
      "esri/layers/support/LOD",


      "esri/geometry/Point",
      "esri/geometry/Extent",
      "esri/geometry/SpatialReference",


      "esri/views/MapView",


      "dojo/domReady!"
    ], function (
      Map, Basemap,
      Layer, ArcGISDynamicLayer,
      TileInfo, LOD,
      Point, Extent, SpatialReference,
      MapView
    ) {


      map = new Map({
        layers: [
          new ArcGISDynamicLayer({
            url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/PoolPermits/MapServer"
          })
        ],
        basemap: new Basemap({
          baseLayers: [
            new Layer({
              viewModulePaths: {},
              initialExtent: new Extent(-20037508.342787, -20037508.342780, 20037508.342780, 20037508.342787, SpatialReference.WebMercator),
              tileInfo: new TileInfo({
                rows: 256,
                cols: 256,
                dpi: 96,
                format: "PNG8",
                compressionQuality: 0,
                origin: new Point({
                  x: -20037508.342787,
                  y: 20037508.342787,
                  spatialReference: SpatialReference.WebMercator
                }),
                spatialReference: SpatialReference.WebMercator,
                lods: [
                  new LOD({ level: 0, scale: 591657527.591555, resolution: 156543.033928 }),
                  new LOD({ level: 1, scale: 295828763.795777, resolution: 78271.5169639999 }),
                  new LOD({ level: 2, scale: 147914381.897889, resolution: 39135.7584820001 }),
                  new LOD({ level: 3, scale: 73957190.948944, resolution: 19567.8792409999 }),
                  new LOD({ level: 4, scale: 36978595.474472, resolution: 9783.93962049996 }),
                  new LOD({ level: 5, scale: 18489297.737236, resolution: 4891.96981024998 }),
                  new LOD({ level: 6, scale: 9244648.868618, resolution: 2445.98490512499 }),
                  new LOD({ level: 7, scale: 4622324.434309, resolution: 1222.99245256249 }),
                  new LOD({ level: 8, scale: 2311162.217155, resolution: 611.49622628138 }),
                  new LOD({ level: 9, scale: 1155581.108577, resolution: 305.748113140558 }),
                  new LOD({ level: 10, scale: 577790.554289, resolution: 152.874056570411 }),
                  new LOD({ level: 11, scale: 288895.277144, resolution: 76.4370282850732 }),
                  new LOD({ level: 12, scale: 144447.638572, resolution: 38.2185141425366 }),
                  new LOD({ level: 13, scale: 72223.819286, resolution: 19.1092570712683 }),
                  new LOD({ level: 14, scale: 36111.909643, resolution: 9.55462853563415 }),
                  new LOD({ level: 15, scale: 18055.954822, resolution: 4.77731426794937 }),
                  new LOD({ level: 16, scale: 9027.977411, resolution: 2.38865713397468 }),
                  new LOD({ level: 17, scale: 4513.988705, resolution: 1.19432856685505 }),
                  new LOD({ level: 18, scale: 2256.994353, resolution: 0.597164283559817 }),
                  new LOD({ level: 19, scale: 1128.497176, resolution: 0.298582141647617 })
                ]
              })
            })
          ]
        })
      });


      view = new MapView({
        container: "mapDiv",
        center: [-100, 40],
        zoom: 4,
        map: map
      });


      map.layers.getItemAt(0).then(function(layer) {
        view.extent = layer.fullExtent;
      })


    });
  </script>
</head>
<body>
  <div id="mapDiv">
  </div>
</body>
</html>

MichaelMatuszak · ‎02-17-2016

Thanks a ton, that works perfectly.