OpenLayers OSM Map

Leaflet is an an open-source JavaScript library for mobile-friendly interactive maps http://leafletjs.com/ Here data is provided by OpenStreetMap

by bulutkartal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="map" class="map"></div>

CSS

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

JavaScript

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...