OpenLayers not loading GeoJSON layer data

Question

Please i want to display a layer from GeoJSON file with openlayers 5.3.0 but the result (the vectorLayer variable) show a blank page, only Tile layer is visible. What am i missing?

When using this sample json, I can see the created point in map using the same code.

    {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {
              "name": "Null Island"
          },
           "geometry": {
             "type": "Point",
             "coordinates": [0, 0]
           }
         }
       ]
    }

The code I'm using:

    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    new ol.Map({
      target: 'map',
      layers: [
              new ol.layer.Tile({
              source: new ol.source.OSM()
      }),
      new ol.layer.Vector({
                          source: new ol.source.Vector({
                          format: new ol.format.GeoJSON(),
                          url: 'Geologia.json'
                          })
      })

      ],
      view: new ol.View({
                       center: [0, 0],
                       zoom: 3
      })
    });

I got no error message. The file is upload in a public github repo ( https://github.com/tiagoferneda/files/blob/master/Geologia.json )

Answer 1

That will be zone 22 south. You will need to include proj4 in your page and define the projection, and make that the data projection of the format for your source:

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>

    proj4.defs('EPSG:32722', '+proj=utm +zone=22 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ');
    ol.proj.proj4.register(proj4);

    new ol.Map({
      target: 'map',
      layers: [
              new ol.layer.Tile({
              source: new ol.source.OSM()
      }),
      new ol.layer.Vector({
                          source: new ol.source.Vector({
                          format: new ol.format.GeoJSON({dataProjection: 'EPSG:32722'}),
                          url: 'https://raw.githubusercontent.com/tiagoferneda/files/master/Geologia.json'
                          })
      })

      ],
      view: new ol.View({
                       center: ol.proj.fromLonLat([-49, -27]),
                       zoom: 10
      })
    });