JavaScript – Uncaught Error: Unsupported GeoJSON Type in OpenLayers

ajaxgeojsonjavascriptjqueryopenlayers

I get a valid geojson from the database using a query. Below one is the php script used to read the data.

<?php
include "../includes/init.php"; // including data base connection

$sql = "SELECT *, ST_AsGeoJSON(geom) AS geojson FROM feature_drawn";
// echo $sql;

$query = $pdo->query($sql); // query executing

$geojson = array(
    'type' => 'FeatureCollection',
    'features' => array(),
);
foreach ($query as $row) {
    $feature = array
        (
        'type' => 'Feature',

        'geometry' => json_decode($row['geojson'], true),
        'properties' => array
        (
            'name' => $row['name'],
            'type' => $row['type'],
        ),
    );
    array_push($geojson['features'], $feature);
}

echo json_encode($geojson);

Below shown the javascript code that use to get the geojson object

var load_features = new ol.format.GeoJSON().readFeatures(
  $.ajax({
    type: 'GET',
    url: 'scripts/load_features.php',
    success: function(data, status) {
      console.log(data);
      console.log(JSON.parse(data));
    }
  })
 );

var myview = new ol.View({
  projection: 'EPSG:4326',
  center: [80.98885377363007, 6.830454104603501], // remeber to set latlon in 'lon' first and 'lat' scecond
  zoom: 17
});

// OSM Layer
var baseLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

// Draw vector layer
// 1. Define source
var draw_source = new ol.source.Vector({
  features: load_features
})
// 2. Define layer
var draw_layer = new ol.layer.Vector({
  source: draw_source
})

// Layer Array
var layer_array = [baseLayer, draw_layer]

// Map
var map = new ol.Map({
  target: 'mymap',
  view: myview,
  layers: layer_array,
});

And here is what I get as a geojson object from console.log(data); console.log(JSON.parse(data));

{
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [80.988864502, 6.833924883]
      },
      "properties": {
        "name": "sdfdfsdfd",
        "type": "Trees"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [80.991310677, 6.833206051]
      },
      "properties": {
        "name": "sdfdfsdfddfd",
        "type": "Trees"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [80.989712081, 6.834246748],
          [80.991203389, 6.834182375],
          [80.990473828, 6.833334797],
          [80.989669165, 6.832712525],
          [80.990237793, 6.832100981]
        ]
      },
      "properties": {
        "name": "sdfdfsdfddfd",
        "type": "Roads"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [80.988113484, 6.833699578],
          [80.988971791, 6.83211171]
        ]
      },
      "properties": {
        "name": "sdfdfsdfddfd",
        "type": "Roads"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [80.987641415, 6.827981108],
            [80.9870406, 6.827015513],
            [80.987459025, 6.82657563],
            [80.988907418, 6.826725834],
            [80.987641415, 6.827981108]
          ]
        ]
      },
      "properties": {
        "name": "sdfdfsdfddfd",
        "type": "Buildings"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [80.988816223, 6.833892697]
      },
      "properties": {
        "name": "a",
        "type": "Trees"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [80.989459953, 6.832787626]
      },
      "properties": {
        "name": "ab",
        "type": "Trees"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [80.98782917, 6.830491656]
      },
      "properties": {
        "name": "abc",
        "type": "Trees"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [80.991745195, 6.83312022]
      },
      "properties": {
        "name": "abcd",
        "type": "Trees"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [80.989733538, 6.832605236]
      },
      "properties": {
        "name": "q",
        "type": "Trees"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [80.984444222, 6.830062502]
      },
      "properties": {
        "name": "s",
        "type": "Trees"
      }
    }]
  }

Console screenshot

I verified the geojson using geojsonlint.com and it showed every feature without any problem.

geojsonlint.com screenshot

But the problem is, in my map it does not show up. It shows this error on the console.

Uncaught Error: Unsupported GeoJSON type: undefined
    at i_ (ol.js:2)
    at n.readFeatureFromObject (ol.js:2)
    at n.readFeaturesFromObject (ol.js:2)
    at n.readFeatures (ol.js:2)
    at main.js:255

This is what included in main.js line 255

main.js line 255

Then I tried removing $.ajax call within readFeatures and pasted the whole geojson object insode the readFeatures()

Below shown the change

var load_features = new ol.format.GeoJSON().readFeatures(
   {
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [80.988864502, 6.833924883]
      },
      "properties": {
        "name": "sdfdfsdfd",
        "type": "Trees"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [80.991310677, 6.833206051]
      },
      "properties": {
        "name": "sdfdfsdfddfd",
        "type": "Trees"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [80.989712081, 6.834246748],
          [80.991203389, 6.834182375],
          [80.990473828, 6.833334797],
          [80.989669165, 6.832712525],
          [80.990237793, 6.832100981]
        ]
      },
      "properties": {
        "name": "sdfdfsdfddfd",
        "type": "Roads"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [80.988113484, 6.833699578],
          [80.988971791, 6.83211171]
        ]
      },
      "properties": {
        "name": "sdfdfsdfddfd",
        "type": "Roads"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [80.987641415, 6.827981108],
            [80.9870406, 6.827015513],
            [80.987459025, 6.82657563],
            [80.988907418, 6.826725834],
            [80.987641415, 6.827981108]
          ]
        ]
      },
      "properties": {
        "name": "sdfdfsdfddfd",
        "type": "Buildings"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [80.988816223, 6.833892697]
      },
      "properties": {
        "name": "a",
        "type": "Trees"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [80.989459953, 6.832787626]
      },
      "properties": {
        "name": "ab",
        "type": "Trees"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [80.98782917, 6.830491656]
      },
      "properties": {
        "name": "abc",
        "type": "Trees"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [80.991745195, 6.83312022]
      },
      "properties": {
        "name": "abcd",
        "type": "Trees"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [80.989733538, 6.832605236]
      },
      "properties": {
        "name": "q",
        "type": "Trees"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [80.984444222, 6.830062502]
      },
      "properties": {
        "name": "s",
        "type": "Trees"
      }
    }]
  }
);

Then there is no error shown in the console and All the features are shown on the map.

enter image description here

I was looking for hour for a solution, and still I do not understand what is defined by Unsupported GeoJSON type: undefined. Please help me.

Best Answer

JQuery $.ajax method does not return the data, but promise to fetch the data. This means you have to turn your GeoJSON data fetch inside out:

var load_features; 
$.ajax({
  type: 'GET',
  url: 'scripts/load_features.php',
  dataType: 'json',
  success: function(data, status) {
    load_features = new ol.format.GeoJSON().readFeatures(data);
  }
});
Related Question