How do you make these modifications to the Map Viewer template?

[DanielCarrizales]

Hi everyone,

I new to the developer scene and am wanting to configure the Map Viewer template.  For the most part, it does everything that I need it to but there are a few modifications to it that I would like to make but am having a hard time figuring out how to do so.

Gallery View

- How do you change the title of each web map?  Is the only way to change it by changing the web map name in ArcGIS online?  I have my web maps named a certain way for organization purposes in ArcGIS Online and these naming conventions don't work well for mobile application organization.

- How do you sort the web maps in a particular order that isn't by ascending/descending title order?

- Currently, the gallery view shows a web map card that contains a thumbnail and the title of the web map.  Is it possible to replace the card with an image that has an icon/title inside taking up the full card space?

Inside a Web Map

- Under the map details, how do you show just the legend and hide the "info" and "content" panes?  How do you add panes, like if I wanted to add an "about" pane for the web map?

- How do I add the title of the web map into the header located by the side menu?

I think those are my main questions.  Thank you in advance for the help.  I look forward to learning how to develop custom apps and modifying this template is a great starting point for me.

Thanks

[ErwinSoekianto · Accepted solution]

Daniel, 

Gallery View, 

• How do you change the title of each web map?  Is the only way to change it by changing the web map name in ArcGIS online?  I have my web maps named a certain way for organization purposes in ArcGIS Online and these naming conventions don't work well for mobile application organization.
  
  • Currently, the title of each web map is based on the title of the web map from ArcGIS Online or Enterprise, but depending on how you want to change them, you can take a look at the model that's called "app.webMapsModel" (GalleryView.qml, line ~127). And then if you pay attention to the delegate of that model (GalleryDelegate.qml, line ~122), we call the "title" property of the model to populate the title text at line ~122. So you can try to manipulate that "title" as you wish. 
• How do you sort the web maps in a particular order that isn't by ascending/descending title order?
  • Look at CustomListModel.qml, you would see the few sort functions that are being used across the app, feel free to edit them as you wish and then see where they are being used. 
• Currently, the gallery view shows a web map card that contains a thumbnail and the title of the web map.  Is it possible to replace the card with an image that has an icon/title inside taking up the full card space?
  • Yes, it should be possible. This UI is in GalleryDelegate.qml, look at inside the RowLayout with id: cardContent line ~49, that's where the current UI, but feel free to customize it. 

Inside a Web Map

• Under the map details, how do you show just the legend and hide the "info" and "content" panes?  How do you add panes, like if I wanted to add an "about" pane for the web map?
  • This should be straightforward, MapPage.qml line ~199, if you see the content on the array in "panelPage.headerTabNames", you can remove and add the content of this panel. As for adding another pane, you can copy current tabNames, but the easiest way is to re-purpose either the "info" or "content".
• How do I add the title of the web map into the header located by the side menu?
  • I think the title of the web map is already in the header of the side menu. Maybe I misunderstood what you are trying to say here. Can you clarify more or show the screenshot of what you want to do. 

I hope this is helpful and good luck with your customization, 

Erwin. 

[DanielCarrizales]

Hi Erwin,

Thanks for your responses. I was able to follow along to your directions for the most part in regards to my Gallery View questions.  

For Inside a Web Map, the title does indeed show up in the side menu but I wasn't referring to when the side menu was open.  When closed, there is a blank space in the header by the side menu icon.  That is where I was wanting to put the title for each web map.  Basically, I wanted the function that is seen in the Side Menu Layout (Material Design) template.

Thanks again!

[ErwinSoekianto]

Daniel, 

That would be in views/MapPage.qml, if you see there is a header around line ~67 with "RowLayout" , then "menuIcon", "spaceFiller" and RowLayout of all of the "mapTools", that is where you can add the title of the webmap, preferably after "menuIcon, but this is up to you. 

And then as you can see in the same file, around line ~525, there is that "MenuPage" for "sideMenu", you can see that you can use "mapPage.portalItem.title" to get the title of the webmap.

Thank you,

Erwin.