CODEWITHSUNDEEP
cssleafletplotly-dash
JrCaspian
JrCaspian

Reputation: 327

How can I change polygon style?

I have a callback function generating rectangle polygons dynamically on a map (which is produced via Dash Leaflet). The polygons are created from coordinates of the rectangle selection tool. As of now, I’m trying to make a change of the style of the rectangle persistent when I click on it on the map, and return back to previous style state when I click somewhere else. I’m facing a problem when trying to do so because the ID of the html element of the rectangle is dynamically generated, so no callback function can be called to change the polygon style.

I tried to assign different class names so that the style would change given the css stylesheet configuration, but this doesn’t work. I also tried changing the style attributes (fill and stroke, see below) directly from the dl.Rectangle object, but a standard css style from Dash prevent them to be applied.

I would easily solve this problem with JavaScript but Dash is a React-based tool, so I cannot perform any change of the DOM elements.

The code used to create the polygon from a callback function:

    new_roi = dl.Rectangle(
        bounds=[[float(rec.bottom), float(rec.left)],
                [float(rec.top), float(rec.right)]],
        id=rec.name,
        className='added-polygon',
        fillColor='green',
        color='green'
    )

I collect the polygons of a LayerGroup children (map_features) as State when clicking on one of the polygons. Then I modify the style and classname of the polygon clicked (at index position[-1] from map_features), and return the polygons, including the one modified as output to the LayerGroup. But this approach doesn’t work.

The map_features modifications:

map_features[positions[-1]]['props']['className'] = 'selected-polygon'
map_features[positions[-1]]['props']['stroke'] = 'green'
map_features[positions[-1]]['props']['fill'] = 'green'

Is there a way to make a persistent change of the style of a map polygon (that were dynamically generated) after clicking on it?

Upvotes: 0

Views: 101

Answers (1)

JrCaspian
JrCaspian

Reputation: 327

I just found the solution, which is to specify the pathOptions with respective properties, otherwise it won't work.

    map_features[positions[-1]] = dl.Rectangle(
        bounds=[[float(south), float(west)],
                [float(north), float(east)]],
        id=roi_name,
        className='added-polygon',
        pathOptions={
            'fillColor': '#d45b6d',
            'color': '#d45b6d',
            'stroke-dasharray': '3, 3',
            'stroke-width': 1.5,
            'fill-opacity': 0.2,
            'stroke-opacity': 1
        }
    )

Upvotes: 0

Related Questions