topic Re: How to set ESRI Community map as basemap in ArcGIS JavaScript Maps SDK Questions

How to set ESRI Community map as basemap

RichardMoussopo — Fri, 22 Nov 2019 16:42:04 GMT

All, I have been having a hard time with this and I thought I ask the community. ESRI recently updated the community map and I really like to use it as a basemap in my application. There is no name for it in the API like others ('streets', 'topo', etc) and of course I could not find the rest end point for the service. So I tried to make use of the BasemapGallery which includes the Community map and here is the script I tried:

// init the map

require([

'esri/map',

'esri/dijit/BasemapGallery',

'dojo/_base/array'

], (Map, BasemapGallery, array) => {

const __map = new Map("map-view", {

center: [-84.242458, 40.144803],

zoom: 15,

basemap: "topo-vector" // there is no name for the community map in the collection

});

const _basemapGallery = new BasemapGallery({

showArcGISBasemaps: true,

map: __map

}, "basemapGalleryDiv");

_basemapGallery.on("load", evt => {

console.log(evt.target.basemaps);

array.map(evt.target.basemaps, b =>{

if(b.title === "Community Map"){

_basemapGallery.select(b.id); // This only selects the map (will be added on top of the current basemap 'topo-vector') but not setting it as basemap

}

});

Any suggestions please?

Re: How to set ESRI Community map as basemap

DavidColey — Sat, 11 Dec 2021 09:06:39 GMT

So this isn't working for you because the 'Community' layer you are pointing to isn't a webmap, it is a vector tile layer, and as far as I know you can't set a vector tile layer as a basemap. Instead, look for the 'Community Map' webmap from living atlas, add that webmap to your org, and then do something like this:

const imgBasemap = new Basemap({
 portalItem: {
 id: "4509cfefb72e4c5b977f6ee568116a6b"
 },
 thumbnailUrl: "css/Aerial2013r2.png"
 });
 const localBasemap = new Basemap({
 portalItem: {
 id: "7a474639e9204183a96063e3ab34bea7"
 },
 thumbnailUrl: "css/LocalMap_r1.png"
 });
 const topoBasemap = new Basemap({
 portalItem: {
 id: "a0cdf807f11f4a1db617aef111760c8a"
 },
 thumbnailUrl: "css/WorldTopo.jpg"
 });
 
 const basemapGallery = new BasemapGallery({
 view: app.mapView,
 source: [imgBasemap,localBasemap,topoBasemap],
 container: "collapseBasemap"
 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

where you are adding the webmaps you want to use by pulling them in by portalItem id and then adding them to the basemap gallery

Re: How to set ESRI Community map as basemap

RichardMoussopo — Fri, 22 Nov 2019 22:41:16 GMT

Hi David, thank you for looking into this. I forgot to mentioned I am using version 3.x, 3.30 to be specific and there is no "portalItem" property for Basemap.

Re: How to set ESRI Community map as basemap

DavidColey — Mon, 25 Nov 2019 20:57:20 GMT

Well, in that case look at the constructor details for the basemaps gallery BasemapGallery | API Reference | ArcGIS API for JavaScript 3.30

and populate your gallery using either the basemapsGroup parameter or construct an array of basemapLayers to populate the basemap object with the .add method, then add the basemap object as an array to the basemapGallery object. You can use the 'community map' v2 tile layer as part of the basemaps layer.