OpenLayer 6.3.1 problem displaying GeoJson data on the map

Question

I have problem with openlayer geojson. I'm trying to display data in the map, but nothing I try works.

What do I need to change to display the data on the map?

code:

 var map = new Map({
  controls: defaultControls().extend([
    new FullScreen()
  ]),
  interactions: defaultInteractions().extend([
    new DragRotateAndZoom()
  ]),
  target: 'map',
  view: new View({
    center: [32.2128100772116, -7.92209407500733],
    zoom: 5
  }),
});

var vectorSource = new VectorSource({
  features: (new GeoJSON()).readFeatures(this.geojsonObject)
});

var vectorLayer = new VectorLayer({
  source: vectorSource,
  visible: true
});
this.map.addLayer(vectorLayer);

geoJson data:

geojsonObject = {
'type': 'Feature',
'geometry': {
  'type': 'MultiPolygon',
  'coordinates': [

    [[
      [
        33.3984375,
        37.16031654673677
      ],
      [
        -11.25,
        27.68352808378776
      ],
      [
        14.765625,
        -10.833305983642491
      ],
      [
        48.515625,
        5.61598581915534
      ],
      [
        58.00781249999999,
        28.92163128242129
      ],
      [
        48.515625,
        37.43997405227057
      ],
      [
        33.3984375,
        37.16031654673677
      ]
    ]]
  ]
}
};

Answer 1

As Mike indicated in his comment, you need to add projection: 'EPSG:4326', in the view options.

  var map = new Map({
    controls: defaultControls().extend([
      new FullScreen()
    ]),
    interactions: defaultInteractions().extend([
      new DragRotateAndZoom()
    ]),
    target: 'map',
    view: new View({
      projection: 'EPSG:4326',
      center: [32.2128100772116, -7.92209407500733],
      zoom: 2
    }),
  });

proof of concept fiddle (using the legacy build: ol.js)

code snippet (again using the legacy build: ol.js):

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.map {
  height: 70%;
  width: 100%;
}

<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.3.1/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v6.3.1/css/ol.css" type="text/css">
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
  geojsonObject = {
    'type': 'Feature',
    'geometry': {
      'type': 'MultiPolygon',
      'coordinates': [
        [ [ [ 33.3984375,37.16031654673677],[-11.25,27.68352808378776],[ 14.765625, -10.833305983642491],[ 48.515625,5.61598581915534],[ 58.00781249999999,28.92163128242129],[ 48.515625,37.43997405227057],[33.3984375,37.16031654673677] ] ]
      ]
    }
  };
  var map = new ol.Map({
    controls: ol.control.defaults().extend([
      new ol.control.FullScreen()
    ]),
    interactions: ol.interaction.defaults().extend([
      new ol.interaction.DragRotateAndZoom()
    ]),
    target: 'map',
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [32.2128100772116, -7.92209407500733],
      zoom: 2
    }),
  });

  var vectorSource = new ol.source.Vector({ // VectorSource({
    features: (new ol.format.GeoJSON()).readFeatures(this.geojsonObject)
  });

  var vectorLayer = new ol.layer.Vector({ //VectorLayer({
    source: vectorSource,
    visible: true
  });
  map.addLayer(vectorLayer);
</script>