examples/entity/gltf/altitude/ChangeAltitudeMode.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ChangeAltitudeModeSample</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="ChangeAltitudeMode.js" charset="utf-8"></script>
        <style>
            html, body {
                height: 100%;
                margin: 0;
                background-color:#E0E0E0;
            }

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

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

            input{
                margin-left:10px;
            }

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

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

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

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

        <div id="AltitudeModeBox">
                <p>Altitude Mode</p>
                <select name="AltitudeModePullDown" id="AltitudeModePullDown" onchange="AltitudeModeValueChanged()">
                    <option value="ABSOLUTE">ABSOLUTE</option>
                    <option value="RELATIVE">RELATIVE</option>
                    <option value="CLAMP">CLAMP</option>
                </select>
        </div>

        <div id="HeightBox">
                <p>Height</p>
                <select name="HeightPullDown" id="HeightPullDown" onchange="HeightValueChanged()">
                    <option value=0>0</option>
                    <option value=40 selected>40</option>
                    <option value=100>100</option>
                </select>
        </div>
    </body>
</html>