Error loading geoJSON into map using OpenLayers v4.2.0

Question

I could not get my geoJSON loaded into the map. I used an example code from the web and replaced the coordinates from my geoJSON file. The geometries from the OpenLayers example are shown, but I cannot figure out why the polygon from my geoJSON file is not displayed.

The code is:

      var image = new ol.style.Circle({ 
        radius: 5,
        fill: null,
        stroke: new ol.style.Stroke({color: 'red', width: 1}) 
      });

      var styles = {
        'Point': new ol.style.Style({ 
          image: image
        }),
        'LineString': new ol.style.Style({
          stroke: new ol.style.Stroke({ 
            color: 'green',
            width: 1
          })
        }),
        'MultiLineString': new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'green',
            width: 1
          })
        }),
        'MultiPoint': new ol.style.Style({
          image: image
        }),
        'MultiPolygon': new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'yellow',
            width: 1
          }),
          fill: new ol.style.Fill({ 
            color: 'rgba(255, 255, 0, 0.1)'
          })
        }),
        'Polygon': new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'blue',
            lineDash: [4],
            width: 3
          }),
          fill: new ol.style.Fill({
            color: 'rgba(0, 0, 255, 0.1)'
          })
        }),
        'GeometryCollection': new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'magenta',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: 'magenta'
          }),
          image: new ol.style.Circle({
            radius: 10,
            fill: null,
            stroke: new ol.style.Stroke({
              color: 'magenta'
            })
          })
        }),
        'Circle': new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'red',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: 'rgba(255,0,0,0.2)'
          })
        })
      }; 

      var styleFunction = function(feature) {
        return styles[feature.getGeometry().getType()];
      };

      var geojsonObject = {
        'type': 'FeatureCollection',
        'crs': {
          'type': 'name',
          'properties': {
            'name': 'EPSG:3857'
          }
        },
        'features': [{
          'type': 'Feature',
          'geometry': { 'type': 'Polygon', 'coordinates': [ [ [ 120.46191, 16.497298 ], [ 120.503982, 16.549339 ], [ 120.525042, 16.575388 ], [ 120.550538, 16.606925 ], [ 120.562153, 16.621292 ], [ 120.585139, 16.651038 ], [ 120.587269, 16.653699 ], [ 120.589034, 16.655594 ], [ 120.591472, 16.658031 ], [ 120.593249, 16.660004 ], [ 120.597285, 16.664588 ], [ 120.599807, 16.666412 ], [ 120.601536, 16.668825 ], [ 120.603051, 16.673555 ], [ 120.603125, 16.677011 ], [ 120.603054, 16.679914 ], [ 120.603488, 16.684371 ], [ 120.604319, 16.688688 ], [ 120.606698, 16.695005 ], [ 120.608666, 16.699797 ], [ 120.610196, 16.703945 ], [ 120.612181, 16.713753 ], [ 120.614022, 16.721454 ], [ 120.61669, 16.728703 ], [ 120.617988, 16.731671 ], [ 120.619106, 16.736471 ], [ 120.621451, 16.744274 ], [ 120.623038, 16.750593 ], [ 120.620508, 16.75522 ], [ 120.621088, 16.757666 ], [ 120.620632, 16.761174 ], [ 120.620217, 16.763616 ], [ 120.620018, 16.7674 ], [ 120.619892, 16.77146 ], [ 120.619692, 16.775314 ], [ 120.61944, 16.783193 ], [ 120.619505, 16.785396 ], [ 120.619647, 16.786945 ], [ 120.619595, 16.790592 ], [ 120.619652, 16.794963 ], [ 120.619417, 16.798335 ], [ 120.619373, 16.800365 ], [ 120.619467, 16.804529 ], [ 120.619676, 16.807524 ], [ 120.620512, 16.810315 ], [ 120.621937, 16.813075 ], [ 120.622299, 16.814625 ], [ 120.622841, 16.817278 ], [ 120.623314, 16.818794 ], [ 120.624151, 16.821241 ], [ 120.624656, 16.823997 ], [ 120.625263, 16.828749 ], [ 120.625839, 16.832262 ], [ 120.628853, 16.84315 ], [ 120.629868, 16.847078 ], [ 120.631182, 16.850216 ], [ 120.631873, 16.852387 ], [ 120.633701, 16.855803 ], [ 120.634133, 16.858214 ], [ 120.634083, 16.860738 ], [ 120.633297, 16.864645 ], [ 120.632726, 16.869494 ], [ 120.632375, 16.874483 ], [ 120.632215, 16.877648 ], [ 120.632493, 16.881813 ], [ 120.6348, 16.885265 ], [ 120.638429, 16.889584 ], [ 120.641289, 16.892557 ], [ 120.64478, 16.894707 ], [ 120.647243, 16.895648 ], [ 120.650994, 16.897145 ], [ 120.656912, 16.900029 ], [ 120.662389, 16.902567 ], [ 120.668569, 16.904489 ], [ 120.673756, 16.905924 ], [ 120.678834, 16.907083 ], [ 120.682771, 16.907997 ], [ 120.686523, 16.909081 ], [ 120.689135, 16.909644 ], [ 120.69289, 16.91004 ], [ 120.699225, 16.909932 ], [ 120.704418, 16.90975 ], [ 120.709319, 16.909257 ], [ 120.712598, 16.908825 ], [ 120.715472, 16.908563 ], [ 120.71853, 16.908233 ], [ 120.725268, 16.908437 ], [ 120.732478, 16.908815 ], [ 120.738636, 16.908741 ], [ 120.741176, 16.909062 ], [ 120.7492302, 16.9109919 ], [ 120.749381, 16.911028 ], [ 120.751622, 16.912277 ], [ 120.755442, 16.914876 ], [ 120.75794, 16.916402 ], [ 120.760951, 16.918687 ], [ 120.762825, 16.920439 ], [ 120.765852, 16.918057 ], [ 120.768477, 16.915282 ], [ 120.77048, 16.91185 ], [ 120.772003, 16.908553 ], [ 120.774155, 16.904399 ], [ 120.776173, 16.900981 ], [ 120.777527, 16.89915 ], [ 120.779673, 16.896648 ], [ 120.781784, 16.893629 ], [ 120.783267, 16.891193 ], [ 120.784823, 16.888929 ], [ 120.787636, 16.885329 ], [ 120.79041, 16.882314 ], [ 120.793812, 16.878682 ], [ 120.800717, 16.874172 ], [ 120.807248, 16.871002 ], [ 120.810639, 16.870364 ], [ 120.812704, 16.869582 ], [ 120.815877, 16.868083 ], [ 120.823479, 16.86423 ], [ 120.826768, 16.861492 ], [ 120.829614, 16.858787 ], [ 120.832056, 16.856045 ], [ 120.834277, 16.853131 ], [ 120.836503, 16.849182 ], [ 120.838989, 16.84424 ], [ 120.84047, 16.842182 ], [ 120.84239, 16.841055 ], [ 120.845336, 16.841035 ], [ 120.84577, 16.841431 ], [ 120.84749, 16.838267 ], [ 120.849833, 16.835272 ], [ 120.853077, 16.831622 ], [ 120.856537, 16.82725 ], [ 120.858846, 16.822402 ], [ 120.860108, 16.820269 ], [ 120.861589, 16.814669 ], [ 120.862636, 16.81137 ], [ 120.863684, 16.807007 ], [ 120.864589, 16.801615 ], [ 120.86795, 16.787496 ], [ 120.868783, 16.781589 ], [ 120.870017, 16.770327 ], [ 120.87085, 16.765382 ], [ 120.871394, 16.760712 ], [ 120.871469, 16.757245 ], [ 120.871365, 16.752783 ], [ 120.871117, 16.748185 ], [ 120.871119, 16.74657 ], [ 120.871955, 16.744181 ], [ 120.871223, 16.738031 ], [ 120.870822, 16.728114 ], [ 120.870569, 16.725972 ], [ 120.871179, 16.721132 ], [ 120.872436, 16.714527 ], [ 120.873837, 16.707507 ], [ 120.874734, 16.699867 ], [ 120.874659, 16.693405 ], [ 120.874692, 16.687529 ], [ 120.87523, 16.681895 ], [ 120.875407, 16.677194 ], [ 120.875587, 16.675466 ], [ 120.874612, 16.670872 ], [ 120.875942, 16.665201 ], [ 120.876695, 16.659047 ], [ 120.87752, 16.651441 ], [ 120.877409, 16.646119 ], [ 120.877407, 16.641177 ], [ 120.8778, 16.635854 ], [ 120.87841, 16.630772 ], [ 120.879221, 16.628618 ], [ 120.879597, 16.627485 ], [ 120.881395, 16.6224 ], [ 120.884273, 16.615755 ], [ 120.886108, 16.613054 ], [ 120.889527, 16.609069 ], [ 120.893019, 16.605602 ], [ 120.895106, 16.602865 ], [ 120.897409, 16.600163 ], [ 120.898201, 16.59895 ], [ 120.8985129, 16.5984296 ], [ 120.8987916, 16.5977233 ], [ 120.8986407, 16.5976702 ], [ 120.898164, 16.597465 ], [ 120.894393, 16.595887 ], [ 120.893139, 16.593392 ], [ 120.892298, 16.589238 ], [ 120.89057, 16.581017 ], [ 120.889115, 16.571673 ], [ 120.888502, 16.565704 ], [ 120.888114, 16.559217 ], [ 120.888039, 16.553163 ], [ 120.887823, 16.549919 ], [ 120.887613, 16.543779 ], [ 120.887666, 16.540449 ], [ 120.888405, 16.530939 ], [ 120.888192, 16.526268 ], [ 120.88724120000001, 16.5201901 ], [ 120.887089, 16.519217 ], [ 120.885984, 16.513203 ], [ 120.885374, 16.50611 ], [ 120.884806, 16.499968 ], [ 120.884953, 16.494434 ], [ 120.885775, 16.487993 ], [ 120.886632, 16.485315 ], [ 120.8869615, 16.4835236 ], [ 120.888039, 16.477666 ], [ 120.890026, 16.470624 ], [ 120.890752, 16.466432 ], [ 120.890536, 16.463102 ], [ 120.889917, 16.459684 ], [ 120.888898, 16.455357 ], [ 120.88819, 16.451636 ], [ 120.88847, 16.446794 ], [ 120.889246, 16.440786 ], [ 120.888983, 16.438407 ], [ 120.886753, 16.434206 ], [ 120.884611, 16.430827 ], [ 120.881983, 16.425154 ], [ 120.879396, 16.42039 ], [ 120.877969, 16.418051 ], [ 120.874442, 16.413154 ], [ 120.872711, 16.406447 ], [ 120.869282, 16.398264 ], [ 120.866695, 16.393846 ], [ 120.865315, 16.390382 ], [ 120.863045, 16.384365 ], [ 120.859616, 16.376442 ], [ 120.852936, 16.36012 ], [ 120.849195, 16.351547 ], [ 120.846432, 16.345529 ], [ 120.843221, 16.339725 ], [ 120.83925, 16.333702 ], [ 120.838669, 16.333009 ], [ 120.836303, 16.329629 ], [ 120.835678, 16.328849 ], [ 120.832288, 16.323261 ], [ 120.830236, 16.319752 ], [ 120.828673, 16.317758 ], [ 120.825992, 16.315156 ], [ 120.823084, 16.313979 ], [ 120.81856, 16.314182 ], [ 120.81502, 16.315252 ], [ 120.813046, 16.316327 ], [ 120.810699, 16.3184382 ], [ 120.810219, 16.31887 ], [ 120.8096181, 16.3196 ], [ 120.808018, 16.321544 ], [ 120.8074303, 16.3220456 ], [ 120.805595, 16.323612 ], [ 120.803444, 16.324211 ], [ 120.799955, 16.322255 ], [ 120.796331, 16.320601 ], [ 120.791951, 16.316783 ], [ 120.78735, 16.311883 ], [ 120.784224, 16.307852 ], [ 120.780027, 16.302694 ], [ 120.775385, 16.295804 ], [ 120.770206, 16.289087 ], [ 120.763062, 16.280071 ], [ 120.75976, 16.275002 ], [ 120.757754, 16.271148 ], [ 120.753964, 16.263915 ], [ 120.751377, 16.25954 ], [ 120.749013, 16.255339 ], [ 120.746514, 16.251612 ], [ 120.744995, 16.249521 ], [ 120.744062, 16.246849 ], [ 120.743621, 16.243777 ], [ 120.742516, 16.237807 ], [ 120.740785, 16.231229 ], [ 120.739725, 16.225043 ], [ 120.739694, 16.218989 ], [ 120.740469, 16.213154 ], [ 120.741601, 16.208185 ], [ 120.742731, 16.203734 ], [ 120.743544, 16.20071 ], [ 120.744087, 16.19855 ], [ 120.744671, 16.197514 ], [ 120.72508, 16.192822 ], [ 120.721262, 16.191908 ], [ 120.696874, 16.188479 ], [ 120.696334, 16.188482 ], [ 120.693704, 16.188392 ], [ 120.691408, 16.187925 ], [ 120.687782, 16.187131 ], [ 120.687433, 16.187055 ], [ 120.681954, 16.185608 ], [ 120.676941, 16.183737 ], [ 120.675264, 16.183144 ], [ 120.672434, 16.182143 ], [ 120.667676, 16.181044 ], [ 120.662238, 16.181005 ], [ 120.65784, 16.18206 ], [ 120.656228, 16.182447 ], [ 120.647774, 16.185345 ], [ 120.637729, 16.189068 ], [ 120.636587, 16.189491 ], [ 120.625405, 16.19448 ], [ 120.624884, 16.194738 ], [ 120.624017, 16.195167 ], [ 120.617853, 16.198218 ], [ 120.611403, 16.201524 ], [ 120.611014, 16.201723 ], [ 120.608757, 16.20288 ], [ 120.599695, 16.207154 ], [ 120.592152, 16.210196 ], [ 120.590847, 16.210723 ], [ 120.590775, 16.210749 ], [ 120.58315, 16.213547 ], [ 120.582085, 16.213945 ], [ 120.573689, 16.217084 ], [ 120.563114, 16.221051 ], [ 120.55549, 16.224261 ], [ 120.547612, 16.22705 ], [ 120.538364, 16.22939 ], [ 120.53458, 16.230285 ], [ 120.531958, 16.230905 ], [ 120.527776, 16.231926 ], [ 120.527388, 16.232021 ], [ 120.524202, 16.23312 ], [ 120.522927, 16.23356 ], [ 120.520915, 16.234873 ], [ 120.520015, 16.235712 ], [ 120.519547, 16.23644 ], [ 120.516883, 16.238625 ], [ 120.512455, 16.240402 ], [ 120.511698, 16.243294 ], [ 120.50203, 16.280246 ], [ 120.488305, 16.336606 ], [ 120.487223, 16.341047 ], [ 120.482712, 16.357541 ], [ 120.473597, 16.390867 ], [ 120.46912, 16.428586 ], [ 120.4686907, 16.4322028 ], [ 120.466989, 16.446539 ], [ 120.464883, 16.464285 ], [ 120.46191, 16.497298 ] ] ] }

        }, {
          'type': 'Feature',
          'geometry': {
            'type': 'LineString',
            'coordinates': [[4e6, -2e6], [8e6, 2e6]]
          }
        }, {
          'type': 'Feature',
          'geometry': {
            'type': 'LineString',
            'coordinates': [[4e6, 2e6], [8e6, -2e6]]
          }
        }, {
          'type': 'Feature',
          'geometry': {
            'type': 'Polygon',
            'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
          }
        }, {
          'type': 'Feature',
          'geometry': {
            'type': 'MultiLineString',
            'coordinates': [
              [[-1e6, -7.5e5], [-1e6, 7.5e5]],
              [[1e6, -7.5e5], [1e6, 7.5e5]],
              [[-7.5e5, -1e6], [7.5e5, -1e6]],
              [[-7.5e5, 1e6], [7.5e5, 1e6]]
            ]
          }
        }, {
          'type': 'Feature',
          'geometry': {
            'type': 'MultiPolygon',
            'coordinates': [
              [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]],
              [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]],
              [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]
            ]
          }
        }, {
          'type': 'Feature',
          'geometry': {
            'type': 'GeometryCollection',
            'geometries': [{
              'type': 'LineString',
              'coordinates': [[-5e6, -5e6], [0, -5e6]]
            }, {
              'type': 'Point',
              'coordinates': [4e6, -5e6]
            }, {
              'type': 'Polygon',
              'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]
            }]
          }
        }]
      };

Fiddle: https://jsfiddle.net/nLumrn10/5/

The polygon at line 86 should be somewhere in the Philippines (specified at line 170), but it doesn't show up.

Answer 1

Sorry for the late response. Thanks for the fiddle , now is more clear. Your problem is that you have to make ol aware about the coord tranformations need to take place. You are also mixing 4326 coords and 3857 within the same geojson. So better keep only the polygon of your interest and do the following.

var vectorSource = new ol.source.Vector({ features: (new ol.format.GeoJSON()).readFeatures(geojsonObject, { defaultDataProjection: 'EPSG:4326', featureProjection:'EPSG:3857' }) });

here is a fiddle