Map Widget

<< Click to Display Table of Contents >>

EQuIS 7  >>  Enterprise > Widgets >

Map Widget

The Map widget allows the user to display a map using Esri ArcGIS API for JavaScript. Please review the ArcGIS API licensing information before using this widget.

 

Esri JS API Requirements: 4.8 (https://js.arcgis.com/4.8)

 

Widget Interface

Ent-Map_Widget_Time_series_sys_loc_code

The widget displays a multi-layered map with facility locations (as defined in VW_LOCATION), report output, and other map layers. Popups can be defined to display when a user selects a location on the map (see above image). The Popup Window can display data, images, charts, crosstabs, and other information. By default, the Popup Window has a leader to the selected location, however, it can be docked to the frame of the Map widget by selecting the Dock icon in the Popup Window. Once the Popup Window is docked, clicking on any other location will populate the Popup Window for that location. Select the Undock icon to undock the Popup Window or the Close icon to close the Popup Window.

Ent-Time_Series_Chart_Widget_B-38_Docked

Image files (e.g., .png, .jpg, .gif) associated with a location will display as a thumbnail in the Map Widget Popup Window. Image files can be associated to a location and uploaded via the Explorer widget. See the Upload File section of the Explorer Widget article.

 

The Map widget has the following functions in the user interface that can be set within the User Interface tab in the widget properties:

Zoom In and Zoom Out – Although the default view extents for the map can be set, the user can always change how much of the map is displayed. Click either the Zoom In (Map_Zoom_In_icon) or Zoom Out (Map_Zoom_Out_icon) buttons to view the page as needed. These buttons are located on the top-left of the widget. Users can also zoom in and out by using the scroll button on the mouse.

Fullscreen – Click the Enter Fullscreen Ent-Map_Widget_Full_Screen_Button button to expand the map to the extent of the user's screen. Selecting the button again, hitting escape on the keyboard, or hitting F11 on the keyboard will return the map to the original size of the widget.

Layer List – Select the Expand the Layer List Ent-Map_Widget_Layers_Button button to display a list of layers and sub-layers added to the map. Layers can be toggled on and off by selecting the View Ent-Map_Widget_See_Layers_Icon icon for the layer. Click the Open Ent-Map_Widget_Layers_Open_Icon icon for a layer to display a menu that allows zooming to the layer. Click on the Collapse Ent-Map_Collapse_iconicon to close the drop-down menu.

Ent-Map_Widget_Layers_Expanded

Basemap Gallery – A variety of map types are available within Enterprise. Select the Basemap Gallery Ent-Map_Widget_Basemap_Gallery_Button button to open the drop-down selection of map types. The current options are ArcGIS defaults types. Click on the CollapseEnt-Map_Collapse_icon2 icon to close the drop-down menu.

Ent-Map_Widget_Basemap_Gallery_Expanded

The default basemaps are stored in the ST_CONFIG table. Acceptable entries for the default basemaps are as follows:

Basemap Gallery Name

ST_CONFIG Table Entry

Imagery

satellite

Imagery with Labels

hybrid

Streets

streets

Topographic

topo

Dark Gray Canvas

dark-gray

Light Gray Canvas

gray

National Geographic

national-geographic

Terrain with Labels

terrain

Oceans

oceans

OpenStreetMap

osm

USA Topo Maps

topo-vector

USGS National Map

streets-relief-vector

Legend – When a layer is added to the map, the Expand LegendEnt-Map_Widget_Legend_Button button can be selected to view a drop-down list of map symbols. Click on the CollapseEnt-Map_Collapse_icon2 icon to close the drop-down menu.

 

Interaction with Other Widgets and Filters

 

When a location on the Map widget is selected and the Time Series Chart widget is setup to separate charts by SYS_LOC_CODE, the time series chart will automatically adjust to the selected location.

Ent-Map_Widget_Time_series_sys_loc_code

Ent-Time_Series_Chart_Widget_B-38

The Map widget allows the EZView widget to add a report layer onto the map. Users can drag and drop a valid (mappable) report from the EZView widget to a map widget by dragging the report icon from the EZView widget onto the map. The map will zoom to the extent of the report and display points for the report locations. This report layer will appear until the widget is refreshed.

 

The Dashboard Filter widgets allow the user to select a parameter value and filter the report output of reporting widgets (e.g., Map widget) on the dashboard. When the Filter-List widget filters on Location, the Map widget will display only the filtered locations or location groups. This function only works for report layers and does not apply to the facility layer.

 

 

Widget Properties

 

To change the properties of the Map widget, open the Widget Editor by selecting the More Options dashboard_chooser icon in the upper right corner of the widget to display the drop-down menu and then select the Edit menu option. The widget properties are divided into six tabs: General, Layers, Labels, Symbology, Extents, and User Interface. Changes made on any tab will not be preserved until the user clicks Save on the Widget Editor header.

Widget Title – By default, the widget title is Map. The title can be modified.

Widget Color – The color of the widget can be changed using the Change Widget Themecolor_iconicon to the left of the widget title.

Cancel – Select the Close without Saving Close_icon button to exit the Widget Editor without saving changes.

Save – Changes will be applied to the widget by clicking on the Save Widget_Save_icon button. The Widget Editor screen will close after the save operation is complete.

Ent-Map_Widget_Editor_General

General Tab

Show Facility Layer – When checked, the map will show the current session facility. If no session facility is selected, the map displays the facility selected in the Facility field. The Session Facility will still be displayed if this box is not checked. To remove a facility layer, do not select a Session Facility or the Show Facility Layer button.

Facility – Select a facility to view on the map if no session facility is selected (refer to Facility Chooser for more information).

Facility Geography – This section contains a drop-down menu to set the geography type to use for the facility layer. This option is only visible if Show Facility Layer is checked. The drop-down menu list includes Location Points, Facility Polygons, and Location Polygons.

Location Group – Allows the user to select a location group in the Map widget. This option is only visible if Show Facility Layer is checked.

Notes:

If the facility has a large number of locations, it is recommended to divided them into location groups and plot the location groups in the Map widget.
 

A Location Group will not plot if the GROUP_CODE contains a carriage return (extra blank space) at the end of the facility group. It will also not plot if it contains non-ASCII characters.

 

Rename Facility Layer – Allows the user to rename the facility locations layer in the Layer List. This option is only visible if Show Facility Layer is checked.

Custom Info Template – This option allows the user to define a custom InfoTemplate (popup when clicking a facility location). HTML is acceptable with inline CSS. JavaScript is not supported. A list of available columns shows on the right-hand side. It is possible to include location information by referencing the location that has been clicked as follows: ${[field name]}. For example: ${code}.

Basemap – Set the basemap for the Map Widget. Free basemaps from Esri are available in the Basemap Gallery or you can enter your own by changing the URL.

 

Layers Tab

The Layers tab displays all layers added to the Map widget in a grid view. For each layer, the grid view provides the layer name, layer type, and URL and denotes whether the layer is visible by default and set to show in the Layer List. Use the Layers tab to add layers, edit layer, delete layers, and sort the view order of map layers.

Ent-Map_Widget_Editor_Layers

Adding Layers

To add a new map layer based on a published service:

1.Click the Add Layer New_Role_Button_Icon icon on the top of the view grid frame.

Ent-Map_Widget_Editor_Layers_Add

2.Select the appropriate layer type:

User Report

Plot a User Report as a layer on the Map. To use a User Report Layer, select a report (Report Chooser), configure the report options, and then configure the classification scheme.

Feature Layer

Plot an Esri Feature Layer, published alone, or as part of a Feature Service. To use a Feature Layer, provide the URL to the Feature Layer, and a layer name to display in the Layer List. Optionally, a username and password can be provided to access secure services.

ArcGIS Dynamic Layer

Allows the user to work with a dynamic map service resource exposed by the ArcGIS Server REST API. A dynamic map service generates images on the fly. To use a dynamic map service, provide the URL to the layer and a layer name to display in the Layer List. Optionally, a username and password can be provided to access secure services.

ArcGIS Tile Layer

Allows the user to work with a cached map service resource exposed by the ArcGIS Server REST API. A cached service accesses tiles from a cache instead of dynamically rendering images. To use a tiled map service, provide the URL to the layer and a layer name to display in the Layer List. Optionally, a username and password can be provided to access secure services. Tiled services can have custom levels of detail.

GeoRSS Layer

GeoRSS is a live web feed that includes geographic features and locations. For example, a transportation department might maintain a GeoRSS of current vehicle accidents in their local area. ArcGIS Server Dynamic Map Service Layer can only come from ArcGIS Server (either Esri, or hosted by someone else). To use a GeoRSS Layer, provide the URL to the layer and a layer name to display in the Layer List.

KML Layer

Allows the user to work with an image map service resource exposed by the ArcGIS Server REST API. It is an Esri KML layer, defined by URL. The URL MUST be accessible by Esri (not Intranet or firewalled location). To use an Image Layer, provide the URL to the layer and a layer name to display in the Layer List.

Image Layer

Allows the user to work with an image map service resource exposed by the ArcGIS Server REST API. It is an Esri Image Service layer. To use an Image Layer, provide the URL to the layer and a layer name to display in the Layer List.  

Vector Tile Layer

Plot an Esri Vector tile layer. The URL can either be the layer URL or style JSON URL. Optionally, display levels can be set as a comma-separated list (11,12,13,14) and minimum scale and maximum scale can be defined.

CSV Layer

Plot a point layer based on a comma-separated values (CSV) file (.csv, .txt). A CSV file is a plain-text format used to represent tabular data and must include geographic point features (e.g., latitude, longitude).

3.Enter a Layer Name.

4.Enter the Web API URL for the layer in the Layer URL field. This will automatically be populated when a user report is selected as the map layer.

5.Set the layer default visibility by checking or un-checking the Visible by Default option.

6.Select the Show in Layer List option to have the layer available in the Layer List menu.

7.Set the Layer Opacity. This field allows the user to set the opacity of the layer. An opacity of '0' makes the layer fully transparent, while an opacity of '100' makes the layer fully opaque.

8.Click the Add Layer button.  

 

Popup Template

Popup Templates are available for User Reports and Feature Layers by selecting a template from the drop-down menu. The available templates include Attribute Listing, Location Information, Time Series Chart, Crosstab, Feature Description, and Custom. When Custom is selected from the drop-down menu, a Custom Popup Template is displayed where the title and content can be set in the JavaScript Object Notation (JSON) Editor. Selecting the JSON Editor dashboard_properties icon will also open the JSON editing window. Widget properties can be manually edited in the window.

Ent-Map_Widget_Editor_Layers_Popup

 

 

 

 

 

 

 

 

 

Ent-Map_Widget_Editor_Layers_Popup_List

Attribute Listing – Displays all output values of the report.

Location Information – Displays the same information as Attribute Listing and Feature Description, but adds a list of all files (e.g., docs, photos) before the Attribute Listing.

Time Series Chart – Time series charts can be added to display when a location is selected. Refer to Time Series Chart for more information.

Crosstab – Displays a crosstab with column header = SAMPLE_DATE and row header = SAMPLE_NAME for every location.

Feature Description – Select to display the Attribute Listing.

 

Custom Renderers

Custom renderers are available for User Reports and Feature Layers and determine how the data will appear on the map layer. A renderer must be defined for a User Report layer to work. The Renderer Type options include simple, unique value, and class breaks. Select the Edit Renderer button to open the Renderer Edit window. Select the drop-down menu to choose the Renderer Type.

Ent-Map_Widget_Editor_Layers_Renderer

 

 

 

 

 

Ent-Map_Widget_Editor_Layers_Renderer_Types

For each of the renderers, symbology must be set. This includes symbol type, style, size, and color.

 

Class Breaks

When the Class Breaks renderer is used, additional options must be selected.

Field Attribute – This field allows the user to filter the displayed results.

Min – Displays the minimum value of the selected field attribute.

Max – Displays the maximum value of the selected field attribute.

Count – Displays the number of values of the selected field attribute.

Classification Scheme – The classification scheme defines how the plot values will be grouped for display on the map. Members of each group will be displayed with the same symbol, and usually defined in the legend. Classification scheme options include:

Equal Interval – Plots values in automatically calculated equal intervals. The number of intervals is specified in Number of breaks field.

Defined Interval – Plots values in the intervals defined.Set the required interval in the Interval field (e.g., 100).

Quantile – Classifies data into a certain number of categories with an equal number of units in each category. The number of categories is specified in Number of breaks field.

Manual – Type pipe-separated values in the Values field to define manual brakes.

 

Select the drop-down menu to choose the Classification Scheme. Set the necessary options and click the Generate button to create the class breaks. Each group can subsequently be edited.

Ent-Map_Widget_Editor_Layers_Renderer_Classification

 

Set View Order of Layers

If two or more layers are added to the Map widget, a user can adjust the order that the layers are displayed on the map interface. When the map loads, layers are drawn in the order that the layers are displayed in the view grid within the Widget Editor. In the example below, layer L1 will be drawn first, then layer L2, and then layer L3. Therefore, L3 will be the top-most layer visible on the map.

Ent-Map_Widget_Layer_Order1

To change the display order: (1) select a layer (which will highlight it in blue), (2) click and hold down the selected layer, and (3) drag it to the desired position in the list of layers (view grid). After dragging the layer to the new position, the blue highlighting will be removed. To preserve the revised order of the layers, click Save on the Widget Editor header. The map will reload and draw the layers in the revised order.

 

In the example, layer L3 is selected and dragged to the first position in the view grid. When the map reloads, layer L3 will be drawn first, then layer L1, and then layer L2. Now L2 will be the top-most layer visible on the map.

Ent-Map_Widget_Layer_Order2

Ent-Map_Widget_Layer_Order3

 

Note: A layer cannot be moved to the bottom position in the view grid (i.e., the top-most display layer on the map). To make a layer the top-most layer on the map, move the layer(s) beneath it to a higher position in the view grid.

 

Using the current example, perform the following steps to move layer L3 back to the bottom position in the view grid. Select layer L3 and drag layer L3 below layer L1. Select layer L2 and drag layer L2 above layer L3. Now the layers are returned back to the original order. Save the changes and the map will redraw layer L1 first, then layer L2, and then L3 as the top-most layer.

 

 

Labels Tab

This tab is enabled when the Show Facility Layer box is checked on the General tab.

Ent-Map_Widget_Editor_Labels

Show Location Labels – Check this box to display location labels for selected facility.

Label Column – Select the Column to be displayed for the labels (e.g., select "code" to display SYS_LOC_CODE).

Font Family – Select the drop-down menu to display available font types. Scroll to and select the desired font type. The Label preview field will reflect the selected font type.

Font Size – Set the font size for the labels.

Font Color – Set the font color for the labels. Click on the color selector to choose a color. The Label preview field will reflect the selected font color.

Font Weight – Set font weight for the labels. Select the drop-down menu to display available font weights. Choose from normal, lighter, bold, and bolder. The Label preview field will reflect the selected font weight.

Custom Label Template – An optional setting to use the template for labels using combinations of fields (example: "${loc_type} - {sys_loc_code}").

Label Angle – Controls the rotation of the labels. The center point for the rotation is the lower-left corner of the label. For example, a value of -30 would rotate the labels 30-degrees counter-clockwise.

X-Offset for label – Controls the X-offset of the labels in screen units.

Y-Offset for label – Controls the Y-offset of the labels in screen units.

 

 

Symbology Tab

This tab is enabled when the Show Facility Layer box is checked on the General tab. This tab sets the symbology for facility locations.

Ent-Map_Widget_Editor_Symbology

To create a symbol, set the Definition Column and click the New Symbol button. Select the drop-down menu to set the Definition Column. For example, selecting "type' will establish the symbology for the LOCATION_TYPE column. Multiple symbols can be defined. Refer to Show Subset of Locations within the Map Widget for an illustration on how to use symbology to display a subset of locations for the selected facility.

Ent-Map_Widget_Editor_Symbology2

 

 

 

 

 

 

 

 

Ent-Map_Widget_Editor_Symbology3

Define the Symbol Code, select the Symbol Type, and then set the symbol properties as appropriate. After all symbol properties are set, click the Add Symbol button. Repeat these steps as needed to add as many symbols as desired.

Symbol Code – This field is case sensitive and needs to populate accordingly. For example, if the Definition Column is "type" and DT_LOCATION.LOC_TYPE = MONITORING WELL, then the Symbol Code must be MONITORING WELL not Monitoring Well.

Symbol Type – Select the drop-down menu to view the Symbol Type. Select from Simple Marker Symbol, Text Symbol, Picture Marker Symbol, Fill Symbol, Picture Fill Symbol or Line Symbol.

 

Symbol Properties

The various symbol properties change in response to the symbol type selected.

Ent-Map_Widget_Editor_Symbology_Simple

Style – Set the style of the simple marker. Select from circle, square, diamond, cross, and X.

Ent-Map_Widget_Editor_Symbology_Text

Text – Set text or single character for the symbol.

 

Ent-Map_Widget_Editor_Symbology_Picture

Image URL – Enter URL to image (this can be relative to application root).

Width – Enter width of image.

Height – Enter height of image.

 

Ent-Map_Widget_Editor_Symbology_Fill

Ent-Map_Widget_Editor_Symbology_PictureFill

Ent-Map_Widget_Editor_Symbology_Line

 

 

Extents Tab

This tab sets the default extent for the widget. The options are:

Application Default – Refers to the value set in ST_CONFIG.

Facility Layer – Refers to the the defined or calculated extent of the facility configured in the General tab.

Added Map Layer – Listed by Layer Name.

Custom Extent – JSON string defining an extent object. Example: { "xmin": -81.435, "ymin": 39.3, "xmax": -77.0, "ymax": 41.7, "spatialReference": { "wkid": 4326 } }.

 

 

User Interface Tab

This tab lets the user customize the visibility and location for the display of the legend, layer List, basemap gallery, and fullscreen mode. Options for map events, such as mouse-wheel, click and drag, can also be enabled.

 

Also see Map Widget Data Configuration.