Using own basemap with ArcGIS API for Javascript?

Question

I'm trying to make a map using the Javascript API.

I want to use my own basemap, but I can't find the most simple code to do this.

I always see something like this:

  function init() {
    map = new esri.Map("mapDiv", {
      basemap: "satellite",
      center: [-97.395, 37.537],
      zoom: 11
    });

But I don't want to use the ArcGIS online basemaps.

What is the code to make a map service I am hosting my basemap?

have you created tiles from your own basemap? – Mapperz Mar 15 '13 at 01:40 — Mapperz, Mar 15 '13 at 01:40

score 13 · Accepted Answer · answered Mar 15 '13 at 05:50

13

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

answered Mar 15 '13 at 05:50

Devdatta Tengshe

41,311
35
139
263

1

@StephenLead setBasemap only accepts string parameter, so it will not work! – digz6666 Oct 25 '17 at 10:57
2

@digz6666 oops, I think you're right. I'll delete that comment – Stephen Lead Oct 25 '17 at 22:06
2

@StephenLead I've found a way. I will post as an answer. Oops it requires 10 rep points to answer this, damn :) – digz6666 Oct 27 '17 at 01:32
@digz6666: You should not need 10 Reps to create an answer. See https://gis.stackexchange.com/help/privileges – Devdatta Tengshe Oct 27 '17 at 05:19

digz6666 · Answer 2 · 2017-10-27T02:11:55.270

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;

score 2 · Answer 3 · edited Nov 20 '14 at 17:20

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

Using own basemap with ArcGIS API for Javascript?

3 Answers3

Linked