{{-- awal jendela Legenda --}}
<div id="wLegenda" class="easyui-window" title="Legenda" style="width:300px;height:500px;padding:10px;overflow-x: hidden;" data-options="border:'thin',cls:'c6',closed:true,minimizable:false,maximizable:false">
    {{-- legenda Perumahan --}}
    <div class="row">
        <div style="margin: 10px;" class="widget-box widget-color-blue3 collapsed" >
            <div class="widget-header widget-header-small" id="head-lgd-Perumahan" style="background-color: #1F637F">
                <div class="widget-title">
                    Perumahan
                </div>
                <div class="widget-toolbar">
                    <label>
                        <input type="checkbox" class="ace ace-switch ace-switch-3" onclick="lyrPerumahan.setVisible(this.checked);" checked/>
                        <span class="lbl middle"></span>
                    </label>
                    <a href="#" data-action="collapse">
                        <i class="ace-icon fa fa-chevron-down"></i>
                    </a>
                </div>
            </div>
        
            <div id="body-lgd-Perumahan" class="widget-body" >
                <div class="widget-main" style="padding:5px;">
                    <div>
                        <label>Transparant</label>
                        <input class="border-0" type="range" min="0" max="100" value="100"  oninput="lyrPerumahan.setOpacity(this.value/100);"/>
                    </div>
                    <hr />
                    <div>
                        <label>Legenda</label>
                        <p>
                            <img src="http://202.157.187.108:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=si-perkasa-kabmalang:perumahan">
                        </p>
                        
                    </div>
                </div>     
            </div>
        </div>
    </div>{{--Akhir legenda Perumahan --}}


    {{-- legenda Jaringan Irigasi --}}
    <div class="row">
        <div style="margin: 10px;" class="widget-box widget-color-blue3 collapsed" >
            <div class="widget-header widget-header-small" id="head-lgd-Irigasi" style="background-color: #1F637F">
                <div class="widget-title">
                    Jaringan Irigasi
                </div>
                <div class="widget-toolbar">
                    <label>
                        <input type="checkbox" class="ace ace-switch ace-switch-3" onclick="lyrIrigasi.setVisible(this.checked);"/>
                        <span class="lbl middle"></span>
                    </label>
                    <a href="#" data-action="collapse">
                        <i class="ace-icon fa fa-chevron-down"></i>
                    </a>
                </div>
            </div>
        
            <div id="body-lgd-Irigasi" class="widget-body" >
                <div class="widget-main" style="padding:5px;">
                    <div>
                        <label>Transparant</label>
                        <input class="border-0" type="range" min="0" max="100" value="100"  oninput="lyrIrigasi.setOpacity(this.value/100);"/>
                    </div>
                    <hr />
                    <div>
                        <label>Legenda</label>
                        <p>
                            <img src="http://202.157.187.108:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=si-perkasa-kabmalang:jaringan_irigasi">
                        </p>
                        
                    </div>
                </div>     
            </div>
        </div>
    </div>{{--Akhir legenda Jalan --}}

    {{-- legenda Jalan --}}
    <div class="row">
        <div style="margin: 10px;" class="widget-box widget-color-blue3 collapsed" >
            <div class="widget-header widget-header-small" id="head-lgd-Jalan" style="background-color: #1F637F">
                <div class="widget-title">
                    Jalan
                </div>
                <div class="widget-toolbar">
                    <label>
                        <input type="checkbox" class="ace ace-switch ace-switch-3" onclick="lyrJalan.setVisible(this.checked);"/>
                        <span class="lbl middle"></span>
                    </label>
                    <a href="#" data-action="collapse">
                        <i class="ace-icon fa fa-chevron-down"></i>
                    </a>
                </div>
            </div>
        
            <div id="body-lgd-Jalan" class="widget-body" >
                <div class="widget-main" style="padding:5px;">
                    <div>
                        <label>Transparant</label>
                        <input class="border-0" type="range" min="0" max="100" value="100"  oninput="lyrJalan.setOpacity(this.value/100);"/>
                    </div>
                    <hr />
                    <div>
                        <label>Legenda</label>
                        <p>
                            <img src="http://202.157.187.108:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=si-perkasa-kabmalang:jalan_kabupaten">
                        </p>
                        
                    </div>
                </div>     
            </div>
        </div>
    </div>{{--Akhir legenda Jalan --}}

    {{-- legenda zonasi --}}
    <div class="row">
        <div style="margin: 10px;" class="widget-box widget-color-blue3 collapsed" >
            <div class="widget-header widget-header-small" id="head-lgd-zonasi" style="background-color: #1F637F">
                <div class="widget-title">
                    Zonasi
                </div>
                <div class="widget-toolbar">
                    <label>
                        <input type="checkbox" class="ace ace-switch ace-switch-3" onclick="lyrZonasi.setVisible(this.checked);"/>
                        <span class="lbl middle"></span>
                    </label>
                    <a href="#" data-action="collapse">
                        <i class="ace-icon fa fa-chevron-down"></i>
                    </a>
                </div>
            </div>
        
            <div id="body-lgd-Jalan" class="widget-body" >
                <div class="widget-main" style="padding:5px;">
                    <div>
                        <label>Transparant</label>
                        <input class="border-0" type="range" min="0" max="100" value="100"  oninput="lyrZonasi.setOpacity(this.value/100);"/>
                    </div>
                    <hr />
                    <div>
                        <label>Legenda</label>
                        <p>
                            <img src="http://202.157.187.108:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=si-perkasa-kabmalang:zonasi">
                        </p>
                        
                    </div>
                </div>     
            </div>
        </div>
    </div>{{--Akhir legenda Jalan --}}

    {{-- legenda Batas Desa --}}
    <div class="row">
        <div style="margin: 10px;" class="widget-box widget-color-blue3 collapsed" >
            <div class="widget-header widget-header-small" id="head-lgd-BatasDesa" style="background-color: #1F637F">
                <div class="widget-title">
                    Batas Desa
                </div>
                <div class="widget-toolbar">
                    <label>
                        <input type="checkbox" class="ace ace-switch ace-switch-3" onclick="lyrBatasDesa.setVisible(this.checked);"/>
                        <span class="lbl middle"></span>
                    </label>
                    <a href="#" data-action="collapse">
                        <i class="ace-icon fa fa-chevron-down"></i>
                    </a>
                </div>
            </div>
        
            <div id="body-lgd-Jalan" class="widget-body" >
                <div class="widget-main" style="padding:5px;">
                    <div>
                        <label>Transparant</label>
                        <input class="border-0" type="range" min="0" max="100" value="100"  oninput="lyrBatasDesa.setOpacity(this.value/100);"/>
                    </div>
                    <hr />
                    <div>
                        <label>Legenda</label>
                        <p>
                            <img src="http://202.157.187.108:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=si-perkasa-kabmalang:batas_desa">
                        </p>
                        
                    </div>
                </div>     
            </div>
        </div>
    </div>{{--Akhir legenda Jalan --}}
</div>{{--akhir Jendela Legenda--}}