jQuery addClass example

Change class name on click in jQuery

by guna_sekaran

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v5.2.0/css/ol.css" type="text/css">
<div id="map" class="map item">
  
</div>
<button class="add-btn">
  Add UCon
  </button>

CSS

#marker {
  width: 20px;
  height: 20px;
  border: 1px solid #088;
  border-radius: 10px;
  background-color: #0FF;
  opacity: 0.5;
  cursor: move;
}

.item.active .item-icon {
  border-width: 2px;
  border-style: solid;
  cursor: pointer;
}

.item .item-icon span {
  background-repeat: no-repeat;
  background-position: center center;
  -moz-background-size: 36px 36px;
  -o-background-size: 36px 36px;
  -webkit-background-size: 36px 36px;
  background-size: 36px 36px;
}

.item-icon span {
  width: 36px;
  height: 36px;
  display: block;
}

* {
  box-sizing: border-box;
}

.item .item-icon {
  position: relative;
  top: 5px;
  left: 5px;
  padding: 5px;
  width: 50px;
  height: 50px;
  border-width: 2px;
  border-style: solid;
  animation: fade_in 0.5s ease-in-out 0s 1;
  -webkit-animation: fade_in 0.5s ease-in-out 0s 1;
}

.item .item-icon {
  border-color: #ffffff;
  border-width: 2px;
  border-radius: 30px;
  background-color: rgba(96, 96, 96, 0.95);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}


.item-icon.active_cooled_beam span {
  background:...

JavaScript

var source = new ol.source.Vector({
    wrapX: false
});


var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        new ol.layer.Vector({
            source: source
        })
    ],
    target: 'map',
    view: new ol.View({
        center: [-11000000, 4600000],
        zoom: 4
    })
});


/*
    Add UCon
*/
var uconSvgSrc =...