Trying to load (PNG)-Files to MapBox-GL-JS in a iOS Cordova App

[Max Mustermann]

Hello

We are trying to load a few locally stored Icons (as PNG-Files) for our App, using MapBox GL .. the "normal" Version of the Code we use is 

map.loadImage('./img/car24.png', (error, image) => {
  if (error) {
    console.log("Car24 image not loaded");
   throw error;
 }
  map.addImage('car24', image);
});

...

this works quite Well using Android or the Browser Platform, but it does NOT work using ios 

AFAIK there are a few Problems with WebKit concerning this .. therefore I tried usind the 

cordova-plugin-wkwebview-engine 1.1.3 "Cordova WKWebView Engine"

Plugin. And adding the following Code 

- (WKWebViewConfiguration*) createConfigurationFromSettings:(NSDictionary*)settings

{

    WKWebViewConfiguration* configuration = [[WKWebViewConfiguration alloc] init];

    

    ......

    @try {

        [configuration.preferences setValue:@TRUE forKey:@"allowFileAccessFromFileURLs"];

    }

    @catch (NSException *exception) {}

    

    @try {

        [configuration setValue:@TRUE forKey:@"allowUniversalAccessFromFileURLs"];

    }

    @catch (NSException *exception) {}

    

    return configuration;

}

but still, using the file://-Urls resolves in file://img/car24.png not found

I was told that I should try using the FULL-File-URL using the cordova-plugin-filesystem Plugin. But I don't know what "Path" to use .. 

I tried

var cpath = cordova.file.documentsDirectory+'img/img24.png';
                map.loadImage(cpath, (error, image) => {
                  ....
                });

but it didn't work.  

Any Ideas what I'm doing wrong .. and where to Put the Images etc.

My Envinronment:

cordova-plugin-compat 1.1.0 "Compat"

cordova-plugin-file 4.3.3 "File"

cordova-plugin-statusbar 2.2.3 "StatusBar"

cordova-plugin-whitelist 1.3.2 "Whitelist"

cordova-plugin-wkwebview-engine 1.1.3 "Cordova WKWebView Engine"

Cordova Version 7.0.1

Thanx for any Hints 

Volker

 

 

[Max Mustermann]

Ok my working solution is:

function loadLocalFileResourceAsImageToMap(path, name, map){

  fetchLocalFileViaCordovaAsURL(path,

      function(url) {

          map.loadImage(url, (error, image) => {

              if (error) {

                  console.error(path);

                  console.error(error);

                  throw error;

              }

              map.addImage(name, image);

          });

      },

      function() {

        console.error("Cannot load path:"+path+" name"+name);

      });

}

function fetchLocalFileViaCordova(filename, successCallback, errorCallback) {

    var path = cordova.file.applicationDirectory + "www/" + filename;

    window.resolveLocalFileSystemURL(path, function(entry) {

        entry.file(successCallback, errorCallback);

    }, errorCallback);

};

function fetchLocalFileViaCordovaAsText(filename, successCallback, errorCallback) {

    fetchLocalFileViaCordova(filename, function(file) {

        var reader = new FileReader();

        reader.onload = function(e) {

            successCallback(e.target.result);

        };

        reader.onerror = errorCallback;

        reader.readAsText(file);

    }, errorCallback);

};

function fetchLocalFileViaCordovaAsArrayBuffer(filename, successCallback, errorCallback) {

    fetchLocalFileViaCordova(filename, function(file) {

        var reader = new FileReader();

        reader.onload = function(e) {

            successCallback(e.target.result);

        };

        reader.readAsArrayBuffer(file);

    }, errorCallback);

};

function fetchLocalFileViaCordovaAsURL(filename, successCallback, errorCallback) {

    // Convert fake Cordova file to a real Blob object, which we can create a URL to.

    fetchLocalFileViaCordovaAsArrayBuffer(filename, function(arrayBuffer) {

        var blob = new Blob([arrayBuffer]);

        var url = URL.createObjectURL(blob);

        successCallback(url);

    }, errorCallback);

};