OpenLayers: Loading a TileJSON from a local file - ios

I'm trying to implement a local copy of a TileJSON in an iOS app through Cordova. The issue I'm having is that OpenLayers doesn't seem to recognise the JSON file as valid and thus doesn't show any tiles. I have tried local and remote versions of the same TileJSON and looked at the Console Logs, the local one has a status of "error" (but no explanation as to what that error might be...).
I think the issue is down to the fact that the JSON file is being loaded using a file: URL, rather than http:. I have put the JSON file on a remote server and this not only loads fine but actually loads the tiles from the local path.
Can OpenLayers be tricked into accepting the local file as a valid JSON file? Can Cordova be forced to load local files via HTTP? I think either of these options would fix the issue.
Thanks
EDIT: Here's the code I'm using to load the TileJSON:
var mapLayer = new ol.layer.Tile({
source: new ol.source.TileJSON({
url: getPhoneGapPath() + 'tiles.json',
crossOrigin: 'anonymous'
})
});
this.map.addLayer(mapLayer);
function getPhoneGapPath() {
var path = window.location.pathname;
path = path.substr( path, path.length - 10 );
return path;
}
The getPhoneGapPath() function is used to get the path to the webroot of the Cordova app.

This is probably related to a bug in OpenLayers, https://github.com/openlayers/ol3/issues/5647. The fix will be in the next release.
Also make sure that you configure Cordova to allow access to file:// urls when the application is served from a file:// url. The equivalent option in Chrome is --allow-file-access-from-files.

Related

Socket IO . How to change url path

How to change url path of socket.io.js
my socket.io.js is located at
https://192.168.236.100/socket.io/socket.io.js
what if i want to change it like:
https://192.168.236.100/socket.conference/socket.io.js
thank you
It is not as simple as changing the this._path value or passing in the path option to the constructor because if you change that, it also affects how a socket.io client must connect to the server too, not only how the socket.io.js file is served.
The simplest way I could find to make the socket.io.js file appear to be coming from a different path and not change anything else is to just create a new route for it like this:
app.get("/socket.conference/socket.io.js", function(req, res) {
res.sendFile(path.join(__dirname, "node_modules/socket.io-client/socket.io.js"));
});
This assumes that socket.io is installed locally in the directory that your app file is running from. If it is installed somewhere differently, then you need to find where the /socket.io-client/socket.io.js path/file is and use the right path to that.
This works with this client <script> tag:
<script src="/socket.conference/socket.io.js"></script>

Filename not assigned to csv export in HighCharts on Mac

I am using the EXPORT-CSV plugin for Highcharts to export data to csv. (Thank you to the developers of this plugin!) When testing in Safari on a Mac, however, the exported csv file does not take the filename as expected from
exporting: {
filename: "FancyFileName"
}
and instead just uses the default Highcharts name "chart". All the built-in export types do use the desired filename from Safari, and the csv also gets the desired filename from all the other standard browsers I have tested.
Here is a fiddle.
How can Safari be convinced to use the filename I give it? Thanks for your help.
The hard coded filename is coming from the php script written on the server. You can find that script on php script for download of file with hardcoded file name
You can use that same code on your local machine server. To do that
create a php file on your local server.
copy the above code in it.
change url www.highcharts.com/studies/csv-export/csv.php in export.csv library to your local server url.
change the name whatever you wish to using $_POST['variablename']
Variable name should be pass when making post call from export.csv library and use in php file using $_POST
Highcharts.post(url, {
data: content,
name: name,
type: MIME,
extension: extension
});
This is the code used in export.csv library for making post call. I have added extra parameter name to be used in my php script for dynamic filename.

How to access image from native URI (assets-library) in Cordova for iOS

I have a Cordova/PhoneGap app which uses the camera to capture a picture. I need to access this picture to send to my server.
For Android I simply use $cordovaFile.readAsDataURL(cordova.file.dataDirectory, fileName)
However; on iOS the filename does not come back as such. My return value for iOS shows the path as
assets-library://asset/asset.JPG?id=539425FE-43AA-48E7-9865-D76348208AC7&ext=JPG
How can I access and read this image? I'd prefer to stick with $cordovaFile but just want to get it to work.
I am using CordovaCameraPreview plugin and the best I can get back from the picture taker handler seems to be something formed similar to:
assets-library://asset/asset.JPG?id=990355E1-200A-4E35-AAA1-7D461E3999C8&ext=JPG
assets-library://asset/asset.JPG?id=C49FF0EB-CCCB-45B2-8577-B13868D8DB29&ext=JPG
How can I convert this to a filename and path that I can read with $cordovaFile? According to their documentation (http://ngcordova.com/docs/plugins/file/) it looks like I need to use one of their paths for File System Layout. It works fine on Android using cordova.file.dataDirectory but can't figure out how to access on iOS
I've also tried using window.resolveLocalFileSystemURL(path) but am getting undefined as my result.
Update
I feel like I'm getting closer... using window.resolveLocalFileSystemURL(path,resolveOnSuccess, resOnError); I get more information
name: "assets-library"
fullPath: "/asset/asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG"
name: "asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG"
nativeURL: "assets-library://asset/asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG"
It looks like I now need to use the fullPath but still can't figure out how to access with $cordovaFile
If I try to use $cordovaFile.readAsDataURL(cordova.file.dataDirectory, data.name) where data.name is asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG I get a file not found error
Update 2
I have tried using every single File System Layout available at http://ngcordova.com/docs/plugins/file/ and receive the same File Not Found error on each one. Still no clue how to access a file in assets-library using $cordovaFile
I had success with a simple substitution, like this
fullPath = fullPath.replace("assets-library://", "cdvfile://localhost/assets-library/")
It works in iOS 9.3
I was struggling with a similar issue for a while, but I figured it out today. I also thought that the FileSystem APIs didn't work with assets-libary:// URIs -- but that is not the case.
You should be able to get access to the File object (as well as the actual image name) by using the following code:
resolveLocalFileSystemURL('assets-library://asset/asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG', function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(event) {
console.log(event.target.result.byteLength);
};
console.log('Reading file: ' + file.name);
reader.readAsArrayBuffer(file);
});
});

Use local json file with Cordova/ionic/Angular. Works in browser, but not on device?

I'm attempting to use a JSON object living in a data.json file to be the dataset for a quick prototype I'm working on. This lives in a my_project/www/data/ directory. I have an Angular service that goes and grabs the data within this file using $http, does some stuff to it, and then it's used throughout my app.
I'm using Cordova and Ionic. When using ionic serve on my computer, everything looks perfect in the browser. However, when using ionic view (http://view.ionic.io/) and opening the app on my iPad, I see a:
{"data":null,"status":0,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"../data/items.json","headers":{"Accept":"application/json,test/plain,*/*}},"statusText":""}
for a response. I would think that if it were a relative URL issue, that it would also not work in the browser, but that is not the case.
Here's what I'm doing:
config.xml has this line:
<access origin="*" subdomains="true"/>
My service that preforms the simple request is doing:
return $http.get("../data/data.json").then(function (response) {
return response.data;
});
And finally, in my controller, I ask for the service to preform the request:
myService.goGetData().then(onComplete, onError);
In my browser, onComplete() is invoked and on the iPad, onError() is invoked.
Any guidance?
On your local developer machine you're actually running a webserver when you run ionic serve. So a path like ../../data.json will work because it is totally valid in the context of the webserver that has complete filesystem access.
If, however, you try to do the same thing on your device, you're probably going to run into an issue because the device has security policies in place that don't allow ajax to traverse up outside of the root. It is not a dynamic webserver so it can't load files up the tree. Instead you'd use something like the cordova file plugin to grab the file contents from the filesystem. If you prefer, you can use ngCordova to make interacting with the plugin a bit less painful.
I am 99% sure this is what is happening but you can test my theory by pointing your $http call to some dummy .json data hosted on a publicly available server to see if it works. Here is some dummy json data.
Just gonna leave this here because I had the same problem as the original question author. Simply removing any starting slashes from the json file path in the $http.get function solved this problem for me, now loading the json data works both in the browser emulator and on my android device. The root of the $http call url seems to always be the index.html folder no matter where your controller or service is located. So use a path relative from that folder and it should work. like $http.get("data/data.json")
So this is an example json file. save it as data.json
[
{
"Name" : "Sabba",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Tom",
"City" : "NY",
"Country" : "USA"
}
]
And this this is what a example controller looks like
var app = angular.module('myApp', ['ionic']);
app.controller('ExhibitionTabCtrl', ['$scope', '$http', function($scope,$http) {
$http.get("your/path/from/index/data.json")
.success(function (response)
{
$scope.names = response;
});
}]);
Then in your template make sure you are you are referencing your controller.
<ion-content class="padding" ng-controller="ExhibitionTabCtrl">
You should then be able to use the a expression to get the data
{{ names }}
Hope this helps :)
I was also looking for this and found this question, since there is no real answer to the problem I kept my search on the Internet and found this answer at the Ionic Forum from ozexpert:
var url = "";
if(ionic.Platform.isAndroid()){
url = "/android_asset/www/";
}
I've used it to load a 3D model and its textures.
update: ionic 2 beta (version date 10 Aug 2016)
You must add prefix to local url like this: prefix + 'your/local/resource'.
prefix by platform:
ios = '../www/'
android = '../www/'
browser = ''
we can create an urlResolver provider to do this job.
notice: only change url in *.ts code to access local resource, don's do this with remote url or in html code.
Have fun and good luck with beta version.
An Starter Ioner
It is possible to access local resources using $http.get.
If the json file is located in www/js/data.json. You can access using
js/data.json
Do not use ../js/data.json. Using that only works in the local browser. Use js/data.json will work on both local browser and iOS device for Cordova.

Error #2044: Unhandled IOErrorEvent:. text=Error #2036: Load Never Completed

I have a .swf file which throws this error when I attempt to load it in a browser. Similar to other posts here this is the code:
var mySpite:Sprite = new Sprite();
var button:Loader = new Loader();
var url:String = "images/btnImage.png";
var urlReq:URLRequest = new URLRequest(url);
button.load(urlReq);
....
When I run the actionscript in Flex Build it works fine. Also when I double click the .swf file in the folder where it is stored, it works fine. I don't know why it only doesn't work and throws this error when I load it in a .jsp page.
It's most likely an issue with your path. Remember that the path to the image will be relative to the page which embeds the SWF.
In answer to your comment about having to change the paths when deploying, depending on how you're building and debugging your SWF, it might be possible to use Capabilities.playerType (see docs) to choose the correct path for the current environment. Another alternative might be to put all your image references in a couple of XML files (one local and one remote). As long as the path to the XML file is consistent between local and remote environments, you can update the SWF without worrying about the image paths.

Resources