I recently started to give Ionic a go and I use Angular Leaflet Directive . for the geolocation to display
All is okay, but I have a problem what I am not able to resolve.
Everything is working on pc.
But on mobile the paths are not showing up, and the map is gray
My Cotroller
.controller('ShowCtrl', function($scope, $stateParams, $ionicLoading, $timeout, $http, leafletData) {
$ionicLoading.show({template: 'Downloading...'});
$scope.center = {};
$scope.paths = {};
$scope.markers = {};
$scope.defaults = {};
$scope.map = {};
$http({
method: 'GET',
url: 'https://api.foursquare.com/v2/venues/'+$stateParams.id,
params: {
'client_id' : 'xxx',
'client_secret' : 'xxx',
'v' : '20130815',
}
}).then(function successCallback(data) {
$timeout(function () {
$scope.place = data.data.response.venue;
$scope.title = data.data.response.venue.name;
angular.extend($scope, {
center: {
lat: $scope.lat,
lng: $scope.long,
zoom: 12
},
paths: {
p1: {
color: '#ff612f',
weight: 5,
latlngs: [
{ lat: data.data.response.venue.location.lat, lng: data.data.response.venue.location.lng },
{ lat: $scope.lat, lng: $scope.long }
],
}
},
markers: {
destination: {
lat: data.data.response.venue.location.lat,
lng: data.data.response.venue.location.lng,
message: data.data.response.venue.name,
focus: true,
draggable: false,
icon: {
iconUrl: 'lib/leaflet/dist/images/marker-icon2.png',
}
},
mylocation: {
lat: $scope.lat,
lng: $scope.long,
icon: {
iconUrl: 'lib/leaflet/dist/images/marker-icon.png',
}
}
},
defaults: {
scrollWheelZoom: false,
zoomControl:false
}
});
$ionicLoading.hide();
}, 2000);
});
});
Map
<leaflet id="map" center="center" paths="paths" markers="markers" defaults="defaults"></leaflet>
Could please someone give me a hand?
Which Cordova version are you using?
A recent version now forces the use of cordova-plugin-whitelist . Because of this, you have to allow each and every HTTP request you make.
Leaflet tiles are fetched from the web, so you have to allow them.
The standard & recommended meta for this is:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">
Just include this line in the head
of your HTML, and it should work better.
Okay the problem was that i had to initialize tileLayer before the ajax call
like this
$scope.defaults = { zoomControl: false, layerControl: false, tileLayer: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'};
$http({
method: 'GET',
url: 'https://api.foursquare.com/v2/venues/'+$stateParams.id,
params: {
'client_id' : 'xxx',
'client_secret' : 'xxx',
'v' : '20130815',
}
}).then(function successCallback(data) {
$timeout(function () {
$scope.place = data.data.response.venue;
$scope.title = data.data.response.venue.name;
angular.extend($scope, {
markers: {
destination: {
lat: data.data.response.venue.location.lat,
lng: data.data.response.venue.location.lng,
message: data.data.response.venue.name,
focus: true,
draggable: false,
icon: {
iconUrl: 'lib/leaflet/dist/images/marker-icon2.png',
}
},
mylocation: {
lat: $scope.lat,
lng: $scope.long,
icon: {
iconUrl: 'lib/leaflet/dist/images/marker-icon.png',
}
}
}
});
$ionicLoading.hide();
}, 2000);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.