maptips

The Maptips bundle displays information about features from an ArcGIS FeatureLayer when hovering it with the mouse pointer.

Usage

To define a custom maptip template for a layer, use the maptipTemplate property as in the following sample:

"map-init": {
    "Config": {
        "map": {
            "layers": [
                {
                    "id": "my-layer",
                    "type": "AGS_FEATURE",
                    "url": "<my-service-url>",
                    "maptipTemplate": {
                        "title": "{name}",
                        "content": "Area: {Shape__area} m²"
                    }
                }
            ]
        }
    }
}

You can use the same templates for maptipTemplate that you can use for the popupTemplate property. For an overview about how to configure individual popups, see the Individual popups section in the product documentation.

Support of expressionInfos defined on the layer

You can reuse expressionInfos that where defined on the layer to be used in fieldConfig elements by the result-ui bundle.

The following example shows the reuse of the expression/age in a fieldConfig element and a maptipTemplate.

"map-init": {
    "Config": {
        "map": {
            "layers": [{
                ...
                "fieldConfig": [
                    {
                        "name": "expression/age",
                        "title": "Age of tree"
                    }
                ],
                "expressionInfos": [
                    {
                        "name": "age",
                        "expression": "IIf(IsEmpty($feature.PLANT_YEAR), '' , Round(Year(Date()) - $feature.PLANT_YEAR,0) + ' years')"
                    }
                ],
                "maptipTemplate": {
                    "title": "{KIND_OF_TREE}<br/>{expression/age}",
                    "content": []
                }
            }]
        }
    }
}

NOTE: If a maptipTemplate defines an own expressionInfos element, this element is used instead of the element defined on the layer.

Reduce the loading time for maptips

To display maptips faster, data can be preloaded so that no server request is required every time a maptip is displayed.

To preload data, add the outFields property to the layer configuration. Its value is an array containing the names of the fields you are referencing in the maptip for that layer. To preload all fields of that layer, specify the value ["*"].

The preloading of fields can have a significant effect on the time required for the first display of the layer. Memory usage can also increase for layers with a large number of objects.

"map-init": {
    "Config": {
        "map": {
            "layers": [
                {
                    "id": "my-layer",
                    "type": "AGS_FEATURE",
                    "url": "<my-service-url>",
                    "outFields": ["name", "title"],
                    "maptipTemplate": {
                        "title": "{title}",
                        "content": "{name}"
                    }
                }
            ]
        }
    }
}

Use popup template definitions for maptips

To re-use a layers popup template configuration or display data in maptips with the default popup template, use the following configuration:

"maptips":{
    "Config":{
        "popupTemplateFallback": true
    }
}

If the maptipTemplate property is defined for a layer, it is still used instead of the popup template fallback.

Disable maptips for single layers

To disable maptips for single layers, set the property maptipEnabled on that layer to false as in the following configuration:

"map-init": {
    "Config": {
        "map": {
            "layers": [
                {
                    "id": "my-layer",
                    "type": "AGS_FEATURE",
                    "url": "<my-service-url>",
                    "maptipEnabled": false
                }
            ]
        }
    }
}

Constraints

You have to specify the content property. Otherwise the maptip does not refresh when hovering over different features. To configure a maptip with only a title, set the content property to [].

Configuration Reference

The following sample shows all configurable properties and their default values:

"maptips":{
    "Config":{
        "alignment": "pointer",
        "displayDelay": 0,
        "distanceFromPointer": {
            "x": 10,
            "y": 10
        },
        "fixedPositions": {
            "top-right": {
                "top": 10,
                "right": 10
            },
            "top-left": {
                "top": 10,
                "left": 10
            },
            "bottom-right": {
                "bottom": 10,
                "right": 10
            },
            "bottom-left": {
                "bottom": 10,
                "left": 10
            }
        },
        "popupTemplateFallback": false
    }
}

alignment property

distanceFromPointer property

fixedPositions property