2

I am a beginner in OpenLayers. I would like a GeoJSON to be displayed on the map. Can you provide me with some example code to allow me to build this small project?

The GeoJSON code is:

{"type":"FeatureCollection","features":[{"type":"Feature","id":null,"geometry":{"type":"LineString","coordinates":[[698282.236,377375.758],[698289.591,377372.136],[698183.88,377182.298],[698182.72,377197.045],[698282.236,377375.758]]},"crs":{"type":"EPSG","properties":{"code":"4326"}},"geometry_name":"wkb_geometry","properties":{"ogc_fid":"","area_id":null,"building_id":null,"type":null,"area":null,"owner":null,"description":null,"administration":null,"address":null,"property":null,"layer":"Green Area","extendedentity":null,"linetype":null,"entityhandle":null,"text":null,"wkb_geometry":"01020000000500000000FED478544F2541002731087F081741408D972E634F25418195438B70081741295C8FC28F4E254181E92631790517410AD7A3708D4E2541027B142EB405174100FED478544F2541002731087F081741"}},{"type":"Feature","id":null,"geometry":{"type":"LineString","coordinates":[[698289.591,377372.136],[698295.211,377369.369],[698184.767,377171.028],[698183.88,377182.298],[698289.591,377372.136]]},"crs":{"type":"EPSG","properties":{"code":"4326"}},"geometry_name":"wkb_geometry","properties":{"ogc_fid":"","area_id":null,"building_id":null,"type":null,"area":null,"owner":null,"description":null,"administration":null,"address":null,"property":null,"layer":"Green Area","extendedentity":null,"linetype":null,"entityhandle":null,"text":null,"wkb_geometry":"010200000005000000408D972E634F25418195438B700817411E31086C6E4F2541C022DB79650817416039B488914E25414108AC1C4C051741295C8FC28F4E254181E9263179051741408D972E634F25418195438B70081741"}}]}
3

OpenLayers can handle geojsons in any coordinate system, but a geojson should not specify EPSG:4326 when the coordinates are in another projection. However, the primary reason why that will not load in OpenLayers is the feature ids are null which is invalid, but can be fixed by undefining the ids. Unless you are expecting data off the coast of Nigeria (assuming OpenLayers default EPSG:3857 projection) you will need find out which projection the coordinates are in and diaplay the map or features in that projection.

var geojson = {"type":"FeatureCollection","features":[{"type":"Feature","id":null,"geometry":{"type":"LineString","coordinates":[[698282.236,377375.758],[698289.591,377372.136],[698183.88,377182.298],[698182.72,377197.045],[698282.236,377375.758]]},"crs":{"type":"EPSG","properties":{"code":"4326"}},"geometry_name":"wkb_geometry","properties":{"ogc_fid":"","area_id":null,"building_id":null,"type":null,"area":null,"owner":null,"description":null,"administration":null,"address":null,"property":null,"layer":"Green Area","extendedentity":null,"linetype":null,"entityhandle":null,"text":null,"wkb_geometry":"01020000000500000000FED478544F2541002731087F081741408D972E634F25418195438B70081741295C8FC28F4E254181E92631790517410AD7A3708D4E2541027B142EB405174100FED478544F2541002731087F081741"}},{"type":"Feature","id":null,"geometry":{"type":"LineString","coordinates":[[698289.591,377372.136],[698295.211,377369.369],[698184.767,377171.028],[698183.88,377182.298],[698289.591,377372.136]]},"crs":{"type":"EPSG","properties":{"code":"4326"}},"geometry_name":"wkb_geometry","properties":{"ogc_fid":"","area_id":null,"building_id":null,"type":null,"area":null,"owner":null,"description":null,"administration":null,"address":null,"property":null,"layer":"Green Area","extendedentity":null,"linetype":null,"entityhandle":null,"text":null,"wkb_geometry":"010200000005000000408D972E634F25418195438B700817411E31086C6E4F2541C022DB79650817416039B488914E25414108AC1C4C051741295C8FC28F4E254181E9263179051741408D972E634F25418195438B70081741"}}]};

var features = new ol.format.GeoJSON().readFeatures(geojson);

features.forEach(function(feature){ feature.setId(undefined) });

var map = new ol.Map({
  layers: [
      new ol.layer.Tile({
          source: new ol.source.OSM(),
      }),
      new ol.layer.Vector({
          source: new ol.source.Vector({
              features: features
          })
      })
  ],
  target: 'map',
  view: new ol.View({
    center: [698282.236, 377375.758],
    zoom: 18
  })
})

If the coordinates are EPSG:31700 and as the documentation (but not the proj4 definition) suggests the coordinates are in [northing, easting] order this should display the data in the correct location

proj4.defs('EPSG:31700','+proj=sterea +lat_0=46 +lon_0=25 +k=0.99975 +x_0=500000 +y_0=500000 +ellps=krass +towgs84=28,-121,-77,0,0,0,0 +units=m +no_defs');

if (ol.proj.proj4 && ol.proj.proj4.register) { ol.proj.proj4.register(proj4); }

var features = new ol.format.GeoJSON().readFeatures(geojson);

function reverseTransform(coordinates, output, dimensions) {
    var dims = dimensions || 2;
    for (var i=0; i<coordinates.length; i+=dims) {
      var j = coordinates[i];
      coordinates[i] = coordinates[i+1];
      coordinates[i+1] = j;
    }
    return coordinates;
}

features.forEach(function(feature){
    feature.setId(undefined);
    feature.getGeometry().applyTransform(reverseTransform);
    feature.getGeometry().transform('EPSG:31700', 'EPSG:3857');
});

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM(),
        }),
        new ol.layer.Vector({
            source: new ol.source.Vector({
                features: features
            })
        })
    ],
    target: 'map',
    view: new ol.View({
        center: ol.proj.transform([377375.758, 698282.236], 'EPSG:31700', 'EPSG:3857'),
        zoom: 18,
    })
});

I attempted to add +axis=neu to the proj4 definition but it had no effect, so instead I added feature.getGeometry().applyTransform(reverseTransform); and centered the map at [377375.758, 698282.236] instead of [698282.236, 377375.758]

  • Oke thx the projection system its EPSG: 31700, how do I enter it in code to display my coordinates well on the map? – CoderCoder42 Jan 25 at 12:42
  • I'm not sure about the axis orientation on EPSG:31700. Do you know if the coordinates are [east,north] or [north,east]? Should the data be near Seni, or near Baraganul? – Mike Jan 25 at 13:26
  • The geometric shape of the drawings is very good, just because it is not well positioned, it is positioned in the other part of the country, not in the south I took a picture about where you should look below. ibb.co/Xk4TJbP – CoderCoder42 Jan 26 at 14:22
  • That is near Baraganul so the data must be in [easting, northing] format. You can remove the feature.getGeometry().applyTransform(reverseTransform); line and swap the center coordinates to [698282.236, 377375.758] – Mike Jan 26 at 14:28
0

Your json string seems to be invalid. The coordinates [698282.236,377375.758] for instance, cannot be shown on a geographic projection (ie. 4326).

How did you obtain this geojson string?

  • I got geojson through ogr2ogr by parsing a .dxf file I followed a tutorial... I do not know how to do it – CoderCoder42 Jan 25 at 10:56
  • You may want to play around with this example here: openlayers.org/en/v4.6.5/examples/geojson.html Just click the edit link and play around in Codepen. You still need a valid geojson though as I said before. Those coordinates are invalid for 4326 projection. – Ulas Jan 25 at 11:09
  • I have a dxf file and from this I should get coordinates to be displayed on the map ... In projection 4326 how could I do that? – CoderCoder42 Jan 25 at 11:19

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.