Air StageWebView Leaflet map images are jagged on android

Question

i wanted to incororate a Leaflet Map into an ios and android air mobile application using the StageWebView class. Unfortunately the quality of the map images is so jagged, that it is hard to make out the streetnames. There seems to be some minor scaling going on. For test purposes i used the Leaflet tutorial mal at http://leafletjs.com/examples/quick-start-example.html

When viewed in the Android browser ( chrome ) the images look fine. Here is some simple code to show the issue:

package  {
import flash.display.MovieClip;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.media.StageWebView;    
import flash.geom.Rectangle;
import flash.desktop.NativeApplication;
import flash.utils.setTimeout;
public class Main extends MovieClip{

    private var _stageWebView:StageWebView 
    public function Main() 
    {

        stage.align = StageAlign.TOP_LEFT;
        stage.scaleMode = StageScaleMode.NO_SCALE;
        setTimeout( init,  100 );

    }
    private function init():void {
        _stageWebView = new StageWebView();
        _stageWebView.stage = this.stage;
        _stageWebView.viewPort = new Rectangle( 0, 0, stage.stageHeight, stage.stageWidth );
        _stageWebView.loadURL( "http://leafletjs.com/examples/quick-start-example.html" );
    }
}

}

Any ideas? Does it have to do with a resolution problem maybe?

Thanks

Answer 1

The problem that you got is a rendering problem which you can avoid by enabling hardware acceleration (force GPU rendering) when it's supported of course.

Beginning in Android 3.0 (API level 11), the Android 2D rendering pipeline supports hardware acceleration, meaning that all drawing operations that are performed on a View's canvas use the GPU.

So to force GPU rendering, you can :

1 - Enable hardware acceleration in your application's manifest file, where you should set the android:hardwareAccelerated attribute of the application element to true :

<android>
    <manifestAdditions> 
        <![CDATA[ 
            <manifest> 
                <application android:hardwareAccelerated="true"/> 
            </manifest> 
        ]]> 
    </manifestAdditions> 
</android>

And this is an example of a full manifest file (my test browser-app.xml) :

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<application xmlns="http://ns.adobe.com/air/application/19.0">
    <id>browser</id>
    <versionNumber>1.0.0</versionNumber>
    <versionLabel/>
    <filename>browser</filename>
    <description/>
    <name>browser</name>
    <copyright/>
    <initialWindow>
        <content>browser.swf</content>
        <systemChrome>standard</systemChrome>
        <transparent>false</transparent>
        <visible>true</visible>
        <fullScreen>false</fullScreen>
        <renderMode>auto</renderMode>
        <autoOrients>true</autoOrients>
    </initialWindow>
    <icon/>
    <customUpdateUI>false</customUpdateUI>
    <allowBrowserInvocation>false</allowBrowserInvocation>
    <android>
        <manifestAdditions>
        <![CDATA[
            <manifest>
                <uses-permission android:name="android.permission.INTERNET"/>
                <application android:hardwareAccelerated="true"/>
            </manifest>
        ]]>
        </manifestAdditions>
    </android>
</application>

then you have just to publish your AIR app, you will get something like this :

and you can see the result when I comment <application android:hardwareAccelerated="true"/> :

2 - You can also force GPU rendering from the Developer Options of your Android device :

and you can get the same result even when <application android:hardwareAccelerated="true"/> is commented :

That's all !

Hope that can help.