We are continuing the story about making the “Mode of entry of Ukrainian citizens to foreign countries” map and web application. The first post is a general overview of the web app. The second post describes the input data preparation. This, third, post is about setting up a Web application with the help of the WebApp Builder for ArcGIS, an interactive constructor integrated into the ArcGIS Online service.
To use WebApp Builder for ArcGIS you need to be a level 2 (Administrator) user in ArcGIS Online. This app is not available to users with public (free) accounts. There is no need to write code to create a web application. The development is implemented by configuring the options included in WebApp Builder for ArcGIS, which are workflow tabs (Figure 3.1):
Theme: choosing the template framework with specific design of web applications (color choices and widget layout schemes);
Map: selecting and editing a web map that is the basis of the web application, including setting the extent of the map;
Widget: configuring map functionality. The widgets are divided into two types: off-panel (embedded in the theme; they can not be deleted but can be disabled) and on-panel (can be added to the application through the dialog). In any case, most WebApp Builder widgets can be placed and customized according to your needs. Configure widgets through a dialog box that defines the parameters for their operation. Additionally, the icon may be changed to your image in png, gif, jpeg formats;
Attribute: customizing, configuring your app’s banner, state, and extra data sources.
Fig. 3.1. WebApp Builder for ArcGIS settings
The basic principles of using WebApp Builder for ArcGIS have now been clarified, and we turn to building our web application. But first, it is good to outline the vision of what the web application looks like and what functionality it should have. For our example these are:
- a minimalistic theme, the important thing is the map itself;
- functionality: an explanation of symbols, information about each country, navigation on the map.
Theme
A laconic Foldable Theme is selected for the web application, it fits the 50° north color scheme. The main panel is placed on top. It holds the attributes of the Web application – the logo, title and link to the blog’s website. The default widgets located on the main panel have been disabled using “Widget” tab → “Customize Widgets in the Header Controller” (see Figure 3.1).
Map
Web map “Mode of entry of Ukrainian citizens to foreign countries”, which is the main component of the Web application, is configured directly in WebApp Builder – the tab “Map” → “Create a map/Choose web map” (it can be pre-made) (Figure 3.2). A web layer we had created and published in ArcGIS Online with ArcGIS Pro is added to the web map. Next, we setup source extents. When making a web map, the focus is on configuring pop-ups for the country data. The “Configure Attributes Display” option is selected to display the pop-up window. This option allows you to define the fields from the attribute table to display in the pop-up, format the text (font, color, list numbering, etc.), to add heading title, to create a link, to insert an image (URL-address) (Figure 3.2).
Fig. 3.2. Web map creation, pop-up window settings
Widgets
To extend the functionality of the web application, according to the defined criteria, we add and configure a few widgets (Figure 3.3.).
Foldable Theme has default widgets. But “Layers” and “Legend” are excluded from the main panel. From off-panel widgets, those responsible for navigating the map are added: zoom in/out, coordinates, scale ruler, “home” (back to the original extent), overview map.
“Search” widget helps to find a specific country. As a data source, the “Mode of entry of citizens of Ukraine to foreign states” web-layer is set, “State name” field in the table of attributes is used for search. As soon as the user starts typing the text in the search bar (in Ukrainian), the possible names appear in the drop-down list. When choosing a name from the list, the map extent will move to include the selected country’s border. The option to show the pop-up window by default for the found object is also enabled.
To make navigation of the world map easier, the “Bookmark” widget is added to the web application. The dialog box with bookmarks helps to move to the defined extents – regions of the world. Sample images of such extents are uploaded.
Finally, the “Legend” widget is configured to show map symbols. Also, the widget “Info” is intended for placing and formatting of text, it is possible to download an image, insert text from an MS Word document.
Fig. 3.3. WebApp Builder for ArcGIS widget settings
Підскажіть, будь ласка, чи є доступ до JS бібліотеки застосунку для створення більш кастомізованих проектів та/чи підключення тих самих віджетів у проекти, на, напирклад Leaflet.
Хоча так як у мене немає прав адміна якого там потрібно рівня, то питання, наскільки я розумію, актуальне для StoryMaps
Після створення веб-додатку ви можете його скачати собі у вигляді архіву zip і доопрацювати як захочеться. Відповідно потрібно мати права адміністратора. А шаблони Story Maps є у вільному доступі на GitHub