1

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.

  • your geojson coords seems to be projected in EPSG:4326 while your map is ...... EPSG:3857???? – pavlos Jun 16 '17 at 19:04
  • I am new to OpenLayers. Even though I replace '3857' with '4326', the geojson polygon doesn't show up. Kindly advise on what to do. – JAT86 Jun 16 '17 at 19:25
  • Depends on the rest of your code. please provide your map and layer definition code snips so i can help you out. If you provide a fiddle it would be nice! – pavlos Jun 16 '17 at 19:59
  • Hello. I have updated the question and added a fiddle. Please check. Thank you. – JAT86 Jun 17 '17 at 6:37
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.