Phonegap - Can't access GeoJson Stored in Data Directory

Question

I'm working on trying to incorporate an updatable vector layer into my phonegap build with OpenLayers 3. It will check the server for updates and download a new file when necessary.

I can download the file and store it no problem (I use the same code in other apps for non-geojson file types with no problems). I've verified it's existence using the following:

var resortURL = cordova.file.dataDirectory + "resorts.geojson";
window.resolveLocalFileSystemURL(resortURL,function(e){
   console.log("located");
},function(e){
   console.log("missing");
});

When I go to access the file using OL:

var resortSource = new ol.source.Vector({
    url: resortURL,
    format: new ol.format.GeoJSON()
});
var resortBoundary = new ol.layer.Vector({
    source: resortSource
});
map.addLayer(resortBoundary);

The above fails to add any data to the map, although it does add the layer. I have gone even further and added the geojson file directly to the assets www folder pre-build and accessed it using:

url: "json/resorts.geojson"

Requesting the file from the assets location works exactly as expected. The problem is when I try access it after downloading it to the Data Directory on Android and then trying to access through there. Am I missing something? I've been trying everything under the sun trying to make it work.

Answer 1

Consider using the vector loader function to handle fetching your geojson files. I've had numerous caching issues not using a vector loading function to fetch geojson files and the method below eliminated that problem. For example:

var utils = {
    refreshGeoJson: function(source,url) {
      var now = Date.now();
      if (typeof url == 'undefined') {
        url = source.getUrl();
      }
      url += '?t=' + now; //Add current time to prevent browser caching
      console.info('refreshGeoJson url: ' + url);
          this.getJson(url).when({
        ready: function(response) {
          var format = new ol.format.GeoJSON();
          var features = format.readFeatures(response, {
            featureProjection: 'EPSG:3857'
          });
          console.dir(features);
          console.log(features.length);
          source.addFeatures(features);
          source.changed();
        }
         });
},
    getJson: function(url) {
          var xhr = new XMLHttpRequest(),
          when = {},
          onload = function() {
        console.log('xhr.status onload() ' + xhr.status);
        if (xhr.status === 200) {
         console.log('getJson() xhr: ');
         console.dir(xhr);
         console.log('getJson() xhr.response: ');
         console.dir(xhr.response);
                  when.ready.call(undefined, JSON.parse(xhr.response));
            }
        if (xhr.status === 404) {
          console.log('file not found! url: ' + url);
          alert("file not found!\n" + url);
        }
          },
          onerror = function() {
            console.info('Cannot XHR ' + JSON.stringify(url));
          };
      //console.log('getJson() - retrieve file url: ' + url);
          xhr.open('GET', url, true);
          xhr.setRequestHeader('cache-control', 'no-store');
          xhr.onload = onload;
          xhr.onerror = onerror;
          xhr.send(null);
          return {
        when: function(obj) { when.ready = obj.ready; }
        };
    }
};

var vectorLoader = function(extent, resolution, projection) {
  utils.refreshGeoJson(this);
}

var resortSource = new ol.source.Vector({
    url: /path-to/myFile.geojson',
    format: new ol.format.GeoJSON({
       defaultDataProjection :'EPSG:3857' 
    }),
    loader: vectorLoader,
    strategy: ol.loadingstrategy.all
  });

If there is a syntax problem with your geojson file, it will fail here when.ready.call(undefined, JSON.parse(xhr.response));. This give you way more control over things instead of just using the url property without the vector loader function.