JSFiddle - React, Tailwind, and code Playground

by ejovrh2

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.3/nouislider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.3/nouislider.css">
<link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Widgets/widgets.css">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Cesium.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

   <div id="cesiumContainer">

    <div id="frame">
       <div id="slajder"></div>
    </div>
    <button id="btncadastral" class="btn btn-primary" aria-pressed="false">cadastral</button>
    
</div>

CSS

#cesiumContainer {
width: 100%;
height: 100%;
}

#frame {
position: absolute;
z-index: 2000;
width: 30%;
height: 15%;
background-color: burlywood;
}

#slajder {
width: 30%;
position: absolute;
margin-left: 120px;
margin-top: 45px;
}
   #btncadastral {
    position: absolute;
    left: 30px;
    z-index: 2000;
    font-size: 1.5em;
    margin-top:200px;
    opacity: 0.8;
    }

JavaScript

Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwZjA2ZTM0ZS01ZTlkLTQwNzUtOGY3YS1lMTBiMDBiMmE0MTEiLCJpZCI6MzcyNCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTUzODYzNjUzM30.CLIJlNRJ6UVej1deoFdC3mLs_o0k9g3UmXK6HJkzRtk";
 var viewer = new Cesium.Viewer("cesiumContainer", {
   terrainProvider: new Cesium.CesiumTerrainProvider({

     url: Cesium.IonResource.fromAssetId(196443),
   }),
 });

 //adding wms
 
 var imageryLayers = viewer.imageryLayers;
 var layer;

function addKatastar(){
    layer = imageryLayers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
url: "https://oss.uredjenazemlja.hr/OssWebServices/inspireService/wms?token=2f4bbd0b518a23431b833c3e9d6b38e5bb1a04af2eca1118f0fbf1cd1d4af04c",
layers : "CP.CadastralParcel",
parameters : {
transparent : true,
format : "image/png",
crs: "EPSG:4326",
}
}));
}

 $(document).on('click', '#btncadastral', function() {
	
   if ($('#btncadastral').hasClass('btn btn-primary')) {
   
   addKatastar();

     $('#btncadastral').removeClass('btn btn-primary').addClass('btn btn-warning');

   } else {

     $('#btncadastral').removeClass('btn btn-warning').addClass('btn btn-primary');
     //TO DO turn off cadastral image
    imageryLayers.remove(layer);
   }
 });

 var globe = viewer.scene.globe;

 var position = Cesium.Cartographic.toCartesian(new Cesium.Cartographic.fromDegrees(16.008476, 45.782004, 170));
 var distance = 200.0;


 globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
   modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(position),
   planes: [
     new Cesium.ClippingPlane(new Cesium.Cartesian3(1.0, 0.0, 0.0), distance),
     new Cesium.ClippingPlane(new Cesium.Cartesian3(-1.0, 0.0, 0.0), distance),
     new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 1.0, 0.0), distance),
     new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, -1.0, 0.0), distance)
   ],
   unionClippingRegions: true,
   edgeWidth: 3,
   edgeColor: Cesium.Color.RED,
   enabled: true
...