provinces1.html

<!doctype html>
<html >
  <head>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> 
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <title>OpenLayers </title>
    <style>
      .map {
        height: 500px;
        width: 100%;
      }
    </style>
  </head>
  <body>  
    <div id="map" ></div>
    <script >
      var map = new ol.Map({
        view: new ol.View({
          projection : 'EPSG:4326' ,
          center: [-7.589843400000063, 33.5731104],
          zoom: 8
        }),
       
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map'
        }); 
        
      var provinces=new ol.layer.Image({ 
		  source:new ol.source.ImageWMS({
			  url :'http://localhost:8080/geoserver/provinces/wms?service=WMS',
              params : {'LAYERS':'provinces:provinces'} ,
              serverType:'geoserver'
      })
      });
      provinces.setOpacity(0.3);
      map.addLayer (provinces);
    </script>
  </body>
</html>