sc-boundary

This document is a user guide for the sc-boundary component version 5.26, released May 1, 2019.

1 Purpose

sc-boundary places a map field on a form with the option to combine the map with an address search and street address fields.

Map buttons provide the ability to draw points, circles, lines, quadrilaterals and polygons on the map, delete a drawing, zoom in, zoom out, toggle full screen and select a view mode (Map, Satellite, Street). Mouseover of a map button will display a button tooltip.

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

2 Definition

sc-boundary 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 fields described in the tables below are shown in bold text.
2. Most fields below use a single name/value pair to define a property of the sc-boundary component e.g. "mandatory": true.
   
   Whereas the field "geocodeSearchService" requires a set of name/value pair fields to define a property of the sc-boundary component. The tables below provide a summary description of this field and a link to an Appendix that has the detailed description. The link to this Appendix is also listed below.
   • Appendix A: geocodeSearchService Field

2.1 Required System Fields

2.2 Required Customizable Fields

2.3 Optional Customizable Fields

2.4 mapParameters Field

 The "mapParameters" field in Section 2.3 Optional Customizable Fields is a set of name/value fields defining the properties of the map.

This section lists and describes the name/value fields for defining properties of the map.

2.4.1 Optional Customizable Fields

2.4.2 mapViews Field

The "mapViews" field in Section 2.4.1 Optional Customizable Fields is an array of map view definitions, each defining the visual parameters (e.g. 2D projection, resolution, zoom level) of a map view.

This section lists and describes the fields for defining the properties of a map view.

2.4.3 Example

            "mapParameters": {
                "defaultLon": 144.9,
                "defaultLat": -37.8,
                "defaultZoom": 15,
                "mapViews": [
                    {
                        "serverType": "google",
                        "apiKey": "place your google keyid here"
                    }
                ]
            }

3 Typical Definition

When using the Google map server, below is a typical sc-boundary definition, defined with its required fields plus any optional field whose value is typically other than its default value.

        {
            "componentName": "sc-boundary",
            "color": "red",
            "fullWidth": true,
            "heightNum": 2,
            "label": "Test sc-boundary",
            "name": "testScBoundary",
            "mapParameters": {
                "defaultLon": 144.9,
                "defaultLat": -37.8,
                "defaultZoom": 15,
                "mapViews": [
                    {
                        "apiKey": "place your google keyid here",
                        "serverType": "google"
                    }
                ]
            }
        }

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,
            "country": "au",
            "disableMouseWheel": true,
            "disableSave": true,
            "enabled": false
            "mandatory": false,
            "searchDelay": 1500,
            "searchMinLength": 5,
            "visible": false

4 Examples

Example 1

sc-boundary defined:

• With the typically needed fields
• To use Google for sharing geospatial data.
• To place a map field on a form.

        {
            "componentName": "sc-boundary",
            "fullWidth": true,
            "name": "test1ScBoundary",
            "label": "Test 1 sc-boundary using google for geospatial data",
            "heightNum": 2,
            "color": "red",
            "mapParameters": {
                "defaultLon": 144.9,
                "defaultLat": -37.8,
                "mapViews": [
                    {
                        "apiKey": "place your google keyid here",
                        "serverType": "google"
                    }
                ],
                "defaultZoom": 15
            }
        }

Resulting field displayed on the form:

Resulting field displayed on the form after drawing a point, a line, a circle, a polygon and a rectangle:

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

    "test1ScBoundary": {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        144.88703956604002,
                        -37.798914879250155
                    ]
                },
                "properties": {}
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        144.89081611633299,
                        -37.79711761294367
                    ]
                },
                "properties": {
                    "radius": 151.0916366374728
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                144.8918460845947,
                                -37.80027127769669
                            ],
                            [
                                144.8942922592163,
                                -37.79867750696124
                            ],
                            [
                                144.8960947036743,
                                -37.800305187338715
                            ],
                            [
                                144.89399185180662,
                                -37.80033909696519
                            ],
                            [
                                144.89360561370847,
                                -37.80200064959227
                            ],
                            [
                                144.8920606613159,
                                -37.801559833150286
                            ],
                            [
                                144.8918460845947,
                                -37.80027127769669
                            ]
                        ]
                    ]
                },
                "properties": {}
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [
                            144.89639511108396,
                            -37.79820276009505
                        ],
                        [
                            144.89875545501707,
                            -37.796981968428945
                        ],
                        [
                            144.89982833862302,
                            -37.79874532769305
                        ],
                        [
                            144.90128746032713,
                            -37.797965385517784
                        ]
                    ]
                },
                "properties": {}
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                144.90077247619627,
                                -37.80244146340335
                            ],
                            [
                                144.90497817993162,
                                -37.80244146340335
                            ],
                            [
                                144.90497817993162,
                                -37.80074601126857
                            ],
                            [
                                144.90077247619627,
                                -37.80074601126857
                            ],
                            [
                                144.90077247619627,
                                -37.80244146340335
                            ]
                        ]
                    ]
                },
                "properties": {}
            }
        ]
    }

Example 2

sc-boundary defined to:

• Use geoserver for sharing geospatial data.
• Place a combined map, address search and street address fields in a form.
• Use PSMA geocode service for geocoding address search field values.

        {
            "componentName": "sc-boundary",
            "addressEntry": true,
            "color": "red",
            "EPSG": "EPSG:4326",
            "fullWidth": true,
            "geocodeSearchService": [
                {
                    "autocompleteUrl": "https://api.psma.com.au/predictive/address?query=",
                    "geocodeUrl": "https://api.psma.com.au/beta/v1/addresses?radius=",
                    "name": "psma",
                    "apiKey": "place your psma keyid here",
                    "addressUrl": "https://api.psma.com.au/predictive/address/"
                }
            ],
            "heightNum": 2,
            "label": "Test sc-boundary 3",
            "name": "testScBoundary3",
            "searchDelay": 1500,
            "searchMinLength": 6,
            "mapParameters": {
                "defaultLat": -37.8,
                "defaultLon": 144.9,
                "defaultZoom": 15,
                "mapViews": [
                    {
                        "serverType": "geoserver"
                    }
                ]
            }
        }

Resulting field displayed on the form:

Resulting field on the form after entering a partial address in the address search field:

Resulting field on the form after clicking the first matching address:

The map centers on the selected address.

Resulting field on the form after saving a drawn boundary:

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

    "test2ScBoundary": {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "id": 1,
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        0.0013029223623502598,
                        -0.0003409671053873353
                    ]
                },
                "properties": {
                    "icon": "images/marker.png"
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                0.00130292241968983,
                                -0.0003409710309512093
                            ],
                            [
                                0.0013029264593157925,
                                -0.00034097158851409404
                            ],
                            [
                                0.0013029252632401464,
                                -0.0003409771942841644
                            ],
                            [
                                0.001302921361782192,
                                -0.00034097638447860845
                            ],
                            [
                                0.00130292241968983,
                                -0.0003409710309512093
                            ]
                        ]
                    ]
                },
                "properties": null
            }
        ]
    }