AIR 3 MapView Native Extension on iOS


For quite some time I’ve had my Radar application out on the Android Market, but one of the major annoyances was that the Google Maps component didn’t work on iOS.  So I could never release the application for that platform, despite many “attempts” to get it working.

With AIR 3 we have new feature called Native Extensions, so I asked one of our great Engineering team called Meet Shah to look at this problem and see if we could expose native UI components within an AIR application.  It turns out that Native Extensions don’t just give us the capability to access APIs like Notifications and Bluetooth, but to actually present native UI within our apps.

The goal is to finish the Native Extension for Android, iOS, Playbook and Desktop platforms and then release the code.  Meet decided to follow the current (deprecated) AS3 API for Flash so that your existing applications will continue to work ongoing, great idea!

 

, , ,

  • Flavio O Carmo

    Hi, can you share this source code? the pinch zoom on google maps is awesome your demo!

  • http://twitter.com/milkisevil Philip Bulley

    Well done! Looks great… Just wondering, will native extensions be easily interchangeable across platforms? ie. abstracting the native extension’s API so that we can just use a different build script for iOS and Android with no change to the actual actionscript code?

  • Meet

    Yes thats correct. You can even package your application such that your application will contain code for all platforms and depending on the platform your application is running on, the code corresponding to that platform will get picked and executed.

  • http://www.pena.ro marius

    we want source :D thx

  • http://www.blog.rivellomultimediaconsulting.com/posts/considering-flash-to-mobile-development Considering Flash-To-Mobile Development

    [...] Adobe AIR 3.0 Native Extension – Demo Mapview on iOS [...]

  • http://www.pena.ro marius

    code code code code :D

  • http://www.remotesynthesis.com/post.cfm/cool-stuff-with-the-flash-platform-9-19-2011 Cool Stuff with the Flash Platform – 9/19/2011 | Remote Synthesis

    [...] Adobe evangelist Mark Doherty offers a video preview of his AIR 3 MapView native extension on iOS. [...]

  • Pena Marius

    just subscribing

  • http://pulse.yahoo.com/_TFYUXG3V72V4EB7Z4HU6CA5M5A marius

    I would kill for a google maps android native extension. Let us know how it goes and asap :)

  • http://profiles.google.com/dadmyshitsays Sam Rivello

    WOW! This all sounds great. But how do we compare Flash-To-Mobile (AIR) vs Native (Objective-C) Development? And if we DO choose AIR, how do we decide to start with Flash or Flex?

    Here are two great articles!

    Great Article “Considering Flash-To-Mobile Development”
    http://www.blog.rivellomultimediaconsulting.com/posts/considering-flash-to-mobile-development

    Great Article “Flash-To-Mobile Dev: Flash vs. Flex”
    http://www.blog.rivellomultimediaconsulting.com/posts/flash-to-mobile-dev-flash-vs-flex

  • Anonymous

    Hi Sam,  That would depend greatly on the application and how you intend to target devices.  Flex is great for business line applications that need to reach across platforms and deliver a great consistent experience.

    Using pure Actionscript and/or timeline Flash content is better for gaming, branded pieces etc.  It does require extra effort though, due to the functionality baked into Flex for handling multiple resolutions and pixel densities.

    Mark

  • Anonymous

    Hi Marius,  We should have something like this for Android but there is a problem with the SDK that we’ve found.  It seems that we may not be able to use the MapActivity on Android out of the box.  More soon on this.

  • Marco

    Hi,
    How to get to beta tests of AIR 3 with Stage3D for mobile? I am planning a new game, right now I am ready to go with HaXe but if AIR’s performance would be good I would to go with AIR. So I would like to check its performance on mobile!

  • http://extensionsforair.com/2011/10/overview-of-native-extensions/ Overview of Native Extensions « Native Extensions for Adobe AIR

    [...] twitter to keep up to date with what Adobe are doing in this area. He’s currently working on exposing the map applications on both iOS and Android. svarrallView My Other [...]

  • http://blog.hjaelpmignu.dk/2011/10/flash-platform-is-dead-long-live-the-flash-platform/ Flash Platform is dead. Long live the Flash Platform — Hjælp mig nu

    [...] and AIR is then able to attach to it and communicate with it. There has already been examples of Map View on iOS and connection to Kinect controller without a proxy. I haven’t tried native extensions in [...]

  • mwoodpecker

    This is really impressive. I’m just working on a way to port our Flex App to iOs and of course it contains a google map view and your solution seems to solve all my problems. I’m experimenting with StageWebView and calling a website which contains a google map and communicating with the site as suggested by Christoph Conraets on his blog.
    The idea of a native extension is great, when you write you follow the (deprecated) AS3 API for Flash I suppose it will also be possible to use all features like marker tracker and so on under iOS?

  • Guillaume

    Hi Mark,
    Any chance to get a piece of code that describes how to display native UI activity (e.g. Contact) on top of a Flex app.

    Thank you,
    G

  • Soonjong, Kang

    How to add UIView ?

  • http://www.buywigonline.com Yesuifen20

    With AIR 3 we have new feature called Native Extensions,
    so I asked one of our great Engineering team called Meet Shah to look
    at this problem and see if we could expose native UI components within
    an AIR application.  It turns out that Native Extensions don’t just give
    us the capability to access APIs like Notifications and Bluetooth, but
    to actually present native UI within our apps.

  • Eduardo

    Any update on this? Would you need extra workforce on this code?

  • Ramsey Tapia

    Very cool. Would definitely like to see the code for this. Quick question though: Were you actually listening to Spice Girls before filming this? ?_?

  • http://www.buywigonline.com Yesuifen20

    vet it working.
    With AIR 3 we have new feature called Native Extensions,
    so I asked one of our great Engineering team called Meet Shah to look
    at this problem and see if we could expose native UI components within
    an AIR application.  It turns out that Native Extensions don’t just give
    us the capability to access APIs like Notifications and Bluetooth, but
    to actually present native UI within our

  • Evan

    Hi Mark, are you able to display UIView inside flash display? How did you do that?

  • http://www.buywigonline.com Yesuifen20

    ability to access APIs like Notifications and Bluetooth, but to actually present native UI within our apps.
    The goal is to finish the Native Extension for Android, iOS, Pla

  • http://www.buywigonline.com Yesuifen20

    UI components within an AIR application.  It turns out that Native Extensions don’t just give us the capability to ac

  • Ayorinde Adesugba

    Very interesting… Any chance of getting the code? I have been trying to figure out how to paint a view from native code in the display list.

  • http://www.jacketoutletsales.com/ moncler outlet

    That is just about the most helpful posts that We’ve go through at any time. Carry on the favorable perform! I’m completely optimistic Let me discover a lot much more of anyone later. moncler outlet  and moncler jackets outlet

  • Anonymous

    This is a good gift for Adobe AIR developer! Thank you for show we can do amazing thing like this in our AIR app. :)

    Anyway, it looks like you get some trouble with it, so you don’t want to expose the code, right? anything I can help?

  • http://twitter.com/tyleregeto Tyler Egeto

    Hi there, this is fantastic. How are you able to show native iOS views mixed with AIR views? I’ve looked through a variety of examples available but no one else is doing this? Any points in the right direction? Do you know of any examples?

    Fantastic work!

  • Mikeciz

    Any follow up on this? Thanks

  • Anonymous

    Any progress on Code ? Is it still Android extension that’s stoping the release of the code ?

  • http://www.facebook.com/ariel.scarpinelli Ariel Scarpinelli

    Flex 4.6 is already out!!! If we can add maps to the flex apps, then no more native apps!

  • Carlo

    Please, I urgently need your code to add Maps into Flash iOS apps… This can do the difference for me… This is my email address: carlobissio@gmail.com

  • Nick

    Hi Mark – this looks great and just what we need – problem is we need it now! :-) Any chance on an update for when this could be deployed for IOS?

    Thanks

    Nick

  • nnamfuak

    Great! News? Can you share the SourceCode?

  • http://twitter.com/tyleregeto Tyler Egeto

    In case anyone else is wonder how to display native iOS UI in an AIR app like this post demos, I’ve posted a very simple solution to it here: http://tyleregeto.com/adobe-air-native-extensions-with-native-ios-ui Hopefully someone finds it useful.

  • Ynfo Apps

    How can i add this on my project? :(

  • http://www.facebook.com/shane.hoffa Shane Hoffa

    Any idea when this would be available?

  • Fabio Biondi

    Hi Mark,

    good luck for your new job.
    Do you know if this extension will never be released?
    Who can I contact to get more information about it?Map are very important, so we need it asap :)

  • nnamfuak

    Thats right it is very intresting and importent for some projects. So please… were can we get new information about it?

  • indo mat

    news??

  • Asdf

    Wow… really glad I didn’t wait for this code to come out.  Really getting more and more disappointed in all things Adobe.

  • Meet

    The iOS mobile project for showing maps onto an AIR application has been hosted at http://code.google.com/p/air-maps-ane/
    Do try it out and let me know in case of any issues.

  • Meet

     Hi marius, the entire project along with source code and binary has been hosted at http://code.google.com/p/air-maps-ane/

  • Shahmeet4

     Please see http://code.google.com/p/air-maps-ane/ for source code and binaries.

  • Guest

    Please see http://code.google.com/p/air-m... for source code and binaries. 

  • Meet

     Hi teerasej,

    I have made it as an open google code project. You can try out the existing features and even contribute to it. Link : http://code.google.com/p/air-maps-ane/

  • Gpared

    Hi,

    Very interesting ANE. Do you have any progress for Android?

  • Meet

    There is an issue with Android’s current implementation. The main Activity where Map view should be loaded needs to be MapActivity and for AIR applications, the main Activity is “Activity”. There is no way we can change it, so no way of doing it on Android :( . It is possible to load map in another activity but the AIR application stage wont be visible in background.

  • ed

    could you post some example code to load a map etc?

  • AP

    This is looking very promising. I am experimenting with these files, and it makes a Map instance. But it is not showing up. I am compiling it using iPhoneOS5.0.sdk. Since Map is not a DisplayObject, I can not use addChild. I tried setting the viewPort, but still not showing. This is what I am doing:
    _map.setSize(new Point(300,200));_map.viewPort = new Rectangle(0,0,300,200);
    Any idea how I can add it, so I can see the map?

    Thanks,

    AP

  • AP

    Just answered my own question. Setting the visible to true did the trick, so this works:
    _map = new Map();_map.setSize(new Point(300,200));_map.setZoom(14);_map.viewPort = new Rectangle(0,0,300,200);_map.visible = true;

    Thanks,

    AP

  • Markus McGee

    Hi Mark,

    Have you guys found away around the MapActivity issue?  I’m having the same issue with not being able to launch a MapActivity from the current Activity.

  • Markus McGee

    What would that process look like or do you have the source to make the map launch?  I think for me letting the map take over the whole stage would be acceptable for now.

  • Anonymous

    Thank a lot, Shahmeet4! I think you should update this article by put this link at the end of content. It’s hard to find your link in comments. :)

  • Anonymous

    Got it to work. Running blazing fast at my ipad2 and my iphone4.
    Looks very promising. I am very interested in contributing with this.

    The code below will center a map in a pin at our office with a title and a description. You have to tap the pin to see the strings.

    import com.adobe.nativeExtensions.maps.Map;
    import com.adobe.nativeExtensions.maps.MapEvent;
    import com.adobe.nativeExtensions.maps.MapType;
    import com.adobe.nativeExtensions.maps.LatLng;
    import com.adobe.nativeExtensions.maps.overlays.Marker;//

    import flash.geom.Point;

    import flash.geom.Rectangle;

    //your class etc

     var _map : Map;

    _map = new Map();
    _map.setSize(new Point(1024,768));
    _map.setZoom(15);
    _map.viewPort = new Rectangle(0,0,1024,768);
    _map.visible = true;
    //Displays a pin marker provided as argument onto the map
    var tmpLatLng:LatLng = new LatLng(-22.90646,-43.10934);
    var _marker:Marker = new Marker(tmpLatLng);
    _marker.title = “Cabana”;
    _marker.subtitle = “www.cabanacriacao.com”
    _map.addOverlay(_marker)
    _map.setCenter(tmpLatLng)

  • Anonymous

    The SVN checkout is giving me nothing. Is that correct? Can I get the source files to contribute?

  • Undo0530

    I also tried creating a native extension that manage MapView and MapActivity on Android, but I only could see a Google’s logo and grid of MapView…
    I found some mismatch caused between Google API key for MapView use and a signature file for AIR packaging.

  • Randy Troppmann

    Can you say if there is any progress on adding polylines?

  • Bcbnb

    how to load advertising in flash air application

    This example tells you how to load ads in flash air applications , including the application of the android ? iphone, ipad  above.

    1.down load the lib from http://code.google.com/p/flash-air-admob-ane-for-ios/downloads/list 
    2.create  a mobile project in flash builder 
    3.add admob.ane to build path 
    4.create a account of http://www.admob.com
    5.add code as the example,and change the gid  ?var gid:String=”a14fde93a405e01″?? to the id of your
    6.api of the lib

    NativeAds.setUnitId
    set the admob ad id .
    example:NativeAds.setUnitId(“a14fde93a405e01″);

    NativeAds.setAdMode(true)
    set if in in test mode.if you are publishing your app,set it true.if you are testing set false

    NativeAds.initAd(0,1,320,50);
    create a ad panel,and x 0,y  1,width  320,height 50.the width and height must according to
    https://developers.google.com/mobile-ads-sdk/docs/admob/intermediate

     NativeAds.showAd(0,1,320,50);
    show ad in rect x 0,y 1,width 320,height 50

    NativeAds.setLandscape(false);
    if want to show portrait ad NativeAds.setLandscape(false),if want to show landscape NativeAds.setLandscape(true).
    call this fun after call  NativeAds.showAd(0,1,320,50);

    NativeAds.hideAd();
    hide ad ,just like visible=false;

    NativeAds.removeAd();
    remove ad just like remove child

    NativeAds.getUUID()
    get mac address 

    mark:air sdk 3.1 and highter,mac computer,flash builder 4.6,micro windows cannot use this lib.
    my iOS sdk path
    /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS5.1.sdk

  • Shahmeet4

    Polyline support has been added since few months : http://code.google.com/p/air-maps-ane/

  • meet

    Yes you can… please drop your feature request on http://code.google.com/p/air-maps-ane/

  • Haris Mairaj

    do you get any solution to compile this in Andriod?
    I got the commented nodes in extension.xml but haven’t got libMapsAndroid.jar library in the ane package.

             
                libMapsAndroid.jar
                air.extensions.MapsExtension
                air.extensions.MapsExtension
             
           

    This is really hot topic to me in these days. I appreciate if you share further information regarding Android ane.

    Thanks,

  • Shane Korin

    Hi all, just a short note to let you know we’ve released an ANE to support native maps across iOS and Android

    You can check it out at our site http://distriqt.com/native-extensions

    Thought this might be helpful for devs who are looking for mapping solutions!