0

I'm a bit new to working with OpenLayers 3. I'm trying to load a GeoJSON object in OpenLayers 3 but it display the center only point[0,0], which not even in my GeoJSON object, where I'm going wrong.

The code is below:

//CREATE A BASE LAYER
        var raster = new ol.layer.Tile({
          source: new ol.source.OSM()
        }); 

        // create a source from the feature
        var source = new ol.source.GeoJSON(

            ({
                    object:
                        {
                            'type': 'FeatureCollection',
                            'crs': {
                                'type': 'name',
                                'properties': {'name': 'EPSG:3857'}
                            },
                            'features': [
                                {
                                    'type': 'Feature',
                                    //'properties': {'id': 63},
                                    'geometry': {
                                        'type': 'Point',
                                        'coordinates': [12, 12]
                                    }
                                },
                                {
                                    'type': 'Feature',
                                    'properties': {'id': 62},
                                    'geometry': {
                                        'type': 'Point',
                                        'coordinates': [35.0, 1.0]}
                                },
                                {
                                    'type': 'Feature',
                                    'properties': {'id': 61},
                                    'geometry': {
                                        'type': 'Point',
                                        'coordinates': [34.0, 0.0]}
                                },
                                {
                                    'type': 'Feature',
                                    'properties': {
                                        'id': 56
                                    },
                                    'geometry': {
                                        'type': 'Point',
                                        'coordinates': [33.0, 33.0]
                                    }
                                }
                            ]
                        }
            })
        );


       // CREATE THE LAYER WITH THE DATA
        var vectorLayer = new ol.layer.Vector({
            source: source
        });

       // create an openlayers map object
        var map = new ol.Map({
            target: attrs.id,
            layers: [raster,vectorLayer],
            view: new ol.View({
                //projection:'EPSG:4326',
                center:[0,0],
                zoom:2
            })
        });
    }
1

I figured it out. I had to do a reprojection of my GeoJSON object.

OpenLayers 3 by default uses EPSG:3857, so does my base map which is OpenStreetMap i.e projected coordinate system. So I had to turn my GeoJSON to a projected system since it was coming in using the longitude and latitudes i.e. geographical coordinate system. (GeoJSON is always ESPG:4326)

var source = new ol.source.GeoJSON({
                    object:{
                        'type': 'FeatureCollection',
                        'crs': {
                            'type': 'name',
                            'properties': {'name': 'EPSG:4326'}
                        },
                        'features': [
                            {
                                'type': 'Feature',
                                //'properties': {'id': 63},
                                'geometry': {
                                    'type': 'Point',
                                    'coordinates': [12, 12]
                                }
                            },
                            {
                                'type': 'Feature',
                                'properties': {'id': 62},
                                'geometry': {
                                    'type': 'Point',
                                    'coordinates': [35.0, 1.0]}
                            },
                            {
                                'type': 'Feature',
                                'properties': {'id': 61},
                                'geometry': {
                                    'type': 'Point',
                                    'coordinates': [34.0, 0.0]}
                            },
                            {
                                'type': 'Feature',
                                'properties': {
                                    'id': 56
                                },
                                'geometry': {
                                    'type': 'Point',
                                    'coordinates': [33.0, 33.0]
                                }
                            }
                        ]
                    },
                    projection: 'EPSG:3857'
            }
        );

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.