I'm building a meteor / cordova app that consists of a template with a Leaflet map, where the tiles and icons are provided by mapbox (I'm not sure if it's relevant).
The app is using the bevanhunt:leaflet package, and is running fine when deployed on a web browser.
var map; //outside of the template
Template.map.rendered = function() {
L.Icon.Default.imagePath = 'images';
if (!map) {
map = L.map('map', {
doubleClickZoom: false,
zoomControl: false
});
}
var attributionText = "<a href='http://zencity.io/' target='_blank'>ZenCity © </a>" +
"<a href='https://www.mapbox.com/about/maps/' target='_blank'> Mapbox ©" +
" OpenStreetMap</a>";
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: attributionText,
id: 'someID'
}).addTo(map);
//some code to put makers on the map
}
I should say that the markers / popups appear fine (But their images are not present; a minor problem, I will try to take care of that), but the map does not seem to initialize.
Do I need to create the map outside of the Template.map.rendered code? Do I need to add configuration to enable leaflet / mapbox to work with Cordova/android?
Any help would be appreciated here.
Meteor 1.0.4 introduced the App.accessRule setting to mobile-config.js. You need to add the URL for the tile provider to it like this:
App.accessRule('https://*.tiles.mapbox.com/*');
Basically, for security reasons Cordova apps may not connect to any URL they like. This is what this white list is used for. It restricts from what URLs content may be loaded. As the tile URL is different from your app URL it gets rejected by default. Using the App.accessRule setting you allow additional URLs. The supported domain patterns vary slightly between Android and iOS, you can find them in the official docs. Asterisks (*) can (and must) be used as wild cards, here for supporting the dynamic subdomain.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments