async function MapUI()
{

// Create Base Map and Layer using OpenLayers

  var view = new ol.View
  ({
  // change projection to geoserver's projection

    projection: "EPSG:4326",
    center: [-98.5284468774974,52.71391708013823],
          zoom: 7
  });

  // creating a openlayer base map

  var osm_map = await new ol.layer.Tile
  ({
    source: new ol.source.OSM()
  });

  // creating a map layer from geoserver

  var vector_source = await new ol.source.Vector
  ({
        url: MyGeoJsonURL,
        format: new ol.format.GeoJSON()
  });

  var vector_map = await new ol.layer.Vector
  ({
    source: vector_source

  });

  var raster_source = await new ol.source.TileWMS
  ({
    url:'http://localhost:8080/geoserver/Canola/ows?',
    params:{'LAYERS': 'Canola:Riskmap'},
    serverType: 'geoserver',
    crossOrigin:'anonymous'
  });

  var wms_map = await new ol.layer.Tile({

    source:raster_source
  });

  var map = await new ol.Map({

    layers: [osm_map, vector_map,wms_map],
    target: 'map',
    view: view
    });
}

$.post("../lib/php/riskAnalysis.php",
{
     CropDensity:CropDensity,
     DiseaseHistory:DiseaseHistory,
     RegionRisk:RegionRisk,
})
.done(function(databack, status)
{
    $("#status").html("done");
    {
 var raster_source = new ol.source.TileWMS
  ({
    url:'http://localhost:8080/geoserver/Canola/ows?',
    params:{'LAYERS': 'Canola:Riskmap'},
    serverType: 'geoserver',
    crossOrigin:'anonymous'
  });

  var wms_map = new ol.layer.Tile({

    source:raster_source
  });

  map.addOverlay(wms_map); // where map is the original map layer

}


})