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)

The coordinates in that file are not Lon/Lat values. They look like they may be southern hemisphere UTM coordinates for South America. Do you know which zone? — Mike, May 29 '19 at 09:05
I don't know which zone, but is a data from Brazil city of Blumenau in Santa Catarina state. I used a link (https://www.latlong.net) to recover lat and long from this city and got lat:-26.918940 and lon:-49.066059. With lat and lon i used other link (http://www.apsalin.com/utm-zone-finder.aspx) to find UTM zone and got Utm zone: standard zone 22 Central meridian: -51 — tfm, May 29 '19 at 09:34

score 3 · Accepted Answer · answered May 29 '19 at 10:06

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
      })
    });

OpenLayers not loading GeoJSON layer data

1 Answers1