examples/layer/create-delete/CreateDeleteLayerChangeOpacity.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CreateDeleteLayerChangeOpacitySample</title>
        <script src="https://resource.mapray.com/mapray-js/v0.9.5/mapray.min.js"></script>
        <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
        <script src="CreateDeleteLayerChangeOpacity.js"></script>
        <style>
            html, body {
                height: 100%;
                margin: 0;
                background-color: #E0E0E0;
            }

            select {
                height: 22px;
                vertical-align: middle;
                font-size: 13px;
                margin-left: 10px;
            }

            p {
                font-size: 13px;
                margin-left:5px;
            }

            input{
                margin-left:10px;
                font-size: 13px;
                width: 90px;
            }

            div#mapray-container {
                display: flex;
                position: relative;
                height: calc(100% - 34px);
            }

            div#CreateLayerBox {
                display: flex;
                background-color: #E0E0E0;
                height: 32px;
                width: 110px;
                float: left;
                border: inset 1px #000000;
                align-items: center;
            }

            div#DeleteLayerBox {
                display: flex;
                background-color: #E0E0E0;
                height: 32px;
                width: 110px;
                float: left;
                border: inset 1px #000000;
                align-items: center;
            }

            div#LayerOpacityBox {
                display: flex;
                background-color: #E0E0E0;
                height: 32px;
                width: 170px;
                float: left;
                border: inset 1px #000000;
                align-items: center;
            }
        </style>
    </head>

    <body onload="CreateLayerControlInstance('mapray-container');">
        <div id="mapray-container"></div>

        <div id="CreateLayerBox">
            <input type="button" value="Create Layer" onclick="CreateLayerButtonClicked()">
        </div>

        <div id="DeleteLayerBox">
            <input type="button" value="Delete Layer" onclick="DeleteLayerButtonClicked()">
        </div>

        <div id="LayerOpacityBox">
            <p>Layer Opacity</p>
            <select name="LayerOpacityPullDown" id="LayerOpacityPullDown" onchange="LayerOpacityValueChanged()">
                <option value=1.0>100%</option>
                <option value=0.75>75%</option>
                <option value=0.5>50%</option>
                <option value=0.25>25%</option>
                <option value=0.001>0%</option>
            </select>
        </div>
    </body>
</html>