nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Adding Custom Basemaps to Basemap Gallery in 4.3

NathanSommers1

I have imagery dating back 20 years or so that I need to add to my Basemap Gallery widget in a v4.3 map. Has anyone figured out how to add these custom basemap layers to the widget in this version of the APi?

Here's an example of one of the layers I'd like to add to the Basemap Gallery.

<SPAN class="comment token">// Mapbox Basemap URL</SPAN>
 <SPAN class="keyword token">var</SPAN> mapbox <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WebTileLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 urlTemplate<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fapi.mapbox.com%2Fstyles%2Fv1%2Fmapbox%2Fstreets-v10%2Ftiles%2F256%2F" target="_blank">https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/</A><SPAN>{level}/{col}/{row}"</SPAN></SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 
 <SPAN class="comment token">// Mapbox Basemap</SPAN>
 <SPAN class="keyword token">var</SPAN> mapboxBasemap <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Basemap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 baseLayers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>mapbox<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
 title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Mapbox"</SPAN><SPAN class="punctuation token">,</SPAN>
 id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"mapbox"</SPAN><SPAN class="punctuation token">,</SPAN>
 thumbnailUrl<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"includes/images/mapbox.PNG"</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

This is how I have the Basemap Gallery widget styled right now. I'm using an Expand on it, so it may look different than the normal widget layout.

<SPAN class="comment token">//Basemap Gallery Widget</SPAN>
 <SPAN class="keyword token">var</SPAN> basemapGallery <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">BasemapGallery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
 container<SPAN class="punctuation token">:</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"div"</SPAN><SPAN class="punctuation token">)</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 
 <SPAN class="keyword token">var</SPAN> basemapGalleryExpand <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Expand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
 content<SPAN class="punctuation token">:</SPAN> basemapGallery<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN>
 expandIconClass<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"esri-icon-basemap"</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 
 view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>basemapGalleryExpand<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
 position<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"top-right"</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Also, does anyone known the line to hide the default ArcGIS Basemaps in the widget? The old line doesn't/didn't work in this version of the API. (Below is the old line of code that used to hide the default basemaps.)

showArcGISBasemaps<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

Find more posts tagged with

Accepted answers

thejuskambi

I don't see the part where you are trying to add your Basemap to the BasemapGallery. Below is the documentation for source in BasemapsGallery

The source for basemaps that the widget will display. This property can be autocast with an array or Collection of Basemaps, a Portal instance, or a URL to a portal instance. The default source is a PortalBasemapsSource that points to the default portal instance set in esriConfig.portalUrl.

You need to create an instance of LocalBasemapsSource, and set the source property of the BasemapGallery. That will clear all the protal basemaps and only your custom basemap will be available.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> localSource <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">LocalBasemapsSource</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; basemaps <SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>stamen<SPAN class="punctuation token">]</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> basemapGallery <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">BasemapGallery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; container<SPAN class="punctuation token">:</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"div"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; source<SPAN class="punctuation token">:</SPAN> localSource
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

Zdenekprocner

Hello,

my solution: all ESRI Basemaps + myBasemaps

const MyBasemap = new Basemap({
baseLayers: [
new MapImageLayer({
url: "https://xyz/MapServer/",
title: "My Title"
})
],
title: "My Title",
id: "MyID_BS",
thumbnailUrl: "https://xyz/basemap_LS.png"
});

MapImageLayer/TileLayer - Depends on the scale (LODS) MyBasemap

const basemaps = new BasemapGallery({
view,
container: "basemaps-container",
//source: MyBasemap
//source: [MyBasemap, Basemap.fromId("topo-vector"), Basemap.fromId("hybrid")]
});

basemaps.when(()=>{
setTimeout(() => {
//basemaps.source.basemaps.add(MyBasemap); // Last position
basemaps.source.basemaps.splice(0, 0, MyBasemap); // First position
}, "2000"); // :-((
});

ADITYAKUMAR1

this.customBasemap = new Basemap({

baseLayers: [

new TileLayer({

url: customBasemapServiceUrl,

title: mapservice.MapServiceName

})

title: mapservice.MapServiceName,

id: mapservice.MapServiceName,

thumbnailUrl: customBasemapServiceUrl + '/info/thumbnail'

});

ADITYAKUMAR1

Hi @syamalaNarem ,

I am facing a similar issue where I can see the map in the basemap gallery but on click nothing happens. Did you managed to solve it?

JayakumarPD

What is local source ? Not understood.

syamalaNarem

Hi ,

This code works fine if I provide BaseMaps id like topo-vector, streets , already defined once.

my local source is not working not loading any maps and no errors shown in console for my own urls.

My local source titles are displaying correctly , but no action is done when I click on it.

can you please provide one sample for changing/adding our own custom base map widget along with layers in the collection of base map for local source.

Also please provide if available in 4.22 version.

Thanks.

JayakumarPD

Hi,

Create a local base map like this

var Localbasemap = new Basemap({
baseLayers: [
new MapImageLayer({
url: "https://xyz/rest/services/xyz/xyz/MapServer",
title: "Basemap"
})
],
title: "basemap",
id: "basemap12"
});

and add it like this

var basemapGallery = new BasemapGallery({
view: view,
//source:localSource
source: [Basemap.fromId("topo-vector"), Basemap.fromId("hybrid"), Localbasemap]
});

If youo want more default basemap from esri add Basemap.fromId("what ever required")

Note: please add "esri/layers/MapImageLayer" in required library

AlifShaikh

Hi,

Can you Nathan Sommers post a complete sample code?

Regards,

Alif

NathanSommers1

Perfect. That's just what I was looking for.

thejuskambi

I don't see the part where you are trying to add your Basemap to the BasemapGallery. Below is the documentation for source in BasemapsGallery

The source for basemaps that the widget will display. This property can be autocast with an array or Collection of Basemaps, a Portal instance, or a URL to a portal instance. The default source is a PortalBasemapsSource that points to the default portal instance set in esriConfig.portalUrl.

You need to create an instance of LocalBasemapsSource, and set the source property of the BasemapGallery. That will clear all the protal basemaps and only your custom basemap will be available.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> localSource <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">LocalBasemapsSource</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; basemaps <SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>stamen<SPAN class="punctuation token">]</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> basemapGallery <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">BasemapGallery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; container<SPAN class="punctuation token">:</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"div"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; source<SPAN class="punctuation token">:</SPAN> localSource
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.