Adding Custom Basemaps to Basemap Gallery in 4.3

2897
3
Jump to solution
04-10-2017 08:30 AM
Highlighted
New Contributor

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.

// Mapbox Basemap URL
var mapbox = new WebTileLayer({
urlTemplate: "https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{level}/{col}/{row}"
});

// Mapbox Basemap
var mapboxBasemap = new Basemap({
baseLayers: [mapbox],
title: "Mapbox",
id: "mapbox",
thumbnailUrl: "includes/images/mapbox.PNG"
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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.

//Basemap Gallery Widget
var basemapGallery = new BasemapGallery({
view: view,
container: document.createElement("div")
});

var basemapGalleryExpand = new Expand({
view: view,
content: basemapGallery.domNode,
expandIconClass: "esri-icon-basemap"
});

view.ui.add(basemapGalleryExpand, {
position: "top-right"
});

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: false,
Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
Regular Contributor

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.

      var localSource = new LocalBasemapsSource({
        basemaps : [stamen]
      })

      var basemapGallery = new BasemapGallery({
        view: view,
        container: document.createElement("div"),
        source: localSource
      });

View solution in original post

3 Replies
Highlighted
Regular Contributor

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.

      var localSource = new LocalBasemapsSource({
        basemaps : [stamen]
      })

      var basemapGallery = new BasemapGallery({
        view: view,
        container: document.createElement("div"),
        source: localSource
      });

View solution in original post

Highlighted
New Contributor

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

Reply
0 Kudos
Highlighted
New Contributor

Hi,

Can you Nathan Sommers   post a complete sample code?

Regards,

Alif

Reply
0 Kudos