0

I am trying to create a tile source url based on checkbox selection. My project was on googlemaps and now I am moving it to openlayers. I couldn't figure out how to add a function. It breaks my code. The below snippet shows my code. I commented the function section bc it is breaking the snippet.

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.style.zIndex = '3';
            weatherUI.title = 'Please Select a Weather Layer';
        var weatherText = document.createElement('div');
        weatherText.style.zIndex = '3';
        weatherText.innerHTML = '<table style="background-color:rgba(0,60,136,.5)" 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.getOverlays().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);
        });  


/*function updateLayers(control) {
    var base_URL = 'http://weather.openportguide.de/tiles/actual/';
    var checked = control.checked;
    var time = $("#weatherlayers  input[type='radio']:checked").val();
    var opacity = $(control).data("opacity");
    var layername = control.id;
    for (_layer in map.getOverlays().getArray()) {
        if (map.getOverlays().getAt(_layer).title == layername + time) {
            if (checked == false) {
                map.removeOverlay(_layer);
                return;
            }
        }
    }
    if (checked == false)
        return;
    var weatheroverlaylayer = new ol.layer.Tile({
            title: layername + time,
            visible: false,
            source: new ol.source.XYZ({
                url: base_URL + layername + "/" + time + "/" + "{z}/{x}/{y}.png",
            })
        }),

};
*/

$('[data-toggle="collapse"]', weatherText).click(function (e) { e.preventDefault(); $('#accordion').toggle() });

        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;
}

input[type="checkbox"] {
    cursor: pointer;
    -webkit-appearance: none;
    background: #ff5f5f;
    border-radius: 1px;
    box-sizing: border-box;
    position: relative;
    box-sizing: content-box;
    width: 15px;
    height: 15px;
    border-width: 0;
    transition: all .3s linear;
    margin-top: 0px !important;
    vertical-align: initial;
}

input[type="checkbox"]:checked {
    background-color: #2ECC71;
}

input[type="checkbox"]:focus {
    outline: 0 none;
    box-shadow: none;
}

label {
    font-weight: 500 !important;

}

td {
    padding-right: 9px !important;
    text-align: left !important;
    color: white !important;
}

.g-navionics-overlay-logo, .jnc-navionics-overlay-logo {
    bottom: 0px !important;
    left: 50% !important;
}

#scale-title {
    font-size: larger;
    font-weight: 700
}

#map {
    width: 100%;
    height: 550px
}

#leftpaneltitle{
    text-align: center
}

#uploadbutton, #deletebutton {
    position: relative;
    margin-top: 25px;
}

#inputfileupload, #inputdeletefile {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    background-color: transparent;
    color: transparent;
}

#weathertilestitle {
    font-size: 18px;
    color: white;
    padding: 5px

}

#weathertilestitle2 {
    font-size: 18px;
    color: white;
    padding: 5px
}

#weathermapdiv {
    top: 110px !important
}

#planmapdiv {
    top: 60px !important;
    left: 0px !important;
    
}

#calculationmapdiv {
    top: 75px !important;
    left: 0px !important;
}

#positionmapdiv {
    top: 60px !important;
    right: 0px !important;
}

#layergroupnames {
    font-size: 14px;
    font-weight: 600;
    color: white
}

#layertime {
    font-size: 14px;
    font-style: italic;
    color: white;
    font-weight: 600
}
<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>

How can I make my updatelayer function work for openlayers?

Thanks in advance...

Mapster
  • 88
  • 1
  • 14

1 Answers1

1

I'm not really sure if you are creating overlays and I don't think there is any getAt() method that you are using here if (map.getOverlays().getAt(_layer).title == layername + time).

If you are creating the overlays try adding an id to them so that you can get the overlay by using getOverlayById method. You can then use addOverlay(overlay) and removeOverlay(overlay) methods like this

function updateLayers(control) {
    //YOUR CODE
    var overlay = map.getOverlayById(id);
    if(CONDITION) {
        map.removeOverlay(overlay);
    }
    //YOUR CODE
}
pavankguduru
  • 315
  • 1
  • 13