how to update the <area> tag in visual studio (asp.net core mvc) with image-mapster?

Question

I have a mapped to an image containing several in a view. When the page is loaded, the area markings work the way I want, however I have a where when changing, the updates with new information that I am changing via jquery. When I change the and choose the I want, it doesn't change any marking, quite the contrary, the map does is to deselect the that I changed via jquery. Follow the codes:

Controller function:

public IActionResult MostrarMapa()
        {
            ViewData["Cidade"] = "Livramento de Nossa Senhora";
            return View();
        }

Select:

<select id="myselect" onchange="pintarPoly()">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>

Image and area map:

<img src="https://gartic.com.br/imgs/mural/si/sinistrus/livre_1261907513.png" id="map" usemap="#image-map">

<map name="image-map">
    <area target="" alt="" id="1" class="green" title="" href="#" coords="158,91,159,167,240,167,240,91" shape="poly">
    <area target="" alt="" id="2" class="a" title="" href="#" coords="242,91,243,168,327,166,327,91" shape="poly">
    <area target="" alt="" id="3" class="red" title="" href="#" coords="158,167,158,244,239,246,239,170" shape="poly">
    <area target="" alt="" id="4" class="b" title="" href="#" coords="241,245,241,168,325,168,328,244" shape="poly">
</map>

Generating the map:

var map = $('#map');
    map.mapster({
        mapKey: 'class',
        stroke: true,
        strokeWidth: 0.5,
        strokeColor: '000000',
        areas: [{
            key: 'red',
            staticState: true,
            render_select: {
                fillOpacity: 0.7,
                fillColor: 'ff0000'
            }
        },
        {
            key: 'green',
            staticState: true,
            render_select: {
                fillOpacity: 0.7,
                fillColor: '00ff00'
            }
        },
        {
            key: 'blue',
            staticState: true,
            render_select: {
                fillOpacity: 0.7,
                fillColor: '0000ff'
            }
        },
        {
            key: 'orange',
            staticState: true,
            render_select: {
                fillOpacity: 0.7,
                fillColor: 'ffa500'
            }
        }
        ],
        isSelectable: false
    })
        .mapster('snapshot')
        .mapster('rebind', {
            mapKey: 'class',
            isSelectable: false
        }, true);

Function to change the map:

function pintarPoly() {

        if ($('#myselect').val() == '1') {
            $('#1').attr('class', 'orange');
            $('#2').attr('class', 'blue');
            $('#3').attr('class', 'green');
            $('#4').attr('class', 'red');
            map.mapster('rebind');
}

I have already tried to define the image and the map as a partial view and update whenever I change the . I also tried to update the div that the image and the map belong to. But none worked well.

PS: The scripts containing jquery and image-mapster are being called correctly. The data is currently static, for testing only.

Answer 1

Here is a working demo like below:

View:

<select id="myselect" onchange="pintarPoly()">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<img src="https://gartic.com.br/imgs/mural/si/sinistrus/livre_1261907513.png" id="map" usemap="#image-map">

<map name="image-map">
    <area target="" alt="" id="1" class="green" title="" href="#" coords="158,91,159,167,240,167,240,91" shape="poly">
    <area target="" alt="" id="2" class="a" title="" href="#" coords="242,91,243,168,327,166,327,91" shape="poly">
    <area target="" alt="" id="3" class="red" title="" href="#" coords="158,167,158,244,239,246,239,170" shape="poly">
    <area target="" alt="" id="4" class="b" title="" href="#" coords="241,245,241,168,325,168,328,244" shape="poly">
</map>

Script:

@section Scripts
{
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.imagemapster.min.js"></script>
    <script>
        var map = $('#map');
        var options = {
            mapKey: 'class',
            stroke: true,
            strokeWidth: 0.5,
            strokeColor: '000000',
            areas: [{
                key: 'red',
                staticState: true,
                render_select: {
                    fillOpacity: 0.7,
                    fillColor: 'ff0000'
                }
            },
            {
                key: 'green',
                staticState: true,
                render_select: {
                    fillOpacity: 0.7,
                    fillColor: '00ff00'
                }
            },
            {
                key: 'blue',
                staticState: true,
                render_select: {
                    fillOpacity: 0.7,
                    fillColor: '0000ff'
                }
            },
            {
                key: 'orange',
                staticState: true,
                render_select: {
                    fillOpacity: 0.7,
                    fillColor: 'ffa500'
                }
            }
            ],
            isSelectable: false
        };

        map.mapster(options); //change this...

        function pintarPoly() {

            if ($('#myselect').val() == '1') {
                $('#1').attr('class', 'orange');
                $('#2').attr('class', 'blue');
                $('#3').attr('class', 'green');
                $('#4').attr('class', 'red');

                map.mapster('rebind', options);  //change this...
                    
            }
        }
    </script>
}

Result: