OpenLayers add multiple GeoJSON layers

Question

I'm trying to load multiple shapefiles as GeoJSON and display them on OpenLayers.

This is the code:

        var map = new ol.Map({
        layers: [new ol.layer.Tile({
            source: new ol.source.OSM()
        })],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: {
                collapsible: false
            }
        }),
        overlays: [overlay],
        view: new ol.View({
            projection: 'EPSG:4326',
            center: center,
            zoom: zoom,
            rotation: rotation
        })
    });


    loadshp({
            url: './10tnvillage.zip',
            encoding: 'big5',
            EPSG: 3826
        },
        function (data) {

            var vectorLayer = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: (new ol.format.GeoJSON()).readFeatures(data,{
                        featureProjection: 'EPSG:4326'
                    })
                }),
                style: setStyle
            });

            map.addLayer(vectorLayer);
        });

    loadshp({
            url: './abadan.zip',
            encoding: 'big5',
            EPSG: 3826
        },
        function (data1) {

            var vectorLayer1 = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: (new ol.format.GeoJSON()).readFeatures(data1,{
                        featureProjection: 'EPSG:4326'
                    })
                }),
                style: setStyle
            });

            map.addLayer(vectorLayer1);
        });

It's show the Tile layer and the latest shapefile, but not all of them.

I did used a Array List and pass it to Map object, but didn't work.

        var layers = [];
    layers.push(new ol.layer.Tile({
        source: new ol.source.OSM()
    }));
    ...
    layers.push(vectorLayer);
    ...
    layers.push(vectorLayer1);
    ....
    var map = new ol.Map({
        layers: layers,
    ...

So, how can I display all my layers in OpenLayers?

Answer 1

You could try something like below to create all the Layers using GeoJSON individually

   // create the map
    var map = new ol.Map({
    layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
    })],
    target: 'map',
    controls: ol.control.defaults({
        attributionOptions: {
            collapsible: false
        }
    }),
    overlays: [overlay],
    view: new ol.View({
        projection: 'EPSG:4326',
        center: center,
        zoom: zoom,
        rotation: rotation
    })
});


//First create a Vector source from GeoJSON
var shapefileSource= new ol.source.Vector
({
  url: YOU-GEOJSON-URL
  format: new ol.format.GeoJSON()
});

// create the Vector layer based on the source 

var Vector_map_layer =  new ol.layer.Vector
({
  source: shapefileSource,
});   

After, add layers to the map

map.addLayer(Vector_map_layer)

If you could see some but not all of the layer, I would suggest you to use

map.getLayers();

to figure out what layers you have in the map, maybe you didn't add them in correctly.