Popup API

[Jesus89]

This is a proposal based on #641.

The proposed changes are:

• Rename Interactivity to Popup
• Allow setting up 'hover' and 'click' event at the same time
• Use columns directly (without manually declaring the variables in the style)
• Use expressions directly

Examples:

• Columns

# Popup: columns
Map(
    Layer(
        Source('populated_places'),
        Style('color: blue'),
        Popup({
            'hover': ['$name'],
            'click': ['$name', '$pop_max']
        })
    )
)

# Popup: columns + sugar
Map(
    Layer(
        'populated_places',
        'color: blue',
        {
            'hover': ['$name'],
            'click': ['$name', '$pop_max']
        }
    )
)

• Expressions

# Popup: expressions
Map(
    Layer(
        Source('populated_places'),
        Style('color: blue'),
        Popup({
            'hover': ['sqrt($pop_max)', '$pop_min % 100']
        })
    )
)

# Popup: expressions + sugar
Map(
    Layer(
        'populated_places',
        'color: blue',
        {
            'hover': ['sqrt($pop_max)', '$pop_min % 100']
        }
    )
)

• Labels

# Popup: with labels
Map(
    Layer(
        Source('populated_places'),
        Style('color: blue'),
        Popup({
            'hover': [{
                'label': 'Name',
                'value': '$name'
            }],
            'click': [{
                'label': 'Name',
                'value': '$name'
            }, {
                'label': 'Pop max',
                'value': '$pop_max'
            }]
        })
    )
)

# Popup: with labels + sugar
Map(
    Layer(
        'populated_places',
        'color: blue',
        {
            'hover': [{
                'label': 'Name',
                'value': '$name'
            }],
            'click': [{
                'label': 'Name',
                'value': '$name'
            }, {
                'label': 'Pop max',
                'value': '$pop_max'
            }]
        }
    )
)

[Jesus89]

Closed via #682