It seems that vector layers(like GeoJSON) from MASDAP cannot be used by web applications. See the example below. You should be able to run it in your browser.
The GeoJSON from MASDAP cannot be displayed in an OpenLayers map, because the browse complains: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.masdap.mw/geoserver/ows?srsName=EPSG%3A20936&outp…=GetFeature&typename=geonode%3AOpen_Defication&version=1.0.0. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). The exact same operation works with other OWS-Servers, which can be seen in the code below as well (commented out)
One solution might be to add the CORS header to the web server or GeoServer.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link
rel="stylesheet"
href="https://openlayers.org/en/v4.6.5/css/ol.css"
type="text/css"
/>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
// MASDAP
// url: "http://www.masdap.mw/geoserver/geonode/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=geonode%3AAfrica_Cities&LAYERS=geonode%3AAfrica_Cities&exceptions=application%2Fvnd.ogc.se_inimage&INFO_FORMAT=application/json&FEATURE_COUNT=50&X=50&Y=50&SRS=EPSG%3A4267&STYLES=&WIDTH=101&HEIGHT=101&BBOX=-14.677734375%2C-2.724609374999986%2C3.076171875%2C15.029296875000014",
// MASDAP
url: "http://www.masdap.mw/geoserver/ows?srsName=EPSG%3A20936&outputFormat=json&service=WFS&srs=EPSG%3A20936&request=GetFeature&typename=geonode%3AOpen_Defication&version=1.0.0",
// MALAWI ATLAS
// url: "https://gis-malawi.com/geoserver/malawi_atlas/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=malawi_atlas%3Ahealth_facilities_moh_secondary_health_facilities&maxFeatures=50&outputFormat=application%2Fjson",
// AHOCEVAR
// url: "https://ahocevar.com/geoserver/wfs?SERVICE=WFS&REQUEST=GetFeature&VERSION=2.0.0&TYPENAMES=opengeo:countries&TYPENAME=opengeo:countries&STARTINDEX=0&outputFormat=application%2Fjson",
format: new ol.format.GeoJSON()
})
});
var map = new ol.Map({
controls: ol.control.defaults(),
layers: [
new ol.layer.Tile({
title: "OpenStreetMap Basemap",
source: new ol.source.OSM()
}),
vectorLayer
],
target: "map",
view: new ol.View({
center: [3801122, -1552117],
zoom: 4
})
});
</script>
</body>
</html>
It seems that vector layers(like GeoJSON) from MASDAP cannot be used by web applications. See the example below. You should be able to run it in your browser.
The GeoJSON from MASDAP cannot be displayed in an OpenLayers map, because the browse complains:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.masdap.mw/geoserver/ows?srsName=EPSG%3A20936&outp…=GetFeature&typename=geonode%3AOpen_Defication&version=1.0.0. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).The exact same operation works with other OWS-Servers, which can be seen in the code below as well (commented out)One solution might be to add the CORS header to the web server or GeoServer.