JSFiddle - React, Tailwind, and code Playground

by gbsandeep

HTML

<html> 
  <head>    
    <title>Dsign</title> 
    
    <script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
    
    
  </head> 
  <body>
    <div id="parent">
    <div id="heading"></div>
    <div id="panel" class="simple-panel">
        <div id="map" class="simple-map">
        <input id="btn-full-screen" style="z-index:9999;" title="Full Screen" class="btn-full-screen" type="image" src="img/fullscreen-en.png" alt="settings"/>
        
        </div>
        <div id="messages">
            <div id="alerts"></div>
            <div id="alerts-details"></div>
        </div>
    </div>    
</div>
  </body> 
</html>

CSS

html,body 
{
    width: 100%;
    height:100%;
    margin:0px;
}
#parent
{
    width: 100%;
    height: 100%;
    margin: 0px;
    background-image: url('img/settings.png');
    background-repeat: no-repeat;
}
#heading
{
    position: relative;
    height: 15%;
    width: inherit;
    background-color: #D0EAD2;
}
.simple-panel
{
    position:relative;
    background-color: #D0DFC6;
    height:85%;
    width:inherit;
}
.full-panel
{
    position:relative;
    background-color: #D0DFC6;
    height:inherit;
    width:inherit;
}
.simple-map
{
    border-style: solid;
    border-width: 1px;
    position: relative;
    left: 1%;
    height: 80%;
    width: 60%;
    background-color: #CCCCFF;
}
.btn-full-screen
{
    border-style: solid;
    border-width: 1px;
    position: absolute;
    bottom:0%;
    right:0%;
    height: 3%;
    width: 3%;
    background-color:Gray;
}
.btn-partial-screen
{
    border-style: solid;
    border-width: 1px;
    position: absolute;
    bottom:0%;
    right:0%;
    height: 3%;
    width: 3%;
    background-color:Gray;
}
.full-map
{
    height: 100%;
    width: 100%;
    background-color: #CCCCFF;
}
#messages
{
    border-style: solid;
    border-width: 1px;
    position: absolute;
    top:0%;
    right:0%;
    margin:0% 1% 0% 0%;    
    height: 80%;
    width: 37%;
    background-color: #FFD8B0;
}
#alerts
{
    top:0%;   
    position:absolute;
    height: 50%;
    width: 100%;
    background-color: #DBDACA;
}
#alerts-details
{    
    top:50%;
    position:absolute;
    height: 50%;
    width: 100%;
    background-color: #CCE6FF;
}

JavaScript

$(document).ready(function () {
            init();
            $("#btn-full-screen").click(function () {

                if ($("#btn-full-screen").hasClass("btn-full-screen")) {
                    $("#panel").removeClass("simple-panel");
                    $("#panel").addClass("full-panel");
                    $("#map").removeClass("simple-map");
                    $("#map").addClass("full-map");
                    $("#btn-full-screen").removeClass("btn-full-screen");
                    $("#btn-full-screen").addClass("btn-partial-screen");

                    $("#btn-full-screen").attr('title', 'Back To Normal');

                    $("#heading").hide();
                    $("#messages").hide();
                }
                else {
                    $("#panel").removeClass("full-panel");
                    $("#panel").addClass("simple-panel");
                    $("#map").removeClass("full-map");
                    $("#map").addClass("simple-map");
                    $("#btn-full-screen").removeClass("btn-partial-screen");
                    $("#btn-full-screen").addClass("btn-full-screen");
                    $("#btn-full-screen").attr('title', 'Full Screen');

                    $("#heading").show();
                    $("#messages").show();
                }
            });
        });

function init() {

            var Geographic = new OpenLayers.Projection("EPSG:4326");
            var Mercator = new OpenLayers.Projection("EPSG:900913");

            var map = new OpenLayers.Map({
                div: "map",
                center: new OpenLayers.LonLat(0, 0),
                minResolution: "auto",
                minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
                maxResolution: "auto",
                maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
                projection: Mercator,
                displayProjection: Geographic
            });

            var baselayer =new OpenLayers.Layer.OSM();           
...