Develop Reference

How to download and get offline tiles in ionic 3 android app?

I am trying to develop a hybrid ol3 map application using ionic3 with angularjs. I have generated xyz tiles of the map service which I was able to use for online maps. When I tried using them for download to a local directory of mobile and use them I am facing issues. Kindly provide any help which is much appreciated. I I could not trace any errors. Kindly suggest me how to check if any errors to test the maps.
//For downloading the image from server and stores it into mobile directory.
this.file.createDir(this.file.externalRootDirectory, 'Offline/Maps/custom_', true).then((files) => {
this.file.createDir(this.file.externalRootDirectory, 'Offline/Maps/custom_/02_02', true).then((files) => {
}).catch((err) => {
});
}).catch((err) => {
});
const imageURL = 'https://server.com/documents/ionic/path_track/maps/0041_0041.jpeg';
const fileTransfer: FileTransferObject = this.transfer.create();
const imageName = imageURL.split('/').pop();
//alert(imageName+"#"+this.file.externalRootDirectory);
//alert(imageName);
fileTransfer.download(imageURL, this.file.externalRootDirectory+'Offline/Maps/custom_07/02_02/'+imageName).then((entry) => {
//loader.dismiss();
//this.showOfflineButton = true;
}, (error) => {
let alert = this.alertCtrl.create({
message: 'Map is not downloaded '+JSON.stringify(error),
buttons: ['Ok'],
enableBackdropDismiss: false,
cssClass:'alert-error'
});
alert.present();
});
//For retrieving image from the mobile directory and to display into mobile app.
var config = {
"bounds": {
"left" : 68.1060582899974,
"bottom" : 6.72246026992798,
"right" : 97.7525939941406,
"top" : 37.0967391635301
}
};
var bounds = [config.bounds.left, config.bounds.bottom, config.bounds.right, config.bounds.top];
var resolutions = [
0.1186495269281333,
0.0593247634640666,
0.0296623817320333,
0.0148311908660167,
0.0074155954330083,
0.0037077977165042,
0.0018538988582521,
0.000926949429126,
0.000463474714563,
0.0002317373572815,
0.0001158686786408,
0.0000579343393204,
0.0000289671696602,
0.0000144835848301,
0.000007241792415
];
var projection_epsg_no = 4326
var layername = 'seamless_xyz1';
var tileGrid = new ol.tilegrid.TileGrid({
extent: bounds,
resolutions: resolutions,
origin: ol.extent.getTopLeft(bounds),
projection: 'EPSG:4326',
tileSize: [256, 256]
});
var view = new ol.View({
extent: [55.948355423604156, 4.853611184459009, 101.73937104860416, 38.07626743445901],
zoom: 10,
center: [78.48695, 17.41217],
projection: 'EPSG:4326',
resolutions: resolutions
});
var tms_source = new ol.source.XYZ({
projection: 'EPSG:4326',
tileGrid: tileGrid,
url: this.file.externalRootDirectory+'/Offline/Maps/custom_{z}/{x}/{-y}.jpeg'
//url: this.file.externalRootDirectory+'/Offline/Maps/custom_07/02_02/0041_0043.jpeg' (If I am giving static image name then its coming fine but not able to do it dynamically.)
});
var basegroup = new ol.layer.Tile({
source: tms_source,
extent: bounds
});
var mapview;
if(this.Source_lat == undefined || this.Source_long == undefined){
this.current_location1 = 'Location is not available.';
mapview = new ol.View({
projection: 'EPSG:4326',
center: [82.491,21.899],
extent: [66.2329, 7.68083, 98.2223, 39.03874],
maxZoom:16,
minZoom: 8,
zoom: 8
});
}else{
this.current_location1 = this.Source_lat+', '+this.Source_long;
mapview = new ol.View({
projection: 'EPSG:4326',
center: [this.Source_long,this.Source_lat],
extent: [66.2329, 7.68083, 98.2223, 39.03874],
maxZoom:10,
minZoom: 10,
zoom: 10
});
}
map = new ol.Map({
target: 'offline_map',
controls: ol.control.defaults({
zoom: false,
attribution: false,
rotate: false
}),
layers: [basegroup, jsonLayer_net1, jsonLayer_net],
overlays: [jsonoverlay],
view: mapview
});
Thanks in advance

Ionic Google Map Marker won't appear in android device but appears in the browser

I'm using Ionic 3. I tried running my app in the browser and the markers can be seen. When I run it in my android device, only the current location was marked. Any answers why it wasn't found in my android device? It worked perfectly in my browser.
displayGoogleMap() {
//get current location
this.geolocation.getCurrentPosition().then((resp) => {
let latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: latLng
});
this.addInfoWindow(marker, 'Current Location');
}).catch((error) => {
console.log('Error getting location', error);
});
}
my displayGoogleMap() works but when I'll add multiple markes, it doesn't appear already.
addMarkersToMap(bank) {
console.log('bank: '+bank['id']+'lat: '+bank['address']['latitude']+' longi: '+bank['address']['longitude']);
let position = new google.maps.LatLng(bank['address']['latitude'], bank['address']['longitude']);
let mapOptions = {
center: position,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: position
});
this.addInfoWindow(marker, bank['institution']);
}
addInfoWindow(marker, content){
let infoWindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', () => {
infoWindow.open(this.map, marker);
});
}
retrieveBloodBanks(){
var secret='aaaaaaaaaaaa';
// return new Promise(resolve => {
this.http.get('http://asdfghjk.aaa.aa.aa/api/institutions?secret='+secret)
.map(res => res.json())
.subscribe(data => {
this.bankList = data;
console.log( 'rtvr bank: '+this.bankList);
for (let bank of this.bankList['institutions']) {
console.log(bank['id']);
this.addMarkersToMap(bank);
}
});
// });
}
You're a big help to my thesis if you could help me.

You, need to remove map option in addMarkersToMap() function,
addMarkersToMap(bank) {
console.log('bank: '+bank['id']+'lat: '+bank['address']['latitude']+' longi: '+bank['address']['longitude']);
let position = new google.maps.LatLng(bank['address']['latitude'], bank['address']['longitude']);
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: position
});
this.addInfoWindow(marker, bank['institution']);
}

ionic apk file not getting location but the system show location

When I am running ionic apk file in mobile I'm not getting my location but the system show location. What is the problem?
Module.js file
angular.module('ionic.example', ['ionic'])
.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
function initialize() {
var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!/a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
$scope.map = map;
}
google.maps.event.addDomListener(window, 'load', initialize);
$scope.centerOnMe = function() {
if(!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function(error) {
alert('Unable to get location: ' + error.message);
});
};
$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};
});
Here it is not working after installing apk file. On clicking the find me button it is loading ..... but not showing location
This is my code. When I run the browser it is working fine but after build apk file it is not showing details. Can you guys tell me the what the reason is?

The permissions are set correctly in your androidManifest? you need:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
Try to connect the device to pc and use chrome://inspect to see the error.

Autocomplete does not work in mobile

Google api Autocomplete does not work in mobile but work perfectly in browser in ionic framework. In mobile it take auto value on long press but not on just tap.
`var autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, options);
var autocompleteto = new google.maps.places.Autocomplete(inputto,options);
google.maps.event.addListener(autocompleteFrom, 'place_changed', function() {
var place = autocompleteFrom.getPlace();
$rootScope.fromLat = place.geometry.location.lat();
$rootScope.fromLng = place.geometry.location.lng();
$rootScope.from = place.formatted_address;
$scope.placesfrom = $rootScope.from;
fromlat = $rootScope.fromLat;
fromlng = $rootScope.fromLng;
/*var googlemaphome = document.getElementById('googlemap-home');
var Map = new google.maps.Map(googlemaphome,mapOptions);
var posfrom = new google.maps.LatLng(fromlat,fromlng);
var frommarker = new google.maps.Marker({
icon: 'img/marker.png',
position: posfrom,
});
frommarker.setMap(Map);
Map.setCenter(posfrom);
$scope.Map = Map;*/
var Mapoptions ={
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
zoomControl:false,
draggable:true,
mapTypeControl:false,
scaleControl:false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:true
}
var bounds = new google.maps.LatLngBounds();
var googlemaphome = document.getElementById('googlemap-home');
var Map = new google.maps.Map(googlemaphome,Mapoptions);
var marker;
var markers = [
[fromlat,fromlng],
[28.6328,77.2197]
];
for(var i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
icon: 'img/marker.png',
map: Map
});
}
Map.fitBounds(bounds);
x=1;
checkstatus();
$scope.$apply();
});
google.maps.event.addListener(autocompleteto, 'place_changed', function() {
var place = autocompleteto.getPlace();
$rootScope.toLat = place.geometry.location.lat();
$rootScope.toLng = place.geometry.location.lng();
$rootScope.to = place.formatted_address;
$scope.placesto = $rootScope.to;
tolat = $rootScope.toLat;
tolng = $rootScope.toLng;
y=1;
checkstatus();
$scope.$apply();
});
$scope.oncurrent = function(){
$rootScope.currentpoint = currentpos;
$rootScope.currentflag = 1;
$scope.startpoint = currentpos;
$scope.placesfrom = currentpos;
geocoder.geocode( { 'address': currentpos}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK){
$rootScope.currentlat = results[0].geometry.location.lat();
$rootScope.currentlng = results[0].geometry.location.lng();
}
});
x=1;
checkstatus();
};
`

Be sure that you allow google api communication. Perhaps the request to google are blocked.
Maybe the transfer restriction are stronger on your device than in your browser
Install whitelist plugin with
ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git
Then add this line to your config.xml(It is recommonded to add the specific URL, but for test case it's easier to allow everything)
<access origin="*"/>
And depends on usecase it is necessary to set the correct Content-Security-Policy in the header part of your index.html. But I think this isn't necessary in your situation.
<meta http-equiv="Content-Security-Policy" content=".....">

location in Ionic project for android

In a simple Ionic app I have to get current location on map. It's works fine in browser when i click find me, but it's not working on actual Android device.
I'm using the following code
View.html
<ion-view view-title="{{navTitle}}">
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-footer-bar class="bar-stable">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
</ion-footer-bar>
</ion-view>
controllers.js
.controller('googlemap', function($scope, $ionicLoading, $compile) {
$scope.navTitle = 'Google Map';
$scope.$on('$ionicView.afterEnter', function(){
if ( angular.isDefined( $scope.map ) ) {
google.maps.event.trigger($scope.map, 'resize');
}
});
function initialize() {
//var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
var myLatlng = new google.maps.LatLng(18.520430300000000000,73.856743699999920000);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Pune(India)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
$scope.map = map;
}
initialize();
$scope.centerOnMe = function() {
if(!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function(error) {
alert('Unable to get location: ' + error.message);
});
};
$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};
})
Also in my device on the device Location but still I have problem.I got following output on my screen for long time.

Isn't it easier to just use the ngCordova $cordovaGeoLocationPlugin ? You can get the position from this plugin ( latitude and longitude) and then pass this in GoogleAPI. I think it will be lot easier that way.
ngCordova geoLocationPlugin
Just a suggestion.

This example works perfect in case you start the app with GPS on. But starting with GPS off in you device, and after that, entering in the app and selecting GPS on, the function returns always GPS timeout ERROR = 3. Any solution for that?
I have posted this error here:
When I start the App with GPS off , and later GPS is activated, Location is not detected