Skip to content

Create and save map

View on GitHubSample viewer app

Create and save a map as a web map item to an ArcGIS portal.

Image of create and save map

Use case

Maps can be created programmatically in code and then serialized and saved as an ArcGIS portal item. In this case, the portal item is a web map which can be shared with others and opened in various applications and APIs throughout the platform, such as ArcGIS Pro, ArcGIS Online, the JavaScript API, Collector, and Explorer.

How to use the sample

When you run the sample, you will be challenged for an ArcGIS Online login. Enter a username and password for an ArcGIS Online named user account (such as your ArcGIS for Developers account). Then, tap the Edit Map button to choose the basemap and layers for your new map. To save the map, add a title, tags and description (optional), and a folder on your portal (you will need to create one in your portal's My Content section if you don't already have one). Click the Save to Account button to save the map to the chosen folder.

How it works

  1. Configure an AuthenticatorState to handle authentication challenges.
  2. Add the AuthenticatorState to a DialogAuthenticator in the app's MainActivity to invoke the authentication challenge.
  3. Create a new Portal and load it.
  4. Access the PortalUserContent with portal.portalInfo?.user?.fetchContent()?.onSuccess, to get the user's list of portal folders with portalUserContent.folders.
  5. Create an ArcGISMap with a BasemapStyle and a few operational layers.
  6. Call ArcGISMap.saveMap() to save a new ArcGISMap with the specified title, tags, and folder to the portal.

Relevant API

  • ArcGISMap
  • Portal

Additional information

This sample uses the toolkit's authentication module to handle authentication. For information about setting up the toolkit, as well as code for the underlying component, visit the toolkit docs. This sample also uses the GeoView-Compose Toolkit module to be able to implement a composable MapView.

Tags

ArcGIS Online, ArcGIS Pro, geoview-compose, portal, publish, share, web map

Sample Code

MapViewModel.ktMapViewModel.ktMainActivity.ktMainScreen.kt
Use dark colors for code blocksCopy
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 /* Copyright 2024 Esri  *  * Licensed under the Apache License, Version 2.0 (the "License");  * you may not use this file except in compliance with the License.  * You may obtain a copy of the License at  *  * http://www.apache.org/licenses/LICENSE-2.0  *  * Unless required by applicable law or agreed to in writing, software  * distributed under the License is distributed on an "AS IS" BASIS,  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  * See the License for the specific language governing permissions and  * limitations under the License.  *  */  package com.esri.arcgismaps.sample.createandsavemap.components  import android.app.Application import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.setValue import androidx.lifecycle.AndroidViewModel import androidx.lifecycle.viewModelScope import com.arcgismaps.httpcore.authentication.OAuthUserConfiguration import com.arcgismaps.mapping.ArcGISMap import com.arcgismaps.mapping.Basemap import com.arcgismaps.mapping.BasemapStyle import com.arcgismaps.mapping.Viewpoint import com.arcgismaps.mapping.layers.ArcGISMapImageLayer import com.arcgismaps.mapping.layers.Layer import com.arcgismaps.portal.Portal import com.arcgismaps.portal.PortalFolder import com.arcgismaps.toolkit.authentication.AuthenticatorState import com.esri.arcgismaps.sample.createandsavemap.R import com.esri.arcgismaps.sample.sampleslib.components.MessageDialogViewModel import kotlinx.coroutines.flow.MutableStateFlow import kotlinx.coroutines.flow.asStateFlow import kotlinx.coroutines.launch  class MapViewModel(application: Application) : AndroidViewModel(application) {   // view model to handle popup dialogs  val messageDialogVM = MessageDialogViewModel()   // set up authenticator state to handle authentication challenges  val authenticatorState = AuthenticatorState().apply {  oAuthUserConfigurations = listOf(  OAuthUserConfiguration(  portalUrl = application.getString(R.string.portal_url),  clientId = application.getString(R.string.client_id),  redirectUrl = application.getString(R.string.redirect_url)  )  )  }   // require use of user credential to load portal  private val portal = Portal("https://www.arcgis.com", Portal.Connection.Authenticated)   // update displayed map once user is authenticated  var arcGISMap by mutableStateOf(ArcGISMap())   // folders on portal associated with the authenticated user  private val _portalFolders = MutableStateFlow<List<PortalFolder>>(listOf())  val portalFolders = _portalFolders.asStateFlow()    // define a couple of feature layers to be loaded  private val worldElevation =  ArcGISMapImageLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer")  private val usCensus =  ArcGISMapImageLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer")  val availableLayers: List<Layer> = listOf(worldElevation, usCensus)   // associate basemap styles with friendly names  val stylesMap: Map<String, BasemapStyle> = mapOf(  Pair("Streets", BasemapStyle.ArcGISStreets),  Pair("Imagery", BasemapStyle.ArcGISImageryStandard),  Pair("Topographic", BasemapStyle.ArcGISTopographic),  Pair("Oceans", BasemapStyle.ArcGISOceans)  )   // properties hoisted from UI bottom sheet   var selectedBasemapStyle by mutableStateOf("Streets")  private set   fun updateBasemapStyle(style: String) {  selectedBasemapStyle = style   // update map to display selected basemap style  arcGISMap.setBasemap(Basemap(stylesMap.getValue(selectedBasemapStyle)))  }   fun updateActiveLayers(layer: Layer) {  arcGISMap.operationalLayers.apply {  if (contains(layer)) {  remove(layer)  } else {  add(layer)  }  }  }   var mapName by mutableStateOf("My Map")  private set   fun updateName(name: String) {  mapName = name  }   var mapTags by mutableStateOf("map, census, layers")  private set   fun updateTags(tags: String) {  mapTags = tags  }   var portalFolder by mutableStateOf<PortalFolder?>(null)   fun updateFolder(folder: PortalFolder?) {  portalFolder = folder  }   var mapDescription by mutableStateOf("")  private set   fun updateDescription(description: String) {  mapDescription = description  }   init {  viewModelScope.launch {  portal.load().onSuccess {  // when the user has successfully authenticated and the portal is loaded...   // populate the portal folders flow  portal.portalInfo?.apply {  this.user?.fetchContent()?.onSuccess {  _portalFolders.value = it.folders  }  }   // load the streets basemap and set an initial viewpoint  arcGISMap = ArcGISMap(BasemapStyle.ArcGISStreets).apply {  initialViewpoint = Viewpoint(38.85, -90.2, 1e7)  }   // load operational layers  worldElevation.load()  usCensus.load()  }.onFailure {  // login was cancelled or failed to authenticate  messageDialogVM.showMessageDialog(  application.getString(R.string.createAndSaveMap_failedToLoadPortal),  it.message.toString()  )  }  }  }   /**  * Saves the map to a user's account.  */  suspend fun save(): Result<Unit> {  return arcGISMap.saveAs(  portal,  description = mapDescription,  folder = portalFolder,  tags = mapTags.split(",").map { str -> str.trim() },  forceSaveToSupportedVersion = false,  thumbnail = null,  title = mapName  )  }   }

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.