Using own basemap with ArcGIS API for Javascript?
The API Reference for the Map Class says the following:
The following are valid options: "streets" , "satellite" , "hybrid", "topo", "gray", "oceans", "national-geographic", "osm". As of version 3.3
You should instead, just define a new ArcGIS Tiled Map Service Layer and use it as follows:
var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("your URL");
map.addLayer(baseMapLayer);
For arcgis javascript SDK version 3.x you can use esri/basemaps class to declare and register custom basemaps and use with your map: https://developers.arcgis.com/javascript/3/jsapi/esri.basemaps-amd.html
Declare and register custom basemap:
Basemaps.mybasemap = {
title: 'My custom basemap',
thumbnailUrl: 'https://js.arcgis.com/3.22/esri/images/basemap/satellite.jpg',
//itemId: 'ulas',
baseMapLayers: [
{ url: "https://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer" }
]
};
Use custom basemap in map constructor:
var map = new Map("mapDiv", {
basemap: "mybasemap",
center: [-122.69, 45.52],
zoom: 3
});
Or you can apply your custom basemap to existing map:
map.setBasemap("mybasemap");
Full code example: https://codepen.io/digz6666/pen/wPwPbW
For arcgis javascript SDK version 4.x you can use esri/Basemap.
Declare base map layer and base map:
var baseLayer = new MapImageLayer({
url: "https://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer"
});
var myBasemap = this.esri.basemap({
baseLayers: [baseLayer],
title: 'My custom basemap',
id: 'my_custom_basemap'
});
Apply basemap to existing map object:
map.basemap = myBasemap;
You don't have to specify a built-in basemap. Add your custom basemap as a layer like so.
var map;
require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"],
function (Map, ArcGISTiledMapServiceLayer ) {
map = new Map("map", {
center: [-76.756, 40.241],
zoom: 8
});
var customBasemap = new ArcGISTiledMapServiceLayer(
"http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer");
map.addLayer(customBasemap);
});