0

I think this question will be easy for you But I don't know where is the problem

I am trying to change the style of the rectangle using the select menu but it does not happen

In contrast, when using the buttons, the change is done

code in "codepen" https://codepen.io/A_Abdelwahed/pen/yLYoPqj

<body>
    <button id="style2" style="position: absolute;z-index: 999;" >style2</button><br>
    <button id="style3" style="position: absolute;z-index: 999;" >style3</button><br>
    <button id="style4" style="position: absolute;z-index: 999;" >style4</button><br>
    <select id="selectDataType" style="position: absolute;z-index: 999;" ></select>
    <div id="mapcontainer"></div>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
    <script>

        // create map
        //var myMap = L.map("mapcontainer").setView([30.06263, 31.24967], 15);

        var myMap = L.map('mapcontainer', {
            center: [30.2, 30.2],
            zoom: 7,
            zoomControl:false
        });

        // create Basemap
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(myMap);

        // create a red polygon from an array of LatLng points
        var latlngs = [[30.1, 30.1],[30.1, 30.9],[30.9, 30.9],[30.9, 30.1]];
        var style = {fillColor:'red',color: 'black',weight:2,fillOpacity:0.8}
        var polygon = L.polygon(latlngs, style ).addTo(myMap);


        var style2 = {fillColor:'green',color: 'black',weight:2,fillOpacity:0.8}
        document.getElementById("style2").onclick = function (){
            polygon.setStyle(style2);
        }

        var style3 = {fillColor:'gray',color: 'black',weight:2,fillOpacity:0.8}
        document.getElementById("style3").onclick = function (){
            polygon.setStyle(style3);
        }

        var style4 = {fillColor:'blue',color: 'black',weight:2,fillOpacity:0.8}
        document.getElementById("style4").onclick = function (){
            polygon.setStyle(style4);
        }


        // array list to create select menu
        var dataforchange =[{selectMenuValue:"red",myStyle:"style1"},
                           {selectMenuValue:"green",myStyle:"style2"},
                           {selectMenuValue:"gray",myStyle:"style3"},
                           {selectMenuValue:"blue",myStyle:"style4"}
                          ]

        // code to put color name in select menu
        var selectDataType = document.getElementById('selectDataType');
        for (var i=0; dataforchange.length > i ; i=i+1){
            var option = document.createElement("option");
            option.textContent = dataforchange[i].selectMenuValue;
            selectDataType.appendChild(option);
        };

        //code to do action with change select menu
        selectDataType.addEventListener("change",function(){
        'use strict';
        var z = selectDataType.options[selectDataType.selectedIndex].index;
            var newStyle = dataforchange[z].myStyle;
             alert(newStyle);
            polygon.setStyle(newStyle);
        });
    </script>
</body>
0

With the statement var newStyle = dataforchange[z].myStyle; you are retrieving style name as a string, but for setting style with polygon.setStyle(newStyle); you need style object.

Solution is to create an array with all styles and then retrieve style from there:

style = [style, style2, style3, style4];

selectDataType.addEventListener("change",function(){
  'use strict';
  var z = selectDataType.options[selectDataType.selectedIndex].index;
  polygon.setStyle(style[z]);
});
1
  • thank you very much It worked
    – Ahmed
    Apr 30 '20 at 15:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.