I am very new to Openlayers! I wanted to create a custom control with accordion table. The problem is when I click on control div it doesn't working as it supposed to be. If i remove the div outside of map it works fine.
I added the below snippet to show the problem.
window.app = {};
var app = window.app;
//Custom Controls
app.WeatherControl = function (opt_options) {
var options = opt_options || {};
//Weather Layers
var weatherUI = document.createElement('div');
weatherUI.style.cursor = 'pointer';
weatherUI.style.textAlign = 'center';
weatherUI.className = 'weatherui ol-unselectable ol-control';
weatherUI.id = 'weatherlayerid';
weatherUI.title = 'Please Select a Weather Layer';
var weatherText = document.createElement('div');
weatherText.innerHTML = '<table style="background-color:white" id="weatherlayers"><tbody><tr data-toggle="collapse" data-target="#accordion" class="clickable"><th id="weathertilestitle"><i class="fa fa-globe" aria-hidden="true"></i> Weather Layers <i class="fa fa-sort" aria-hidden="true"></i></th></tr></tbody><tbody style="text-align: center" id="accordion" class="collapse"><tr><td id="layergroupnames">Common</td><td><input type="checkbox" id="wind_stream" data-opacity="1"><label for="wind_stream">Wind Stream</label></td><td><input type="checkbox" id="wind_barb" data-opacity="1"><label for="wind_barb">Wind Barbs</label></td><td><input type="checkbox" id="gust" data-opacity="0.3"><label for="gust">Wind Gust</label></td><td><input type="checkbox" id="air_temperature" data-opacity="1"> <label for="air_temperature">Air Temp.</label></td><td><input type="checkbox" id="surface_pressure" data-opacity="1"><label for="surface_pressure">Surface Pressure</label></td><td><input type="checkbox" id="precipitation" data-opacity="1"><label for="precipitation">Precipitation</label></td><td><input type="checkbox" id="precipitation_shaded" data-opacity="0.3"><label for="precipitation_shaded">Precipitation(S)</label></td><td><input type="checkbox" id="significant_wave_height" data-opacity="1"><label for="significant_wave_height">Wave Height</label></td></tr><tr><td id="layergroupnames">Marine</td><td><input type="checkbox" id="primary_wave_height_direction" data-opacity="1"><label for="primary_wave_height_direction">Wave Direction</label></td><td><input type="checkbox" id="primary_wave_period" data-opacity="0.3"><label for="primary_wave_period"></label>Wave Period</td><td><input type="checkbox" id="swell_height_direction" data-opacity="1"><label for="swell_height_direction">Swell Direction</label></td><td><input type="checkbox" id="swell_period" data-opacity="0.3"><label for="swell_period"></label>Swell Period</td><td><input type="checkbox" id="sea_surface_current" data-opacity="0.3"><label for="sea_surface_current"></label>Currents</td><td><input type="checkbox" id="sea_surface_temperature" data-opacity="1"><label for="sea_surface_temperature"></label>Sea Temp.</td><td><input type="checkbox" id="sea_ice_coverage" data-opacity="0.3"><label for="sea_ice_coverage"></label>Ice Coverage</td><td><input type="checkbox" id="sea_ice_thickness" data-opacity="1"><label for="sea_ice_thickness"></label>Ice Thickness</td></tr><tr><td id="layertime">Time</td><td><input type="radio" id="h0" class="timecheckbox" name="time" value="0h" onclick="TimeButtonClicked(this)" checked=""><label id="0h_label" for="0h">Current</label></td><td><input type="radio" id="h6" class="timecheckbox" name="time" value="6h" onclick="TimeButtonClicked(this)"><label id="6h_label" for="6h">6h</label></td><td><input type="radio" id="h12" class="timecheckbox" name="time" value="12h" onclick="TimeButtonClicked(this)"><label id="12h_label" for="12h">12h</label></td><td><input type="radio" id="h24" class="timecheckbox" name="time" value="24h" onclick="TimeButtonClicked(this)"> <label id="24h_label" for="24h">24h</label></td><td><input type="radio" id="h36" class="timecheckbox" name="time" value="36h" onclick="TimeButtonClicked(this)"><label id="36h_label" for="36h">36h</label></td><td><input type="radio" id="h48" class="timecheckbox" name="time" value="48h" onclick="TimeButtonClicked(this)"><label id="48h_label" for="48h">48h</label></td><td><input type="radio" id="h60" class="timecheckbox" name="time" value="60h" onclick="TimeButtonClicked(this)"><label id="60h_label" for="60h">60h</label></td><td><input type="radio" id="h72" class="timecheckbox" name="time" value="72h" onclick="TimeButtonClicked(this)"><label id="72h_label" for="72h">72h</label></td></tr></tbody></table><div style="display:none" id="graph-windbeaufort"> <div id="scale-title">Beaufort Scale</div><div class="graph-section graph-level1"> <div class="graph-bar"></div><div class="graph-caption">0</div></div><div class="graph-section graph-level2"> <div class="graph-bar"></div><div class="graph-caption">1</div></div><div class="graph-section graph-level3"> <div class="graph-bar"></div><div class="graph-caption">2</div></div><div class="graph-section graph-level4"> <div class="graph-bar"></div><div class="graph-caption">3</div></div><div class="graph-section graph-level5"> <div class="graph-bar"></div><div class="graph-caption">4</div></div><div class="graph-section graph-level6"> <div class="graph-bar"></div><div class="graph-caption">5</div></div><div class="graph-section graph-level7"> <div class="graph-bar"></div><div class="graph-caption">6</div></div><div class="graph-section graph-level8"> <div class="graph-bar"></div><div class="graph-caption">7</div></div><div class="graph-section graph-level9"> <div class="graph-bar"></div><div class="graph-caption">8</div></div><div class="graph-section graph-level10"> <div class="graph-bar"></div><div class="graph-caption">9</div></div><div class="graph-section graph-level11"> <div class="graph-bar"></div><div class="graph-caption">10</div></div><div class="graph-section graph-level12"> <div class="graph-bar"></div><div class="graph-caption">11</div></div><div class="graph-section graph-level13"> <div class="graph-bar"></div><div class="graph-caption">12</div></div></div><div style="display:none" id="graph-windgust"> <div id="scale-title">Gust - Beaufort Scale</div><div class="graph-section graph-level1"> <div class="graph-bar"></div><div class="graph-caption">0</div></div><div class="graph-section graph-level2"> <div class="graph-bar"></div><div class="graph-caption">1</div></div><div class="graph-section graph-level3"> <div class="graph-bar"></div><div class="graph-caption">2</div></div><div class="graph-section graph-level4"> <div class="graph-bar"></div><div class="graph-caption">3</div></div><div class="graph-section graph-level5"> <div class="graph-bar"></div><div class="graph-caption">4</div></div><div class="graph-section graph-level6"> <div class="graph-bar"></div><div class="graph-caption">5</div></div><div class="graph-section graph-level7"> <div class="graph-bar"></div><div class="graph-caption">6</div></div><div class="graph-section graph-level8"> <div class="graph-bar"></div><div class="graph-caption">7</div></div><div class="graph-section graph-level9"> <div class="graph-bar"></div><div class="graph-caption">8</div></div><div class="graph-section graph-level10"> <div class="graph-bar"></div><div class="graph-caption">9</div></div><div class="graph-section graph-level11"> <div class="graph-bar"></div><div class="graph-caption">10</div></div><div class="graph-section graph-level12"> <div class="graph-bar"></div><div class="graph-caption">11</div></div><div class="graph-section graph-level13"> <div class="graph-bar"></div><div class="graph-caption">12</div></div><div class="graph-section graph-level14"> <div class="graph-bar"></div><div class="graph-caption">13</div></div><div class="graph-section graph-level15"> <div class="graph-bar"></div><div class="graph-caption">14</div></div><div class="graph-section graph-level16"> <div class="graph-bar"></div><div class="graph-caption">15</div></div><div class="graph-section graph-level17"> <div class="graph-bar"></div><div class="graph-caption">16</div></div><div class="graph-section graph-level18"> <div class="graph-bar"></div><div class="graph-caption">17</div></div></div><div style="display:none" id="graph-precipitation"> <div id="scale-title">Precipitation Scale - mm/h</div><div class="graph-section graph-level1"> <div class="graph-bar"></div><div class="graph-caption">0</div></div><div class="graph-section graph-level2"> <div class="graph-bar"></div><div class="graph-caption">0.1</div></div><div class="graph-section graph-level3"> <div class="graph-bar"></div><div class="graph-caption">0.2</div></div><div class="graph-section graph-level4"> <div class="graph-bar"></div><div class="graph-caption">0.4</div></div><div class="graph-section graph-level5"> <div class="graph-bar"></div><div class="graph-caption">0.7</div></div><div class="graph-section graph-level6"> <div class="graph-bar"></div><div class="graph-caption">1</div></div><div class="graph-section graph-level7"> <div class="graph-bar"></div><div class="graph-caption">2</div></div><div class="graph-section graph-level8"> <div class="graph-bar"></div><div class="graph-caption">4</div></div><div class="graph-section graph-level9"> <div class="graph-bar"></div><div class="graph-caption">7</div></div><div class="graph-section graph-level10"> <div class="graph-bar"></div><div class="graph-caption">10</div></div><div class="graph-section graph-level11"> <div class="graph-bar"></div><div class="graph-caption">20</div></div><div class="graph-section graph-level12"> <div class="graph-bar"></div><div class="graph-caption">40</div></div><div class="graph-section graph-level13"> <div class="graph-bar"></div><div class="graph-caption">70</div></div></div><div style="display:none" id="graph-waveheight"> <div id="scale-title">Wave & Swell Height(m)</div><div class="graph-section graph-level1"> <div class="graph-bar"></div><div class="graph-caption">0</div></div><div class="graph-section graph-level2"> <div class="graph-bar"></div><div class="graph-caption">0.5</div></div><div class="graph-section graph-level3"> <div class="graph-bar"></div><div class="graph-caption">1</div></div><div class="graph-section graph-level4"> <div class="graph-bar"></div><div class="graph-caption">1.5</div></div><div class="graph-section graph-level5"> <div class="graph-bar"></div><div class="graph-caption">2</div></div><div class="graph-section graph-level6"> <div class="graph-bar"></div><div class="graph-caption">3</div></div><div class="graph-section graph-level7"> <div class="graph-bar"></div><div class="graph-caption">4</div></div><div class="graph-section graph-level8"> <div class="graph-bar"></div><div class="graph-caption">5</div></div><div class="graph-section graph-level9"> <div class="graph-bar"></div><div class="graph-caption">6</div></div><div class="graph-section graph-level10"> <div class="graph-bar"></div><div class="graph-caption">7</div></div><div class="graph-section graph-level11"> <div class="graph-bar"></div><div class="graph-caption">8</div></div><div class="graph-section graph-level12"> <div class="graph-bar"></div><div class="graph-caption">9</div></div><div class="graph-section graph-level13"> <div class="graph-bar"></div><div class="graph-caption">10</div></div><div class="graph-section graph-level14"> <div class="graph-bar"></div><div class="graph-caption">11</div></div><div class="graph-section graph-level15"> <div class="graph-bar"></div><div class="graph-caption">12</div></div><div class="graph-section graph-level16"> <div class="graph-bar"></div><div class="graph-caption">13</div></div><div class="graph-section graph-level17"> <div class="graph-bar"></div><div class="graph-caption">14</div></div><div class="graph-section graph-level18"> <div class="graph-bar"></div><div class="graph-caption">15</div></div><div class="graph-section graph-level19"> <div class="graph-bar"></div><div class="graph-caption">16</div></div><div class="graph-section graph-level20"> <div class="graph-bar"></div><div class="graph-caption">17</div></div><div class="graph-section graph-level21"> <div class="graph-bar"></div><div class="graph-caption">18</div></div><div class="graph-section graph-level22"> <div class="graph-bar"></div><div class="graph-caption">19</div></div><div class="graph-section graph-level23"> <div class="graph-bar"></div><div class="graph-caption">20</div></div></div><div style="display:none" id="graph-waveperiod"> <div id="scale-title">Wave & Swell Period(s)</div><div class="graph-section graph-level1"> <div class="graph-bar"></div><div class="graph-caption">0</div></div><div class="graph-section graph-level2"> <div class="graph-bar"></div><div class="graph-caption">2</div></div><div class="graph-section graph-level3"> <div class="graph-bar"></div><div class="graph-caption">4</div></div><div class="graph-section graph-level4"> <div class="graph-bar"></div><div class="graph-caption">6</div></div><div class="graph-section graph-level5"> <div class="graph-bar"></div><div class="graph-caption">8</div></div><div class="graph-section graph-level6"> <div class="graph-bar"></div><div class="graph-caption">10</div></div><div class="graph-section graph-level7"> <div class="graph-bar"></div><div class="graph-caption">12</div></div><div class="graph-section graph-level8"> <div class="graph-bar"></div><div class="graph-caption">14</div></div><div class="graph-section graph-level9"> <div class="graph-bar"></div><div class="graph-caption">16</div></div><div class="graph-section graph-level10"> <div class="graph-bar"></div><div class="graph-caption">18</div></div><div class="graph-section graph-level11"> <div class="graph-bar"></div><div class="graph-caption">20</div></div><div class="graph-section graph-level12"> <div class="graph-bar"></div><div class="graph-caption">22</div></div><div class="graph-section graph-level13"> <div class="graph-bar"></div><div class="graph-caption">24</div></div><div class="graph-section graph-level14"> <div class="graph-bar"></div><div class="graph-caption">26</div></div><div class="graph-section graph-level15"> <div class="graph-bar"></div><div class="graph-caption">28</div></div><div class="graph-section graph-level16"> <div class="graph-bar"></div><div class="graph-caption">30</div></div></div><div style="display:none" id="graph-currents"> <div id="scale-title">Currents(kn)</div><div class="graph-section graph-level1"> <div class="graph-bar"></div><div class="graph-caption">0</div></div><div class="graph-section graph-level2"> <div class="graph-bar"></div><div class="graph-caption">0.2</div></div><div class="graph-section graph-level3"> <div class="graph-bar"></div><div class="graph-caption">0.5</div></div><div class="graph-section graph-level4"> <div class="graph-bar"></div><div class="graph-caption">1</div></div><div class="graph-section graph-level5"> <div class="graph-bar"></div><div class="graph-caption">1.5</div></div><div class="graph-section graph-level6"> <div class="graph-bar"></div><div class="graph-caption">2</div></div><div class="graph-section graph-level7"> <div class="graph-bar"></div><div class="graph-caption">2.5</div></div><div class="graph-section graph-level8"> <div class="graph-bar"></div><div class="graph-caption">3</div></div><div class="graph-section graph-level9"> <div class="graph-bar"></div><div class="graph-caption">4</div></div><div class="graph-section graph-level10"> <div class="graph-bar"></div><div class="graph-caption">5</div></div><div class="graph-section graph-level11"> <div class="graph-bar"></div><div class="graph-caption">6</div></div><div class="graph-section graph-level12"> <div class="graph-bar"></div><div class="graph-caption">7</div></div><div class="graph-section graph-level13"> <div class="graph-bar"></div><div class="graph-caption">8</div></div></div><div style="display:none" id="graph-icecover"> <div id="scale-title">Ice Coverage(%)</div><div class="graph-section graph-level1"> <div class="graph-bar"></div><div class="graph-caption">0</div></div><div class="graph-section graph-level2"> <div class="graph-bar"></div><div class="graph-caption">1</div></div><div class="graph-section graph-level3"> <div class="graph-bar"></div><div class="graph-caption">10</div></div><div class="graph-section graph-level4"> <div class="graph-bar"></div><div class="graph-caption">20</div></div><div class="graph-section graph-level5"> <div class="graph-bar"></div><div class="graph-caption">30</div></div><div class="graph-section graph-level6"> <div class="graph-bar"></div><div class="graph-caption">40</div></div><div class="graph-section graph-level7"> <div class="graph-bar"></div><div class="graph-caption">50</div></div><div class="graph-section graph-level8"> <div class="graph-bar"></div><div class="graph-caption">60</div></div><div class="graph-section graph-level9"> <div class="graph-bar"></div><div class="graph-caption">70</div></div><div class="graph-section graph-level10"> <div class="graph-bar"></div><div class="graph-caption">80</div></div><div class="graph-section graph-level11"> <div class="graph-bar"></div><div class="graph-caption">90</div></div></div>';
weatherUI.appendChild(weatherText);
$("div").on("click", 'input[id="wind_stream"]', function () {
$("#graph-windbeaufort").toggle(this.checked);
});
$("div").on("click", 'input[id="wind_barb"]', function () {
$("#graph-windbeaufort").toggle(this.checked);
});
$("div").on("click", 'input[id="gust"]', function () {
$("#graph-windgust").toggle(this.checked);
});
$("div").on("click", 'input[id="precipitation_shaded"]', function () {
$("#graph-precipitation").toggle(this.checked);
});
$("div").on("click", 'input[id="primary_wave_height_direction"]', function () {
$("#graph-waveheight").toggle(this.checked);
});
$("div").on("click", 'input[id="swell_height_direction"]', function () {
$("#graph-waveheight").toggle(this.checked);
});
$("div").on("click", 'input[id="primary_wave_period"]', function () {
$("#graph-waveperiod").toggle(this.checked);
});
$("div").on("click", 'input[id="swell_period"]', function () {
$("#graph-waveperiod").toggle(this.checked);
});
$("div").on("click", 'input[id="sea_surface_current"]', function () {
$("#graph-currents").toggle(this.checked);
});
$("div").on("click", 'input[id="sea_ice_coverage"]', function () {
$("#graph-icecover").toggle(this.checked);
});
$("div").on("click", "#weatherlayers input:radio", function (e) {
map.overlayMapTypes.clear();
var ly = $("#weatherlayers input[type='checkbox']:checked");
$.each(ly, function (i, val) {
updateLayers(val);
})
});
$("div").on("click", "#weatherlayers input:checkbox", function (e) {
updateLayers(this);
});
ol.control.Control.call(this, {
element: weatherUI,
target: options.target
});
};
ol.inherits(app.WeatherControl, ol.control.Control);
var oSM = new ol.layer.Tile({
source: new ol.source.OSM({
crossOrigin: null,
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
});
var layers = [
oSM
];
var map = new ol.Map({
controls: ol.control.defaults().extend([
new app.WeatherControl()
]),
layers: layers,
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([-5.3525700, 36.1447400]),
zoom: 6
})
});.map {
height: 400px;
width: 100%;
}
.ol-zoom {
left: unset !important;
right: .5em !important;
top: unset !important;
bottom: .5em !important;
}
.ol-attribution {
left: .5em!important;
right: unset!important;
}
/*Custom Control*/
.weatherui {
top: 25px!important;
left: .5em;
}
.ol-touch .weatherui {
top: 30px!important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<link href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet"/>
<div id="map" class="map"></div>I also tried the similar approach on google maps and it works fine. Idk if there is something to do with events on openlayers or what but kinda interesting that not working with bootstrap.
Thanks in advance...
I solved the problem with adding following line;
$('[data-toggle="collapse"]', weatherText).click(function (e) { e.preventDefault(); $('#accordion').toggle() });
It requires a click event which is interesting...