OpenLayers - Slider

Adding slider

by Svinjica

HTML

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
<diV class="sliderCss">
      <div id="sliderOSM">
        <div  class="ui-slider-handle"> </div>
      </div>
    </diV>
  <div id="map" class="map"></div>

  <div class="form-group">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheck1" checked>
      <label class="custom-control-label" for="customCheck1">OSM DEFAULT</label>
    </div>
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheck2">
      <label class="custom-control-label" for="customCheck2">OSM RELIEF</label>
    </div>
  </div>


</div>

CSS

.map {
     height: 400px;
     width: 100%;
   }
   .sliderCss {
    position: relative;
    top: 300px;
    width: 130px;
    /* left: 30px; */
    /* border: 3px solid #73AD21; */
    z-index: 9999;
   }
   
   #sliderOSM{
         border: 1px solid #007bff;
   }

JavaScript

var osmBasic = new ol.layer.Tile({
  source: new ol.source.OSM()
});
var osmRelief = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
  })
});
var map = new ol.Map({
  target: 'map',
  layers: [
    osmBasic
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([37.41, 8.82]),
    zoom: 4
  })
});


$("#sliderOSM").slider({
  min: 0,
  max: 100,
  value: 100,
  slide: function(event, e) {
    osmBasic.setOpacity(e.value / 100);
  },
});

// adding layers
$('#customCheck1').on('change', function() {
  var isChecked = $(this).is(':checked');
  if (isChecked) {
    map.addLayer(osmBasic)
  } else {
    map.removeLayer(osmBasic);
  }
})

$('#customCheck2').on('change', function() {
  var isChecked = $(this).is(':checked');
  if (isChecked) {
    map.addLayer(osmRelief)
  } else {
    map.removeLayer(osmRelief);
  }
})