Multiple layers within a single geojson file

Question

To give some background, I'm working on a project that has quite a few restrictions given the environment it will run in. I need to be able to view and interact with geospatial data, perform geospatial data entry (ie click a point on the map and fill in the attributes), no new software or server can be installed on the client machine, and it cannot be added to an existing web server.

My solution is to use OpenLayers from an html file opened off of the client's file system. This resulted in cross-origin security violations in browsers when attempting to read spatial data files off of the local hard drive from javascript (despite all the files being from the same directory), and modifying the browser security is not an option. My workaround for this is to add a file drag and drop where the user "uploads" the file and it's read into OpenLayers, but I have to make it easy for the user and dropping 10+ files individually isn't practical.

I want to merge each of the 10+ GeoJSON files I use into a single file, but keep them distinct, such that I can load them into OpenLayers as individual layers in order to apply individual styling and not try to merge or generalize unrelated attributes. I can't think of a way to do this cleanly where OpenLayers will still be able to interpret the GeoJSON structure.

Is it practical to wrap the GeoJSON in XML and break it apart in javascript before sending it to OpenLayers? Can I wrap GeoJSON in JSON or would it confuse parsers?

Answer 1

It doesn't really make sense to mix GeoJSON with XML, since they are different languages of storing data. Why not simply use a normal JSON Array which holds all your GeoJSON files. You can then iterate through the array to set them apart from each other and put them into single layers.

Answer 2

Creating JSON Array works.

Code to parse and pass GeoJSON to OpenLayers:

reader = new FileReader(),
reader.onload = function (fe) {

var jsonFile = fe.target.result; // the file

var jsonObj = JSON.parse(jsonFile);

addMapLayer(JSON.stringify(jsonObj.layers[0]));
addMapLayer(JSON.stringify(jsonObj.layers[1]));
addMapLayer(JSON.stringify(jsonObj.layers[2]));

Code to process it in OpenLayers:

function addMapLayer(geojson) {
    var blob = new Blob([geojson], { type: 'text/plain' });
    var lnk = window.URL.createObjectURL(blob);

    var geojsonLayer = new ol.layer.Image({
       source: new ol.source.ImageVector({
          source: new ol.source.Vector({
              url: lnk,
              format: new ol.format.GeoJSON()
          }),
          style: style
        })
    });
}

map.addLayer(geojsonLayer);

Example JSON array of GeoJSON objects structure:

{
 "layers": [
 {
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": { "name": "urn:ogc:def:crs:EPSG::3857" }
  },
  "features": [
    {
      "type": "Feature",
      "properties": {
        "gid": 1
      },
      "geometry": {
        "type": "MultiPolygon",
        "coordinates": [
          [
            [
              [ -175506.98470673, 264347.080862056 ],
              [ -170843.851533432, 26238.8774760603 ]
            ]
         ]
      }
    }
  ]
  },
  {
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": { "name": "urn:ogc:def:crs:EPSG::3857" }
  },
  "features": [
    {
      "type": "Feature",
      "properties": {
        "gid": 1
      },
      "geometry": {
        "type": "MultiPolygon",
        "coordinates": [
          [
            [
              [ -175506.98470673, 264347.080862056 ],
              [ -170843.851533432, 26238.8774760603 ]
            ]
         ]
      }
    }
  ]
}