esri/basemap baseLayers collection

678
3
Jump to solution
02-15-2017 07:47 AM
MichaelTownshend
New Contributor III

I am in the process of building a custom web app that I have working properly using the JSAPI v 3.19. This is my first experience with the 4.2 version.  I can not find examples of how to properly build a new Basemap in the 4.2 docs.

When I replace the reference to customBaseMap in the Map object with "hybrid" it works fine as it is using a basemap from AGOL.  When I reference customeBaseMap in the Map object I get a blank map.  When I use FireBug or the IE Developer tools I get no error.  Attached is the full code.  Below is a snip of the JS:

<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Basemap",
"dojo/domReady!"
],
function(
Map, MapView,Basemap
) {

var imageURL = "http://firstmap.gis.delaware.gov/arcgis/rest/services/DE_Imagery/DE_Imagery_2012/ImageServer";
var labelURL = "http://firstmap.gis.delaware.gov/arcgis/rest/services/BaseMap/DE_AerialCache/MapServer";

var customBasemap = new Basemap({
baseLayers: [
{ url: imageURL },
{ url: labelURL }
],
title: "Satellite",
id: "myMap"
});

var map = new Map({
basemap: customBasemap
});

var view = new MapView({
container: "viewDiv",
map: map,
extent: { 
xmin: -8444782,
ymin: 4634522,
xmax: -8360273,
ymax: 4853595,
spatialReference: 102100
}
});

});
</script>

Has anyone run into this before or know if some solid documentation on how to build a collection of custom basemaps?

0 Kudos
1 Solution

Accepted Solutions
thejuskambi
Regular Contributor

Hello Michael,

The value you have passed for the baseLayers is wrong. You either need to send an instance of layer or object which it can identify as layer. Right now it might not be able identify which type of layer it is by just url.

Here is an example for creating custom basemap.

Custom Basemap | ArcGIS API for JavaScript 4.2 

Hope this was helpful.

View solution in original post

3 Replies
thejuskambi
Regular Contributor

Hello Michael,

The value you have passed for the baseLayers is wrong. You either need to send an instance of layer or object which it can identify as layer. Right now it might not be able identify which type of layer it is by just url.

Here is an example for creating custom basemap.

Custom Basemap | ArcGIS API for JavaScript 4.2 

Hope this was helpful.

MichaelTownshend
New Contributor III

I get what you are saying... My method in the attached example does work using 3.19 so this is a little different.  I tried creating 2 instances of a TileLayer and then adding them to the baseLayers property of the Basemap object.  The map still does not display and I still do not get errors.

<script>

require([

"esri/Map",

"esri/views/MapView",

"esri/layers/TileLayer",

"esri/Basemap",

"dojo/domReady!"

],

function(

Map, MapView, Basemap, TileLayer

) {

 

var imageLayer = new TileLayer({

url: "http://firstmap.gis.delaware.gov/arcgis/rest/services/DE_Imagery/DE_Imagery_2012/ImageServer"

});

var labelLayer = new TileLayer({

url: "http://firstmap.gis.delaware.gov/arcgis/rest/services/BaseMap/DE_AerialCache/MapServer"

});

var customBasemap = new Basemap({

baseLayers: [imageLayer, labelLayer],

title: "Satellite",

id: "myMap"

});

var map = new Map({

basemap: customBasemap

});

var view = new MapView({

container: "viewDiv",

map: map,

extent: { // autocasts as new Extent()

xmin: -8444782,

ymin: 4634522,

xmax: -8360273,

ymax: 4853595,

spatialReference: 102100

}

});

 

 

});

</script>

0 Kudos
MichaelTownshend
New Contributor III

Disregard my last response...  Your recommendation worked.  Basemap and TileLayer were in the wrong order.

0 Kudos