Skip to content

sc-boundary

This document is a user guide for the sc-boundary component release version 7.1.38.

go-to-typical-definition

 

1 Purpose

The "sc-boundary" component places a map field on a form with the option to combine the map with an "Address Search" and "Street Address" fields

"sc-boundary" component defined to display a map without "Address Search" & "Street Address" fields.

sc-boundary-without-address-fields

"sc-boundary" component defined to display a map with "Address Search" & "Street Address" fields.

sc-boundary-with-address-fields

The "Address Search" and "Street Address" fields allow the user to centre the map on a specific address. As illustrated in Example 2 below, "Street Address" field values will not be included when changes to the "sc-boundary" map are saved to the document and database.

Buttons allow the user to change how a map is displayed and to draw on a map. Mouseover of a button will display button tooltip help. Mouseover of the "Drawing Mode" button will display sc-boundary-drawing-mode-button-tooltip

Clicking the "Full Screen" button will toggle the screen into and out of full screen mode.

Clicking the "Zoom In" button will zoom in on the map. Subsequent clicks will zoom in further on the map.

Clicking the "Zoom Out" button will zoom out on the map. Subsequent clicks will zoom out further on the map.

Clicking the "Current Location" button will centre the map at the current location of the user.

To pan/move the map in all directions:

  • On a touch screen, simply press and drag.
  • On a non-touch screen, using a mouse, simply click and drag.

The "Map View buttons" allow the user to select a map view mode e.g. Map view, Satellite/Aerial view, Overlay/Group view. An Overlay/Group view displays the map as a combination of views e.g. map view in combination with satellite view.

The "Map Tool buttons" provide the ability to:

  • From the "Drawing Tools Menu", write text, draw spatial objects and place icons on a map.
  • Edit or delete text, icons or spatial objects drawn on a map.
  • Toggle the "Drawing Mode" button between "single" drawing mode Icon-sc-boundary-drawingMode-single and "multi" drawing mode Icon-sc-boundary-drawingMode-multi. The "drawingMode" field in Section 2.3 Optional Customizable Fields contains a description of the two drawing modes.

Clicking the "Drawing Tools Menu" button will display the various drawing tools.

Drawing Tools Menu

sc-boundary-drawing-tools-menu-expanded

The "drawingTools" field in Section 2.3 Optional Customizable Fields defines the list of drawing tools options.

Clicking the "Select drawing color", "Select line width", Select line dash style", "Select Icon", "Select font" or "Select font size" drawing tool will display a sub-menu of options to select from.

Clicking the "Dimension" drawing tool provides the ability to measure the distance along a path plotted on a map.

The "sc-boundary" component definition provides fields for setting the properties of a "sc-boundary" field on a form and is fully described below.

 

2 Definition

The "sc-boundary" component is defined by a set of name/value pair fields consisting of:

  • Required system fields
  • Required customizable fields
  • Optional customizable fields

Note:

  1. Default values for the fields described in the tables below are shown in bold text.
  2. Most fields in the tables and/or examples below use a single name/value pair to define a property of the "sc-boundary" component e.g. "mandatory": true.

    Whereas the fields "geocodeSearchService", "layers", "mapParameters" and "mapViews" require a set of name/value pair fields to define a property of the "sc-boundary" component. The tables below provide a summary description of these fields and a link to an Appendix that has the detailed description. Links to these appendices are also listed below.

2.1 Required System Fields

Field Valid Values Description
componentName sc-boundary The component name.

Example:
"componentName": "sc-boundary"

2.2 Required Customizable Fields

Field Valid Values Description
name Any value written in camel case. Defines the name of the "sc-boundary" field in the document and database.

Example:
"name": "scBoundaryTypicalDefn"

2.3 Optional Customizable Fields

Field Valid Values Description
addressEntry true Display a combined map, "Address Search" and "Street Address" fields on a form.
Entering a full or partial address in the "Address Search" field will return a list of matching street addresses. Selecting an address will populate the "Street Address" fields and centre and zoom the map on that address.

Example:
"addressEntry": true

Note:
On saving changes to a "sc-boundary" field (e.g. drawings, text, etc. added to the map), "Street Address" field values will:
  1. Not be saved to the documentof database.
  2. Be cleared on completion of the save.
false Default value.
Display only the map field on the form.
color Valid colour value The line and fill colour for spatial objects (e.g. points, lines, circles, polygons, squares, boxes) drawn on the map.
Colours are specified using valid color names, colour Hex values, color RGB values or valid HSL color values.

Examples:
"color": "red"
"color": "#FF0000"
"color": "rgb(255, 0, 0)"
"color": "hsl(186.79, 71.62%, 70.98%)"

Note:
A color chosen by clicking the "Select drawing color" button and selecting a color option will take prescedence over the color defined by the root level "color" field.
black Default value.
country Valid country code Used by a geocode service to improve performance. E.g. address searches will restrict results to the defined country.
To avoid conflicts, recommend using either this country field or the geocoderDefaultCountry field within the geocodeSearchService field to specify a country, but not both.

Example:
"country": "au"
Defaults to the "geocoderDefaultCountry" if one exists, otherwise no restriction on country.
disableMouseWheel true Disables the ability to zoom the map using the mouse wheel.

Example:
"disableMouseWheel": true
false Default value.
Enables the ability to zoom the map using the mouse wheel.
disableSave true Changes made to a "sc-boundary" map (i.e. drawing a spatial object, adding text, placing an icon on the map) does not trigger the document Save icon to flash.
Exiting the form without saving changes to the "sc-boundary" map does not trigger a warning message to display.
In the Angular version of the "sc-boundary" component, clicking the Save icon will not save changes made to a "sc-boundary" map to the document.
In the AngularJS version of the "sc-boundary" component, clicking the Save icon will save changes made to a "sc-boundary" map to the document.

Example:
"disableSave": true
false Changes made to a "sc-boundary" map (i.e. drawing a spatial object, adding text, placing an icon on the map) does trigger the document Save icon to flash.
Exiting the form without saving changes to the "sc-boundary" map does trigger a warning message to display.
In both the Angular and AngularJS versions of the "sc-boundary" component, clicking the Save icon will save changes made to a "sc-boundary" map to the document.
drawColors Array of valid color values An array of color definitions that specify the color options to display when the "Select drawing color" button is clicked.
The selected color is used as the line and fill color of spatial objects (e.g. points, lines, circles, polygons, etc) drawn on the map.
The selected color will continue to be used until another color is selected.
A color definition can be a valid color name, color Hex value, color RGB value or color HSL value.

Example:
"drawColors": [
"black",
"red",
"#648c51",
"purple",
"rgb(255, 152, 0)",
"hsl(186.79, 71.62%, 70.98%)"
]

Note:
A color chosen by clicking the "Select drawing color" button and selecting a color option will take prescedence over the color defined by the root level "color" field.
Defaults to the first color defined in the array of colors. For the example shown above, the default color would be black.
drawDash Array of valid dash line styles An array of dash line definitions that specify the list of dash line style options to display when the "Select dash line style" button is clicked.
The selected dash line style is used as the dash line style for spatial objects (e.g. lines, circles, polygons, etc) drawn on the map.
The selected dash line style will continue to be used until another dash line style is selected.
A dash line style definition is an array of 2 integers that specify the length of the dashes and the gaps between respectively.

Example:
"drawDash": [
[5,5],
[5,10],
[10,5],
[5,0]
]
Defaults to the first dash line style defined in the array of dash line styles.
drawFont Array of valid font names An array of valid font names that specify the list of font name options to display when the "Select font" button is clicked.
The selected font name will be used as the font for text entered on the map.
The selected font name will continue to be used until another font name is selected.

Example:
"drawFont": [
"Courier New",
"Arial",
"Helvetica",
"Lucida Bright",
"Brush Script MT"
]
Defaults to the first font name defined in the array of font names.
drawFontSize Array of font sizes An array of font sizes that specify the list of font size options to display when the "Select font size" button is clicked.
The selected font size will be used as the font size for text entered on the map.
The selected font size will continue to be used until another font size is selected.

Example:
"drawFontSize": [
"10pt",
"12pt",
"14pt",
"18pt"
]
Defaults to the first font size defined in the array of font sizes.
drawIcon Array of valid icon definitions An array of icon definitions that specify the list of icon options to display when the "Select icon" button is clicked.
The selected icon will be used as the icon to be placed on the map.
The selected icon will continue to be used until another icon is selected.
An icon definition consists of a fileReference id and if required an imageAnchor, otherwise the imageanchor defaults to [0.5,0.5]

Example:
"drawIcon": [
{
"fileNo": "db7c0847d5b6379f4b6a3aafc8ebef81",
"imageAnchor": [0,0] },
}
{
"fileNo": "720662a624f21a61218934182a913a61",
"imageAnchor": [1,0] },
}
{
"fileNo": "c39a547c0a3e71d0168be074cc23ec65",
"imageAnchor": [0,0] },
}
{
"fileNo": "0803b5b879dbb60e70d70024580a3f50"
}
]
Defaults to the first icon defined in the array of icon definitions.
drawingMode Defines whether multiple spatial objects of the same type drawn on a map will be saved in the document and database as individual single spatial objects or as an array of spatial objects.
multi Multiple spatial objects of ther same type drawn on a map will be saved in the document and database as an array of spatial objects.

Example:
"drawingMode": "multi"
single Default value.
Multiple spatial objects of the same type drawn on a map will be saved in the document and database as individual single spatial objects.
drawingTools Array of map tool names An array of map tool names.

Example:
"drawingTools": [
"Point",
"Line",
"polygon",
"circle",
"square",
"box",
"text",
"single",
"multi",
"currentLocation",
"delete",
"arrowAtLastPoint",
"arrowAtFirstPoint",
"dimension"
]

Note:
  1. Items "currentLocation" and "delete" will display as map tool buttons.
  2. Items "single" and "multi" work together with the "drawingMode" field to determine the behaviour of the "Drawing Mode" button as described in Section 2.3 "Drawing Mode" button.
  3. The other items will display as "Drawing Tool Menu" options, each shown as a button indicating its function as shown in Section 1 Purpose.
Defaults to an array of default map tool names (to be documented)
drawWidth Array of integers An array of integers that specify the line width options to display when the "Select line width" button is clicked.
The selected line width will be used as the line width for spatial objects drawn on the map.
The selected line width will continue be used until another line width is selected.

Example:
"drawWidth": [
2,
4,
6,
10
]
Defaults to the first line width defined in the array of line widths.
enabled false The "Address Search" field, "Street Address" fields and "Map Tool" buttons are disabled, removing the ability to:
  • Search for an address.
  • Draw, edit or delete spatial objects.
  • Enter or delete text.
  • Centre the map at the current location of the user.
A Stop icon appears on mouseover of the "Address Search" field, "Street Address" fields and "Map Tool" buttons..
The "Zoom In/Out", "Full Screen" and "Map View" buttons remain enabled.

Example:
"enabled": false
true Default value.
The "Address Search" field, "Street Address" fields and "Map Tool", "Zoom In/Out", "Full Screen", "Map View" buttons are enabled.
A Stop icon does not appear on mouseover of the above fields and buttons.
EPSG Valid EPSG SRID EPSG is a spatial coordinate system used to locate geographical entities on a map, a map being a 2D projection of the 3D earth's surface or a region of the earth's 3D surface. There are many 2D projections, each using different properties to represent distances, angles or areas. Certain projections are better suited for different regions in the world.
An EPSG SRID (Spatial Reference System Identifier) value identifies a specific 2D projection coordinate system together with the region of the earth it covers. Examples:
EPSG:3111 is the projection coordinate system used for rendering a 2D map of the state of Victoria (between 140.9500, -39.1500 and 149.9800, -34.0000).

Example:
"EPSG": "EPSG:3111"
EPSG:3857 Defaults to the Web Mercator projection (EPSG:3857) which is used to render a map of the world (between 85.06°S and 85.06°N) for online mapping applications such as Google Maps, OpenStreetMaps, OpenLayers, Bing and ESRI.
fullWidth true The "sc-boundary" field displays full width on the form.

Example:
"fullWidth": true
false Default value.
The "sc-boundary" field does not display full width on the form.
geocodeSearchService An array of geocode service definitions, each definition being an array of name/value pairs and each defining the properties of a geocode service.
A geocode service provides geocoding and reverse geocoding functionality.
The "sc-boundary" component does not require reverse geocoding functionality, hence a geocode service definition need only include the name/value fields pertaining to geocoding functionality.
The "sc-boundary" component uses thegeocodeSearchService field in conjunction with "addressEntry": true to provide geocoding functionality.
Geocode service providers include Google, Geocode.Farm, Vicmap, PSMA and psmafarm.
See Appendix A: geocodeSearchService Field for a detailed description of the geocodeSearchService field.
handlebarsHelpers Defines a handlebar helper function which can be used to manupulate data.

Example:
For a map layer displaying pipes, a handlebarsHelper function named "pipeColorByType" to determine the display color of each pipe based on its material.

"handlebarsHelpers": [
{
"function": "function(status, options) { switch (status) { case 'CICL': return 'LightGreen'; case 'AC': return 'blue' ; case 'DICL': return 'orange' ; case 'MDPE': return 'red' ; case 'MPVC': return 'SkyBlue'; case 'CU': return 'yellow'; case 'CI(CL67)': return 'pink'; default: return 'black';}}",
"name": "pipeColorByType"
}
]
heightNum numeric Defines the height of the "sc-boundary" map as a multiple of a standard height.

Example:
"heightNum": 3
1 Default value.
The height of the "sc-boundary" map defaults to 1 standard height.
label Any value Defines the name of a "sc-boundary" field on the form i.e. the field label.

Example:
"label": "sc-boundary Typical Defn"
Defaults to no label is displayed.
layers Array of map layer definitions An array of map layer definitions, each defining the properties of a map layer.
See Appendix B: layers Field for a detailed description of the "layers" field.

Note:
mandatory true The "sc-boundary" field displays as mandatory (i.e. label in red text with an asterisk).
Saving without a value (e.g. drawing a spatial object, writing text on the map), a message prompts the user to enter a value for the "sc-boundary" field.

Example:
"mandatory": true
false Default value.
The "sc-boundary" field displays as optional (i.e. label in black text).
mapParameters Set of name/value fields A set of name/value pair fields that define the properties of the map.
See Appendix C: mapParameters Field for detailed description of the "mapParameters" field.
searchDelay Integer On entering criteria into the "Address Search" field, the number of milliseconds to wait until the address search function is called.

Example:
"searchDelay": 1500
Defaults to the value set in the Environment Configuration document for the "clientConfiguration"."searchDelay" field, or to 500 milliseconds if that isn't set.
searchMinLength Integer The minimum number of characters, excluding trailing spaces, that need to be entered into the "Address Search" field before the address search function is called.

Example:
"searchMinLength": 5
3 Default value.
showTiming Used to assess and monitor performance by recording key time points in the processing of an asset set returned by a root level or a layer filter query.
Key time points include:
  • Asset set load Start Time e.g. triggered on component load, map movement, handlebars value change, etc).
  • Asset set load End Time

    • As illustrated in the examples below, also logged will be the Asset Load trigger type and the Layer number containing the filter query.

      Example:
      from: mapMoveEnd layer[15] end time return asset = 2021-06-30T05:16:59.526Z
      , start time = 2021-06-30T05:16:58.303Z
      , total time = 1.223 (seconds)
    true Record key time points in the processing of an asset set returned by a root level or a layer filter query.

    Example:
    "showTiming": true
    false Default value.
    Do not record key time points in the processing of an asset set returned by a root level or a layer filter query.
    visible false The sc-boundary field is not visible on the form.

    Example:
    "visible": false
    true Default value.
    The "sc-boundary" field is visible on the form.

     

    2.3.1 "Drawing Mode" button

    The behaviour of the "Drawing Mode" button is dependent on how the "drawingMode" field and the "drawingTools" options "single" and "multi" together are defined.

    In the table below:

    • Columns 1 and 2 list the 12 scenarios by which the "drawingMode" field and the "drawingTools" options "single" and "multi" together can be defined (columns.
    • For each scenario, the resulting:
      • Initial mode of the "Drawing Mode" button (column 3).
      • Drawing modes supported (column 4).

    sc-boundary-drawing-mode-button-behaviour

     

    3 Typical Definition

    Below is a typical "sc-boundary" component definition, defined with its required fields plus any optional field whose value is typically other than its default value.

            {
                "componentName": "sc-boundary",
                "name": "scBoundarytypicalDefn",
                "drawColors": [
                    "black",
                    "red",
                    "#648c51",
                    "purple",
                    "rgb(255, 152, 0)",
                    "hsl(186.79, 71.62%, 70.98%)"
                ],
                "drawDash": [
                    [
                        5,
                        5
                    ],
                    [
                        5,
                        10
                    ],
                    [
                        10,
                        5
                    ],
                    [
                        5,
                        0
                    ]
                ],
                "drawFont": [
                    "Courier New",
                    "Arial",
                    "Helvetica",
                    "Perpetua",
                    "Lucida Bright",
                    "Brush Script MT"
                ],
                "drawFontSize": [
                    "10pt",
                    "12pt",
                    "14pt",
                    "18px"
                ],
                "drawIcon": [
                    {
                        "fileNo": "db7c0847d5b6379f4b6a3aafc8ebef81",
                        "imageAnchor": [
                            0,
                            0
                        ]
                    },
                    {
                        "fileNo": "720662a624f21a61218934182a913a61",
                        "imageAnchor": [
                            0.5,
                            0.5
                        ]
                    },
                    {
                        "fileNo": "c39a547c0a3e71d0168be074cc23ec65",
                        "imageAnchor": [
                            1,
                            0
                        ]
                    },
                    {
                        "fileNo": "0803b5b879dbb60e70d70024580a3f50"
                    }
                ],
                "drawingTools": [
                    "point",
                    "line",
                    "polygon",
                    "circle",
                    "square",
                    "box",
                    "text",
                    "single",
                    "multi",
                    "currentLocation",
                    "delete",
                    "arrowAtLastPoint",
                    "arrowAtFirstPoint",
                    "dimension"
                ],
                "drawWidth": [
                    2,
                    4,
                    6,
                    10
                ],
                "EPSG": "EPSG:3111",
                "fullWidth": true,
                "heightNum": 3,
                "label": "sc-boundary Typical Defn",
                "mapParameters": {
                    "defaultLat": -37.8,
                    "defaultLon": 144.9,
                    "maxResolution": 2100,
                    "minResolution": 0.0116670900008467,
                    "type": "openlayers",
                    "mapViews": [
                        {
                            "EPSG": "EPSG:3857",
                            "params": {
                                "BBOX": "16133701.716224,-4393099.8016821,16446787.78408,-4080013.733826",
                                "FIRSTTILE": true,
                                "FORMAT": "image/png",
                                "HEIGHT": "256",
                                "LAYERS": "CARTO_WM_256",
                                "REQUEST": "GetMap",
                                "SERVICE": "WMS",
                                "SRS": "EPSG:3857",
                                "STYLES": "",
                                "VERSION": "1.1.1",
                                "WIDTH": "256"
                            },
                            "serverType": "geoserver",
                            "uiLabel": "M",
                            "url": "https://base.maps.vic.gov.au/service"
                        },
                        {
                            "EPSG": "EPSG:3857",
                            "params": {
                                "BBOX": "16280475.531304,-4696291.0150527,16593561.59916,-4383204.9471967",
                                "FIRSTTILE": true,
                                "FORMAT": "image/png",
                                "HEIGHT": "512",
                                "LAYERS": "AERIAL_WM",
                                "REQUEST": "GetMap",
                                "SERVICE": "WMS",
                                "SRS": "EPSG:3857",
                                "STYLES": "",
                                "VERSION": "1.1.1",
                                "WIDTH": "512"
                            },
                            "serverType": "geoserver",
                            "uiLabel": "S",
                            "url": "https://base.maps.vic.gov.au/service"
                        },
                        {
                            "groupView": [
                                {
                                    "EPSG": "EPSG:3857",
                                    "params": {
                                        "BBOX": "16280475.531304,-4696291.0150527,16593561.59916,-4383204.9471967",
                                        "FIRSTTILE": true,
                                        "FORMAT": "image/png",
                                        "HEIGHT": "512",
                                        "LAYERS": "AERIAL_WM",
                                        "REQUEST": "GetMap",
                                        "SERVICE": "WMS",
                                        "SRS": "EPSG:3857",
                                        "STYLES": "",
                                        "VERSION": "1.1.1",
                                        "WIDTH": "512"
                                    },
                                    "serverType": "geoserver",
                                    "url": "https://base.maps.vic.gov.au/service"
                                },
                                {
                                    "EPSG": "EPSG:3857",
                                    "params": {
                                        "BBOX": "16446787.78408,-4393099.8016821,16759873.851936,-4080013.733826",
                                        "FIRSTTILE": true,
                                        "FORMAT": "image/png",
                                        "HEIGHT": "256",
                                        "LAYERS": "CARTO_OVERLAY_WM_256",
                                        "REQUEST": "GetMap",
                                        "SERVICE": "WMS",
                                        "SRS": "EPSG:3857",
                                        "STYLES": "",
                                        "VERSION": "1.1.1",
                                        "WIDTH": "256"
                                    },
                                    "serverType": "geoserver",
                                    "url": "https://base.maps.vic.gov.au/service"
                                }
                            ],
                            "uiLabel": "O"
                        }
                    ]
                }
            }
    

    One or more of the optional fields shown below can be included in the above definition should a value other than their default value be required.

            {
                "addressEntry": true,
                "color": "red",
                "country": "au",
                "drawingMode": "multi",
                "disableMouseWheel": true,
                "disableSave": true,
                "enabled": false,
                "geocodeSearchService": [
                    {
                        "apiKey": "Insert your PSMA API Key here",
                        "autocompleteUrl": "https://api.psma.com.au/predictive/address?query=",
                        "geocodeUrl": "https://api.psma.com.au/v1/addresses?",
                        "name": "psma",
                        "addressDetailUrl": "https://api.psma.com.au/v1/addresses/",
                        "addressUrl": "https://api.psma.com.au/predictive/address/",
                        "apiKeyReverse": "Insert your Reverse PSMA API Key here"
                    }
                ],
                "handlebarsHelpers": [
                    {
                        "function": "function(status, options) { switch (status) { case 'CICL': return 'LightGreen'; case 'AC': return 'blue' ; case 'DICL': return 'orange' ; case 'MDPE': return 'red' ; case 'MPVC': return 'SkyBlue'; case 'CU': return 'yellow'; case 'CI(CL67)': return 'pink'; default: return 'black';}}",
                        "name": "pipeColorByType"
                    }
                ],
                "layers": [
                    {
                        "color": "{{pipeColorByType row.pipe_matrl}}",
                        "filter": "{'query':{'bool':{'filter':[{'term':{'systemHeader.templateId':'36811ce0-d885-11e6-92c9-934eb61df86d'}}]}}}",
                        "geoJsonField": "locationGeo",
                        "additionalQueryFields": [
                            "pipe_matrl"
                        ],
                        "labelColor": "{{pipeColorByType row.pipe_matrl}}",
                        "labelFontWeight": "normal",
                        "labelOutlineColor": "white",
                        "labelPlacement": "line",
                        "layerDisplayOnly": false,
                        "lineWidth": 2,
                        "tooltips": "PIPE <a href='/form/{{{documentId}}}' target='_blank'>{{{systemHeader.summaryName}}}</a> created on {{{systemHeader.createdDate}}}",
                        "labelText": "size {{{pipe_dia}}} mm"
                    }
                ],
                "mandatory": true,
                "searchDelay": 1500,
                "searchMinLength": 5,
                "showTiming": true,
                "visible": false,
            }
    

     

    4 Examples

    Example 1

    A "sc-boundary"component defined with the typically needed fields shown in Section 3 Typical Definition.

    Resulting "sc-boundary" field on the form:

    sc-boundary-field-Example-1-Image-1

    Performing the following:

    1. Toggle the "Drawing Mode" button to "single" mode Icon-sc-boundary-drawingMode-single Using the "Drawing Tools Menu" icon-sc-boundary-drawing-tools-menu, "Select Drawing Color" purple icon-sc-boundary-drawing-tools-color-purple Using the "Drawing Tools Menu" icon-sc-boundary-drawing-tools-menu, select and place the following on the map":
      • 2 points.
      • 2 line strings.
      • 2 polygons.
      • 1 line string with arrowhead at the last point.
      • 1 line string displaying as a dash line.
      • 1 line string displaying as a dash line with its length dimension.
      • 1 text box showing "Text written on the map" .
      • 1 "fire hydrant" icon.
      • 1 "water valve" icon.
    2. Toggle the "Drawing Mode" button to "multi" mode Icon-sc-boundary-drawingMode-multi Using the "Drawing Tools Menu" icon-sc-boundary-drawing-tools-menu, "Select Drawing Color" red icon-sc-boundary-drawing-tools-color-red Using the "Drawing Tools Menu" icon-sc-boundary-drawing-tools-menu, select and place the following on the map":
      • 3 points.
      • 2 line strings.
      • 2 polygons.

    Resulting "sc-boundary" field on the form:

    sc-boundary-field-Example-1-Image-2

    Resulting "sc-boundary" field saved in the document and database:

    Note:

    1. The purple spatial objects were drawn on the map with the "Drawing Mode" button set to "single" Icon-sc-boundary-drawingMode-single. Hence they were saved in the document and database as individual single spatial objects.
    2. The red spatial objects were drawn on the map with the "Drawing Mode" button set to "multi" Icon-sc-boundary-drawingMode-multi. Hence the spatial objects of the same type were saved in the document and database as an array of spatial objects i.e. an array of 3 points ("type": "MultiPoint"), an array of 2 line strings ("type": "MultiLineString") and an array of 2 polygons ("type": "MultiPolygon").
        "scBoundarytypicalDefn": {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            144.89436463332453,
                            -37.796855761326576
                        ]
                    },
                    "properties": {
                        "fillColor": "purple",
                        "color": "purple"
                    }
                },
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "LineString",
                        "coordinates": [
                            [
                                144.89594131280566,
                                -37.79647277771397
                            ],
                            [
                                144.8978866218221,
                                -37.79654223233278
                            ]
                        ]
                    },
                    "properties": {
                        "fillColor": "purple",
                        "color": "purple"
                    }
                },
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            144.90425382786844,
                            -37.796626953640555
                        ]
                    },
                    "properties": {
                        "fillColor": "purple",
                        "color": "purple",
                        "point": "api/getFile/db7c0847d5b6379f4b6a3aafc8ebef81",
                        "anchor": [
                            0,
                            0
                        ]
                    }
                },
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "LineString",
                        "coordinates": [
                            [
                                144.9004965082744,
                                -37.79579074582074
                            ],
                            [
                                144.90270184931163,
                                -37.795860628456545
                            ]
                        ]
                    },
                    "properties": {
                        "fillColor": "purple",
                        "color": "purple",
                        "lineDash": [
                            5,
                            5
                        ]
                    }
                },
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            144.8958159397707,
                            -37.79474710359459
                        ]
                    },
                    "properties": {
                        "fillColor": "purple",
                        "color": "purple",
                        "lineDash": [
                            5,
                            5
                        ],
                        "point": "api/getFile/0803b5b879dbb60e70d70024580a3f50",
                        "anchor": [
                            0.5,
                            0.5
                        ]
                    }
                },
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "LineString",
                        "coordinates": [
                            [
                                144.90030118994213,
                                -37.79521282079259
                            ],
                            [
                                144.90311213744764,
                                -37.79530652880206
                            ]
                        ]
                    },
                    "properties": {
                        "fillColor": "purple",
                        "color": "purple",
                        "arrowHead": "atLastPoint"
                    }
                },
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            144.89289214981957,
                            -37.796758957067745
                        ]
                    },
                    "properties": {
                        "fillColor": "purple",
                        "color": "purple"
                    }
                },
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            144.9041524407735,
                            -37.79865771786515
                        ]
                    },
                    "properties": {
                        "text": "Text written on the map",
                        "textId": "8f3144e0-640c-11ee-9f73-811792347d30"
                    }
                },
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "LineString",
                        "coordinates": [
                            [
                                144.90606317488704,
                                -37.798484376727615
                            ],
                            [
                                144.90692859425454,
                                -37.79859701536071
                            ],
                            [
                                144.90832695141506,
                                -37.79811933127858
                            ],
                            [
                                144.90652690311867,
                                -37.797931618733664
                            ],
                            [
                                144.90683961167286,
                                -37.796244379891256
                            ],
                            [
                                144.90793484750907,
                                -37.79634083254452
                            ]
                        ]
                    },
                    "properties": {
                        "fillColor": "purple",
                        "color": "purple",
                        "dimensionId": "732713b0-640c-11ee-9f73-811792347d30",
                        "dimension": 656.8910050375947,
                        "lineDash": [
                            5,
                            5
                        ]
                    }
                },
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "LineString",
                        "coordinates": [
                            [
                                144.8959923574942,
                                -37.796974266672166
                            ],
                            [
                                144.89592721034217,
                                -37.797616752804295
                            ],
                            [
                                144.89775740358698,
                                -37.79764406954724
                            ]
                        ]
                    },
                    "properties": {
                        "fillColor": "purple",
                        "color": "purple"
                    }
                },
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [
                            [
                                [
                                    144.90254110380425,
                                    -37.79655895225416
                                ],
                                [
                                    144.9016549379213,
                                    -37.79747838395024
                                ],
                                [
                                    144.90329202456607,
                                    -37.79750019473857
                                ],
                                [
                                    144.90254110380425,
                                    -37.79655895225416
                                ]
                            ]
                        ]
                    },
                    "properties": {
                        "fillColor": "purple",
                        "color": "purple"
                    }
                },
                {
                    "type": "Feature",
                    "properties": {
                        "fillColor": "purple",
                        "color": "purple"
                    },
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [
                            [
                                [
                                    144.89959975967247,
                                    -37.796360348522214
                                ],
                                [
                                    144.89890816888084,
                                    -37.79713231852123
                                ],
                                [
                                    144.90044964055326,
                                    -37.79743738874895
                                ],
                                [
                                    144.90075077908503,
                                    -37.79681037701589
                                ],
                                [
                                    144.89959975967247,
                                    -37.796360348522214
                                ]
                            ]
                        ]
                    }
                },
                {
                    "type": "Feature",
                    "properties": {
                        "fillColor": "red",
                        "color": "red",
                        "idGroup": "mp"
                    },
                    "geometry": {
                        "type": "MultiPoint",
                        "coordinates": [
                            [
                                144.8926090511538,
                                -37.79942187026335
                            ],
                            [
                                144.89328551204403,
                                -37.79944882028834
                            ],
                            [
                                144.89391545094017,
                                -37.799475215008705
                            ],
                            [
                                144.89391545094017,
                                -37.799475215008705
                            ]
                        ]
                    }
                },
                {
                    "type": "Feature",
                    "properties": {
                        "fillColor": "red",
                        "color": "red",
                        "idGroup": "mo"
                    },
                    "geometry": {
                        "type": "MultiPolygon",
                        "coordinates": [
                            [
                                [
                                    [
                                        144.89873323033058,
                                        -37.79887422191142
                                    ],
                                    [
                                        144.90003067946034,
                                        -37.7992548559424
                                    ],
                                    [
                                        144.89990870473264,
                                        -37.8001326890969
                                    ],
                                    [
                                        144.8984033302844,
                                        -37.79943208325159
                                    ],
                                    [
                                        144.89873323033058,
                                        -37.79887422191142
                                    ]
                                ]
                            ],
                            [
                                [
                                    [
                                        144.90220601650014,
                                        -37.79911670872181
                                    ],
                                    [
                                        144.90130573241186,
                                        -37.80014179140733
                                    ],
                                    [
                                        144.90256572377044,
                                        -37.8002173018925
                                    ],
                                    [
                                        144.90220601650014,
                                        -37.79911670872181
                                    ]
                                ]
                            ]
                        ]
                    }
                },
                {
                    "type": "Feature",
                    "properties": {
                        "fillColor": "red",
                        "color": "red",
                        "idGroup": "ml"
                    },
                    "geometry": {
                        "type": "MultiLineString",
                        "coordinates": [
                            [
                                [
                                    144.89486430683849,
                                    -37.79968932214953
                                ],
                                [
                                    144.89679775210973,
                                    -37.79978540557469
                                ]
                            ],
                            [
                                [
                                    144.89499204421372,
                                    -37.80022978656959
                                ],
                                [
                                    144.89479145797827,
                                    -37.80098061625202
                                ],
                                [
                                    144.896612522065,
                                    -37.801027758470184
                                ]
                            ]
                        ]
                    }
                }
            ]
        }
    

     

    Example 2

    A "sc-boundary"component defined with the typically needed fields shown in Section 3 Typical Definition PLUS the non-typical fields shown below:

            {
                "addressEntry": true,
                "country": "au",
                "geocodeSearchService": [
                    {
                        "apiKey": "Insert your PSMA API Key here",
                        "autocompleteUrl": "https://api.psma.com.au/predictive/address?query=",
                        "geocodeUrl": "https://api.psma.com.au/v1/addresses?",
                        "name": "psma",
                        "addressDetailUrl": "https://api.psma.com.au/v1/addresses/",
                        "addressUrl": "https://api.psma.com.au/predictive/address/",
                        "apiKeyReverse": "Insert your Reverse PSMA API Key here"
                    }
                ],
                "handlebarsHelpers": [
                    {
                        "function": "function(status, options) { switch (status) { case 'CICL': return 'LightGreen'; case 'AC': return 'blue' ; case 'DICL': return 'orange' ; case 'MDPE': return 'red' ; case 'MPVC': return 'SkyBlue'; case 'CU': return 'yellow'; case 'CI(CL67)': return 'pink'; default: return 'black';}}",
                        "name": "pipeColorByType"
                    }
                ],
                "layers": [
                    {
                        "color": "{{pipeColorByType row.pipe_matrl}}",
                        "filter": "{'query':{'bool':{'filter':[{'term':{'systemHeader.templateId':'36811ce0-d885-11e6-92c9-934eb61df86d'}}]}}}",
                        "geoJsonField": "locationGeo",
                        "additionalQueryFields": [
                            "pipe_matrl"
                        ],
                        "labelColor": "{{pipeColorByType row.pipe_matrl}}",
                        "labelFontWeight": "normal",
                        "labelOutlineColor": "white",
                        "labelPlacement": "line",
                        "layerDisplayOnly": false,
                        "lineWidth": 2,
                        "tooltips": "PIPE <a href='/form/{{{documentId}}}' target='_blank'>{{{systemHeader.summaryName}}}</a> created on {{{systemHeader.createdDate}}}",
                        "labelText": "size {{{pipe_dia}}} mm"
                    }
                ],
                "searchDelay": 1500,
                "searchMinLength": 5,
            }
    

    The "addressEntry", "country", "geocodeSearchService", "searchDelay" and "searchMinLength" fields are defined to provide and configure "Address Search" and "Street Address" fields.

    The "layers" field defines a map layer displaying pipes, the "handlebarsHelpers" field defines the display color of each pipe based on its materia.

    Resulting "sc-boundary" field on the form:

    sc-boundary-field-Example-2-Image-1

    Entering apartial address in the "Address Search" field will return a list of matching addresses.

    Resulting "sc-boundary" field on the form:

    sc-boundary-field-Example-2-Image-2

    Selecting an address from the list will use the selected address to:

    • Populate the "Street Address" fields.
    • Centre the map on the selected address.
    • Position an "Address Marker" icon icon-adddress-marker at the selected address.

    Resulting "sc-boundary" field on the form:

    sc-boundary-field-Example-2-Image-3

    Performing the following:

    1. Toggle the "Drawing Mode" button to "single" mode Icon-sc-boundary-drawingMode-single
    2. Select the "Circle" tool from the "Drawing Tools Menu" icon-sc-boundary-drawing-tools-menu and draw a circle on the map.

    Resulting "sc-boundary" field on the form:

    sc-boundary-field-Example-2-Image-4

    On saving the changes made to the "sc-boundary" field:

    1. The circle drawn on on the map is saved to the document and database.
    2. The "Street Address" field values are not saved to the document and database.
    3. The "Street Address" fields are cleared.
    4. The map centres on the item(s) drawn on the map, i.e. in this example the circle.
    5. The "Address Marker" icon icon-adddress-marker no longer displays on the map.

    Resulting "sc-boundary" field on the form:

    sc-boundary-field-Example-2-Image-5

    Resulting "sc-boundary" field saved in the document and database:

        "scBoundaryWithAddressEntryandLayers": {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            144.8973824270146,
                            -37.795112171786776
                        ]
                    },
                    "properties": {
                        "radius": 63.80493089929223,
                        "subType": "Circle"
                    }
                }
            ]
        }