LocalMaps theme for Web AppBuilder
Overview
The latest release of LocalMaps 2.0 introduces the addition of a new LocalMaps Custom theme for Web Appbuilder for ArcGIS. This gives organizations the flexibility to build their own Web Apps, bring in specific widgets outside of the core LocalMaps widgets while maintaining a consistent styling with the LocalMaps viewer.
Email Grant (gsc@eagle.co.nz) or Lauren (lxm@eagle.co.nz) to grab a copy of the LocalMaps Theme and Widget Icons. Then you're set to start building your own LocalMap!
Getting Started
1. Download Web AppBuilder
To create a Web Application with the LocalMaps theme, first install Web App Builder for ArcGIS (Developer Edition). Detailed steps to complete this can be found here: https://developers.arcgis.com/web-appbuilder/guide/getstarted.htm
2. Download LocalMaps Theme & Widget Icons
Download the Local Maps Theme & Widget Icons.This folder contains:
1. LocalMapsTheme – Viewer theme to use in your own Web Apps
2. LocalMapsWidgetIcons – Library of icons for the core LocalMaps Widgets.
Unzip the file onto your local drive. Open the LocalMaps Theme folder and copy the two subfolders (LocalMapsTheme and LocalMapsWidgetIcons) into the following location <Web Appbuilder install location>\client\stemapp\themes
Building your own LocalMaps App
Once you have placed the LocalMapsTheme and LocalMapsWidgetIcons in the themes folder, you can go ahead and create your new LocalMaps App. To do this, complete the following steps:
1. Start Web AppBuilder
2. Log in to your portal (ArcGIS Online organization or Portal for ArcGIS).
3. On the Web AppBuilder home page, click Create New.
4. Choose Default (2D), provide the app name and description, and click OK.
5. Click the LocalMaps theme from the theme panel
6. Choose your map and configure widgets. Choose to set widgets in the header controller as this is where the core LocalMaps widgets are accessed from.
7. Click to add a new widget i.e Bookmark and click to change the icon.
8. Navigate to the LocalMapsWidgetIcons folder and add the icon for the widget
9. Crop the image and then click Save to save your changes. The widget will appear in the header with the new icon.
10. Click the Attribute tab and change the title, subtitle, and logo of the app.
11. Click Save to save your changes.
12. Click Previews to view the app in your devices.
13. Click Launch to view the app in your browser.
14. Click the Web AppBuilder logo or Web AppBuilder for ArcGIS at the upper left of your browser to return to the home page.
15. Click the Download button on your app to download the app for deployment (see below section).
For more on creating you own Apps see here
Deploy your App
Once you have downloaded your newly created LocalMaps App, next step will be to host this on your web server. The app must be registered with ArcGIS Online or Portal for ArcGIS if the app references nonpublic items.
To deploy the LocalMaps app on your web server, complete the following steps:
1. Unzip the downloaded app.
2. Deploy it on your web server.
3. Browse to the directory of the app and open the app config.json file.
4. Add a proxy to the proxy property in the app config.json file. See Use proxy for details.
5. Add and register the app. See Add apps and Register your app for details.
6. Copy and paste the AppID to the appId property in the app config.json file. Save the file.
The app is now available by browsing to http://<your server>/<app name>/.
For more on deploying apps see here
Index App in LocalMaps
To add you App to the LocalMaps Gallery, simply share the item to the LocalMaps Group. Ensure the app is shared with Everyone so it is visible in the Gallery.
Local Maps Icons
As part of the LocalMaps Theme, we have also supplied some of the core LocalMaps widget Icons for use in your web app. This allows you to have the consistent look and feel of the LocalMaps Viewer but customize it with additional widgets as your set fit. Dimensions for icons in LocalMaps are 229x202
The following icons are included:
- About
- Layers
- Legend
- Add data
- Basemap Gallery
- Bookmarks
- Elevation
- Print
- Share
- Select
Not included
- Save
- Zoom to Point
- Switch Map
- Draw / Measure
Any questions, email gissupport@eagle.co.nz
The LocalMaps Team
January 2018
