Leaflet Map Control

Map with Esri Layers

Technologies > User Interface Add-Ins > Geographic Information System (GIS) Views > Map with - Esri (Leaflet)

In this example the user is able switch Esri basemaps from a drop-down menu of available options. A series of basemap layers are made available through ArcGIS Online. Basemap options include imagery, streets, and topographic maps.

Add an action button for the basemap layers to the map panel:

<action id="basemapLayerMenu" type="menu"
imageName="/schema/ab-core/graphics/icons/view/ab-arcgis-basemap-16.png">
<title translatable="true">Basemaps</title>
</action>

To build the drop-down menu, first retrieve the list of available basemap layers using getBasemapLayerList():

var basemapLayers = this.mapControl.getBasemapLayerList();

Create a menu item, action, and event handler for each basemap layer :

var basemapLayerMenu = this.mapPanel.actions.get('basemapLayerMenu');
basemapLayerMenu.clear();
for (var i=0; i<basemapLayers.length; i++) {
basemapLayerMenu.addAction(i, basemapLayers[i], this.switchBasemapLayer);
}

When a menu item is selected, pass the selected item to the menu item's event handler and call switchBasemapLayer():

this.mapControl.switchBasemapLayer(item.text);

Esri Basemap Values

Basemap	Description
World Imagery	Satellite imagery for the world and high-resolution imagery for the United States.
World Imagery with Labels	Satellite imagery for the world and high resolution imagery for the United States with world boundaries and place labels.
World Light Gray Canvas	A light neutral background to draw attention to your thematic content.
World Dark Gray Canvas	A dark neutral background to draw attention to your thematic content.
World Topographic	Administrative boundaries, cities, water features, landmarks, transportation, and buildings overlaid on land cover and shaded relief.
World Shaded Relief Imagery	Surface elevation presented as shaded relief.
World Street Map	Worldwide street map with highway-level data for the world and street-level data for the United States, Canada, and a number of European countries.
National Geographic World Map	A general reference map developed by National Geographic and Esri featuring the National Geographic cartographic style.
Oceans Basemap	A basemap focused on bathymetry, includes inland waters and roads overlaid on land cover and shaded relief imagery.

View: http://localhost:8080/archibus/ab-leaflet-esri-switch-layers.axvw