Introducing a new AppStudio sample: Display Overview Map

[TrevorFrame]

There is a new sample on the block that you DON’T want to miss. It is the Display Overview Map sample. What is unique about this app is its plug and play capabilities. We designed and built this sample so that the overview map custom component code can be copied over to your apps and is ready to use with little extra code. Below we explain first what an overview map is, when they are useful, details about the overview map custom component, and how you can use this code in your AppStudio applications. 

So, what’s an Overview Map? And when should I use them? 

An overview map displays the extent or boundary of another map with a zoomed-out view. Think of a map that is zoomed in far enough to be able to see and read street names. The overview map would be a zoomed-out view of this map to show the city or state the main map view is displaying. It is a great tool to provide more context without taking up to much screen real estate or stealing the viewer’s focus.  

Additional Overview Map Custom Component 

In this sample, we added 2 additional settings we thought were necessary for the custom component. Included in this component is the ability to switch base map styles between 4 options: Topographic, Imagery, Navigation, or Dark Gray, and the overview map position can be unlocked so the user can drag and move it to any location on the screen.  

So, how do you use this in your own app? 

Before using the overview Map, this component sets the overview map’s base map style using the Basemap type which requires an API key. With the new AppStudio 5.4 release, an API key can be provided in the app’s settings. To do this, follow the steps below: 

1. Follow this tutorial for creating an API Key 
2. Copy the API key 
3. With AppStudio Desktop open, select the app that needs to have the API key 
4. Select “Settings” 
5. Select “Licensing” in the left panel 
6. Paste the API key in the “API Key” field 

We tried making this as easy as possible to use in your apps.  

• Navigate to the samples project app directory. 
• Copy the following folders and paste them inside your app project directory: 
  • Plugins 
  • UIControls 
  • Utility  
• Add the import statements in the main app .qml file. 

import “UIControls” as UIControls 
import “Plugins/OverviewMap” as OverviewMap 
import “Utility” as Utility 

• In the root component App{} add the following code snippets:         

Utility.DeviceManager { 
     id: deviceManager 
} 

StackView { 
     id: uiStackView 
     anchors.fill: parent 
     initialItem: mainPage 
} 

NOTES: The initialItem in the StackView, mainPage, is the current existing main UI component. 

Ex.  

Page {  
     id: mainPage  
     header: ToolBar {  
     id:header  
     width: parent.width  
     height: 50 *deviceManager.scaleFactor  
     ... 

NOTES: Only add this StackView if one isn't already in use. If a StackView is already being used, in OverviewMapPage.qml, replace uiStackView.push(popUp) and uiStackView.pop() so they use the existing StackView id.

Ex. 

existingStackView.push(popUp)
...
existingStackView.pop()

• Add the OverviewMap component inside the MapView component   

MapView { 
     id: mapView 
     ...
     OverviewMap.OverviewMapPage { 
          id: overviewMapBorder 
          geoView: mapView 
     } 
} 

NOTES: Where the mapView is the current MapView{} id you want the overview map to reference. 

• Run your app and enjoy 

Concluding thoughts

As always, thank you for taking the time to read about one of our newest sample apps. The overview map is a great tool to display additional information without taking the primary focus away and it’s easy to implement for yourself.