I had to take over and android app working with phonegap - leaflet/MapQuest/openstreetmap
It broke because MapQuest stopped direct access to tiles and the map wouldn't show up anymore.
I then added the key and modified the code as suggested here : https://developer.mapquest.com/documentation/leaflet-plugins/maps/
I use this code :
<link rel="stylesheet" href="scripts/leaflet-0.7.7/leaflet.css" />
<script src="scripts/leaflet-0.7.7/leaflet.js"></script>
<script src="https://www.mapquestapi.com/sdk/leaflet/v2.s/mq-map.js?key=validKeyNumberThatIWontReveal"></script>
In the following structure :
And my JS :
var popup = L.popup();
var geolocationMap = L.map(b, {
layers: MQ.mapLayer(),
center: [40.731701, -73.993411],
zoom: 12
});
Which workout well when I try it on a browser.
But when I compile on my android phone with Android studio I get this error :
'MQ is not defined'
It used to work fine with scripts/vendor/leaflet-0.7.
My wild guess would be : it somehow doesn't reach the library scripts/leaflet-0.7.7 but I can't see why.
I ended up having 2 problems, one of my own and one that could help any reader :
I wasn't declaring the leaflet script at the right place (the page I declared it in). For reference see : https://developer.mapquest.com/documentation/leaflet-plugins/open/
Problem of URL described there : mapquest direct tile access discontinued
For the sake of easiness this is the answer
It's as simple as changing your tileUrl.
Replace this:
var tileUrl =
'http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png?x';
with this:
var tileUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
Then use as before:
L.tileLayer(tileUrl, { }).addTo(map);
#Joel Harris
Related
I am new to ionic platform. I am trying to implement Google map in my app.Map is displaying when I am testing on browser but when running on real device on Android it is just displaying white screen. I have tried different number of things as recommended in different threads. I have applied changes in config file as mentioned in below link
https://github.com/driftyco/ionic-starter-maps/issues/10
but no luck and have applied changes using different number of meta tags individually as describes in other threads but no luck. In console I can see the error as 'Uncaught ReferenceError: google is not defined'. For this I have tried different thread as mentioned below
Uncaught ReferenceError: google is not defined
but still getting the same error. I am not able to figure this error out.What else I am missing below is the code I am sharing used in my app.Index page code is
This is my controller code
.controller('MapCtrl', function($scope, $ionicLoading) {
google.maps.event.addDomListener(window, 'load', function() {
var myLatlng = new google.maps.LatLng(37.3000, -120.4833);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myDiv=document.getElementById("map");
var map = new google.maps.Map(myDiv, mapOptions);
});
})
and below are the lines I have added in config file as recommended in different threads
<access origin="*"/>
<access origin="http://maps.google.com"/>
<access origin="https://maps.google.com"/>
<access origin="http://*.googleapis.com"/>
<access origin="https://*.googleapis.com"/>
Any help
It seems that you haven't well imported Google Maps in the file index.html.
The issue is the line :
<script src="//maps.google.com/maps/api/..."></script>
On a browser it will load this script : http://maps.google.com/maps/api/... since you are serving the file through http.
But on a device, you are serving the file through file:// so it will try to load this script : file://maps.google.com/maps/api/...
That is not available.
So you need to specify https like this :
<script src="https://maps.google.com/maps/api/..."></script>
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.
While developing application on SAPUI5 Mobile App for cross platforms Android using PhoneGap I am facing issue like:
faile:///android-asset/www/resources/sap-ui-core.js:Line 117:
Uncaught TypeError: Cannot read property 'Label' of undefined.
My Code is like:
var lab=new sap.m.Label({text: "From :",width:"100px"});
var dat1= new sap.m.DateTimeInput("dt1",{placeholder:"mm/dd/yyyy",value:before,valueFormat : "MM/dd/yyyy",displayFormat : "MM/dd/yyyy"});
var hb= new sap.m.HBox({items:[lab,dat1]});
var lab1=new sap.m.Label({text: "To :",width:"100px"});
var dat2= new sap.m.DateTimeInput("dt2",{placeholder:"mm/dd/yyyy",value:today,valueFormat : "MM/dd/yyyy",displayFormat : "MM/dd/yyyy"});
var hb2 = new sap.m.HBox({items:[lab1,dat2]});
The not loading sap.m.Label, sap.m.Button....so on .
Could please suggest me to avoid this issue.
I have added sap-ui-core.js at myproject/assets/resources/
Thanks in Advance!
As mentioned in the comments the sap.m libraries were missing as resources and in the bootstrap. Keep in mind that sap-ui-core.js is only the starting point
of the UI5 Framework but not the whole framework. Including only this file to your project is not sufficient.
Make sure that you always include all necessary files (Runtime Version) to your ressources. You can get the latest from the official OpenUI5 site. If you only need the sap.m controls you can use the stripped-down UI5 Runtime Mobile version.
A proper bootstrap could look like this:
<script
id="sap-ui-bootstrap"
src="path/to/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m">
I am trying to disable animations in Ionic Framework for Android OS. I have tried:
<body ng-app="myApp" animation="{'no-animation': ionic.Platform.is('android')}">
This doesn't work. When I change animation to ng-animation, it adds the class "no-animation" to navbar but doesn't disable the animation. Is there any way I can target specific OSes in Ionic Framework?
Check out Ionic.Platform: http://ionicframework.com/docs/api/utility/ionic.Platform/ Also, the Device plugin in general for Cordova could help.
I used some vanilla javascript to add the attribute which worked. Although I am not so sure if it is the proper way to do. Here is the code added to index.html file:
<script>
var noAnimation = ionic.Platform.is('android'),
body = document.getElementById("bd"),
navbar = document.getElementById("nb");
if(noAnimation) {
body.setAttribute('animation', 'no-animation');
navbar.setAttribute('animation', 'no-animation');
}
</script>
I am using AngularJS with Trigger.io to develop a mobile application for both iOS and Android.
When I try to open a link that looks like this:
<a ng-href="#/offers/{{featured_offer.Id}}"></a>
It works perfectly fine on iOS, but on Android I get this message in the trigger console, and the link is not navigated to:
[WARNING] Attempted to open a URL which could not be handled: unsafe:content://io.trigger.forge722b6464a0e211e2ba9d12313d00dc45/src/index.html#/offers/8
How can I get this to work in Android the same as it works in iOS?
Looks like Angular adds unsafe: to url schemes it doesn't recognise, I think you want to include something like:
app.config(function($compileProvider){
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|content):/);
});
Which adds content: to the accepted url schemes.
I had this same problem, specifically with trying to display an img with a src of a file returned by forge.file.getImage. Angular adds unsafe: to the content: prefix of the local img URL, and as connorhd said, you need to add content: to the url whitelist.
Note that compileProvider's API has changed with recent versions of Angular, so I'm commenting here in case anyone else finds an updated version of this workaround useful.
app.config(['$compileProvider',
function($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|content|blob):|data:image|/);
// note: you'll also have to do imgSrcSanitizationWhitelist if you want to use general links as well as ng-src on images.
}]);
I too had this problem just add sanitizer in you config.xml
var app = angular.module( 'myApp', [] )
.config( [
'$compileProvider',
function( $compileProvider )
{
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
// Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
}
]);