Working on mapboxgl with ionic3, angular4 and cordova.
I have build .apk and .ipa files. I installed .apk file in my android device it works as expected (ie mapbox tiles, my icons (I have added some icons to custom some functionalities for eg. added an icon to switch the map style) and my markers are loaded successfully).
When I install the .ipa file in my Iphone my icons only loaded but mapbox tiles not getting loaded. Also the markers. I get blank white screen.
What is wrong with my implementation?
let data = {myJson data};
mapboxgl.accessToken = 'My access token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
attributionControl: false,
center: [-74.50, 40],
zoom: 12
});
map.on('load', function () {
map.addSource("place", {
type: "geojson",
data: data,
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});
map.addLayer({
"id": "places",
"type": "circle",
"source": "place",
"paint": {
"circle-radius": 7,
"circle-color": "#32CD32",
"circle-stroke-width": 4,
"circle-stroke-color": "#FFFFFF"
}
});
});
Can you help with me with the code added here?
This code works fine in Android. I mean map is loading as expected. But in Iphone My app is working but Map is not loading. Any guess what is wrong?
please check in info.plist for key MGLMapboxAccessToken is set with proper token. this is very important to set this value.
If you don't have source code even thought you can check by extraction IPA. below are step to extract IPA.
Change extension from IPA to ZIP.
Extract zip file
In payload you will find app. right click on it and click on show package contents
Open info.plist and search for key and it's value.
I hope you will get your answer
Related
I have tried previewanyfile cordova plugin to open files from external url's in Ionic 5 application. It works well with android but on IOS I noticed sometimes it doesnt preview/open PDF files. Just a grey screen with the file name on it. But strangely some PDF files open.
file preview screen
previewProductDocument(url: string) {
const loading = await this.loadingController.create({
message: 'Loading document...',
});
loading.present().then(() => {
this.previewAnyFile.preview(url).then((res) => {
loading.dismiss();
}).catch((err) => {
loading.dismiss();
this.presentToast('Error previewing the document try later', 'danger');
});
});
}
This is the plugin I have used
https://ionicframework.com/docs/native/preview-any-file
capacitor version "#capacitor/core": "^2.2.0",
Noticed this behavior only in IOS simulator + on Real IOS device.
Any idea what is going on here?
Special character (%2F) in the link is the cause of the issue.
For a quick win; either change the link or sanitise before processing.
In this case url.replace('%2F', '/') should work.
However, another link may, probably, contain a different character. Without being 100% sure, it worth a try decodeURI, which is decodeURI(url).
My GeoJSON file is supposed to cover the entire world. Here is the GeoJSON file:
{ "type": "MultiPolygon",
"coordinates": [
[[[-169.4,58.8], [-168.0,83.4], [188.4,83.3], [194.0,-72.8], [-166.6,-73.6], [-169.4,58.8]]]
]
}
The name of the file is example.GeoJSON.
I keep getting the following error when uploading the file:
Your routing app coverage file is invalid. For more information see the Developer Guide.
What is wrong with the above file?
My app has a mapkit that shows the annotation of a particular place depending on the place that is chosen. When tapping the map in the app, Apple Maps opens up and shows the directions to that place from the current position. Do I also actually need to upload the .GeoJSON file?
Based on the following:
1) The Latitude goes from -90 into +90 (i.e. this is where you stand on the middle of the globe going either up or down) (AKA vertically).
2) The Longitude goes from 0 to 360 (i.e. standing where you are, and going around the globe in a circle horizontally.
3) The Polygon usually has 4 points, however, in this case it would be 5 whereas the first and last points are the same to denote a closed-polygon.
4) Adding the apple requirements of ( "type": "MultiPolygon" ) plus coordinates,
5) You would end up with the following contents of a file:
{ "type": "MultiPolygon",
"coordinates": [
[[
[-360.0000,-90.0000]
,[-360.0000, 90.0000]
,[-000.0000, 90.0000]
,[-000.0000,-90.0000]
,[-360.0000,-90.0000]
]]
]
}
Therefore, start your text editor, and then copy and paste the above, save the file into World.geojson and then upload.
Mine worked fine.
Enjoy!
Heider
I've just started using the Angular Leaflet directive (http://tombatossals.github.io/angular-leaflet-directive/#!/) and I'm trying to integrate this within an Ionic project.
On the browser, everything works fine: the map tiles are loaded in. When I compile the app with XCode and run in within the iOS simulator, the tiles do not load as expected.
When I use the inspector, I noticed that the html for the tiles that are loaded in is of the following form:
<img class="leaflet-tile leaflet-tile-loaded" src="//b.tile.openstreetmap.org/18/131008/87171.png" style="height: 256px; width: 256px; left: 791px; top: -114px;">
Notice the protocol is missing with the src property. Within the Cordova wrapper, the app assumes that this should be file://, and naturally fails to load in the tiles.
Is there any way to either:
Explicitly add the http:// protocol to the img src?
Set Cordova to default to http:// with URI's that start with //?
GitHub issue: https://github.com/tombatossals/angular-leaflet-directive/issues/460
I don't know the exact cause of the problem, but it seems to be an issue with the latest version of the leaflet-directive.
As a current work-around until the issue is fixed, use angular-leaflet v0.7.7 instead of the latest.
If you use bower, change the bower.json line to
"angular-leaflet": "0.7.7"
make sure it's not '~0.7.7'
Hope this helps!
This issue seems to be fixed in the current version of the Angular Leaflet Directive.
I am currently using this code in my controller and it works in the browser as well as on device:
angular.extend($scope, {
center: {
lat: 52.367215,
lng: 4.893036,
zoom: 1
},
maxbounds: {},
defaults: {
maxZoom: 16,
minZoom: 12,
tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
tileLayerOptions: {
opacity: 0.9,
detectRetina: true,
reuseTiles: true,
},
scrollWheelZoom: true
}
})
I'm using the latest version of Trigger.io and have my mobile application configured to require iOS 5.0 or higher, and I've got all the icons loaded in the config.json file, e.g:
"modules": {
…
"icons": {
"android": {
"36": "path/to/ICON_36sq.png",
"48": "path/to/ICON_48sq.png",
"72": "path/to/ICON_72sq.png"
},
"ios": {
"57": "path/to/ICON_57sq.png",
"72": "path/to/ICON_72sq.png",
"114": "path/to/ICON_144sq.png",
"512": "path/to/ICON_512sq.png",
"prerendered": true
}
},
…
However, when trying to deploy the application to the App Store using the Application Loader, I get the following error:
iPhone/iPod Touch: Info.plist: Unable to verify icon dimensions, no icon found. You must define CFBindleIcons, CFBundleIconFiles, CFBundleIconFile, or provide a default Icon.png that us 57x57.
The icon file does exist and is correctly configured for my app, so it's not a issue of the file not existing. It also works correctly on the simulator and my development device, just not when releasing to the app store.
Any help is appreciated.
POSSIBLE CAUSE: If I dig into the IPA and look at the Plist.info file in the resulting package created by trigger.io, the MinimumOSVersion is set to 4.3, and not respecting what I have in my config.json file (minimum version I've set to is iOS 5.0).
After more research, I found that I can deploy the app successfully using v1.4.36 and below. Looks like the refactor in v1.4.37 has broken the Minimum OS Requirements again!
This was a bug in the Trigger.io platform: we deployed a fix in v1.4.44 - see https://trigger.io/docs/current/api/release_notes.html
There are currently two ways to define custom icon file names in an iOS app. After recreating an Xcode project we use internally, the newly generated Info.plist only conformed to the new style, which causes Application Loader problems.
v1.4.44 restored the old-style icons configuration.
You need to use relative paths from the 'src' directory rather than assuming a baseUrl. So use "path/to/ICON_36sq.png" not "/path/to/ICON_36sq.png"
If you look at "development/ios/build_steps/icons.json" you'll see something like that.
[
{
"do": {
"copy_file_from_src": {
"filename": "{{plugins.icons.config.ios.57}}",
"dest": "normal.png"
}
}
},
{
"do": {
"copy_file_from_src": {
"filename": "{{plugins.icons.config.ios.72}}",
"dest": "ipad.png"
}
}
},
{
"do": {
"copy_file_from_src": {
"filename": "{{plugins.icons.config.ios.114}}",
"dest": "retina.png"
}
}
},
{
"do": {
"copy_file_from_src": {
"filename": "{{plugins.icons.config.ios.144}}",
"dest": "ipad-retina.png"
}
}
},
{
"do": {
"icons_handle_prerendered": {}
}
}
]
As shown above, the build is copying the 57px icon in your configuration to "normal.png" and the 72px to "ipad.png", but for some reason the Application Loader is not recognizing the CFBundleIconFiles entry in the Info.plist.
I solved my problem using a postbuild hook to copy the 57px icon to the expected default name "Icon.png" and the 72px icon to "Icon-72.png" (the file names are case sensitive). The files have to be copied to the "development/ios/device-ios.app/" folder.
I am working on an application with PhoneGap (now Apache Cordova, with the version of 2.0), and using the PhoneGap File API to write file.
The File API I use could be referenced at:
http://docs.phonegap.com/en/2.0.0/cordova_file_file.md.html#File
I use Ripple Emulator (0.9.9beta) from here: https://developer.blackberry.com/html5/download to test my application in chrome.
But I find Ripple could not handle the PhoneGap File API correctly.
For example:
I want to create a file (root/foo.json) at the PERSISTENT directory
function onSuccess(fileSystem) {
fileSystem.root.getDirectory("dir", {create: true}, function(dirEntry){
dirEntry.getFile("foo.json", {create: true}, function(fileEntry){
fileEntry.createWriter(function(writer){
writer.write(JSON.stringify(fooData));
}, onfail);
}, onfail);
}, onfail);
}
function onfail(error)
{
console.log(error.code);
}
// request the persistent file system
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, onfail);
It works fine on iOS simulator, which did create the right file at the right place, but in the Ripple Emulator running in chrome, I just got a onfail callback, and got error code 10 (FileError.QUOTA_EXCEEDED_ERR).
I also found someone with the similar question here: Is it able to test phonegap application outside emulator?
But still no answer.
Does Ripple emulator currently not work correctly for PhoneGap API? Or did I missed some setting?
Problem found. I need to grant quota before using the PERSISTENT filesystem object.
https://developers.google.com/chrome/whitepapers/storage#persistent
// Request Quota (only for File System API)
window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) {
window.webkitRequestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
}, function(e) {
console.log('Error', e);
});
It seems Ripple-UI didn't do this for me (I checked the source code at lib/ripple/fs.js) . That's why I always get a FileError.QUOTA_EXCEEDED_ERR.