Friday, August 19, 2011

ArcGIS Lite API for Flex

The ArcGIS API for Flex is pretty amazing and very powerful, but it is very GIS centric. Flex Programmers have to know for example the difference between mercator and geographical coordinates systems and have to understand the concepts of map layers, etc….
Programmers just want to put dots on maps at a specific latitude and longitude. This is very easy to do say for example using the google map API and folks have been asking for something like that for a while. So, I am please to tell you about an open source project that we have launched on github that is exactly that. A simple mapping API that is based on the core API to enable Flex developers to build mapping applications. The idea to open source the project is to let you see how some high level functions are implemented using the low level API. Here is a quick sample:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:views="com.esri.views.*">
    <fx:Script>
        <![CDATA[
            import com.esri.ags.events.MapEvent;

            private function map_loadHandler(event:MapEvent):void
            {
                map.setCenter([ 40.736072, -73.992062 ])
            }
        ]]>
    </fx:Script>
    <views:ESRIMap id="map" load="map_loadHandler(event)"/>
</s:Application>

In addition, the API is mobile friendly. You can build Android and iOS mapping applications using the Flex API. Here is a mobile sample:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:views="com.esri.views.*">
    <fx:Style source="stylesheet.css"/>
    <fx:Script>
        <![CDATA[
            import com.esri.ags.events.MapEvent;
            import com.esri.events.GeolocationUpdateEvent;

            private function map_geolocationUpdateHandler(event:GeolocationUpdateEvent):void
            {
                map.locationToAddress(event.mapPoint, 50.0);
            }

            private function map_loadHandler(event:MapEvent):void
            {
                map.whereAmI();
            }
        ]]>
    </fx:Script>
    <views:ESRIMobileMap id="map"
                         geolocationUpdate="map_geolocationUpdateHandler(event)"
                         load="map_loadHandler(event)"/>
</s:Application>

As mentioned earlier, the project is on github. So you can clone it, compile it with the core API swc and learn how geocoding or routing is implemented.

The project can use more documentation as, I do write self documenting code! LOL - Sorry, that was not funny since this is supposed to be a stepping stone to the core API that _is_ very well documented. So, I will have to spend more time on this and add more high level functions like “driveTimePolygon”.

Anyway, “git clone” the project and tell me what you think.

Want to give credit where credit is due - Andy Gup started this initiative with his great Starter Project Template.

Just to clarify an important point. This API is for very simple mapping purposes and is NOT maintained by the core team.

24 comments:

polyGeek said...

I'm trying to use FlexAPILite in a mobile app. When I put a inside the I get the following error:

1067: Implicit coercion of a value of type com.esri.views:ESRIMap to an unrelated type Object

When I take it out of I get this error:

'ESRIMap' declaration must be contained within the tag, since it is not assignable to the default property's type 'Array' or element type 'mx.core.IVisualElement'.

Looks like I'm damned if I do and damned if I don't :-)

ThunderHead said...

Can u pls try http://dl.dropbox.com/u/2193160/TestMobApp.fxp ? - adjust project properties

ThunderHead said...

Here is what it looks like:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:views="com.esri.views.*"
title="HomeView">
<views:ESRIMap zoomSliderVisible="false"/>
</s:View>

Zach said...

Awesome as always but i am still waiting on your post about signals?

polyGeek said...

Got it. It was all because of the agslib-SNAPSHOT.swc that was linked in your linked-swc folder. I didn't see that one. It's all good now. Thanks.

Mark said...

What a wonderful opportunity for you to show us some framework stuff, along with as3-signals, as Zach mentioned.

I say that only a little in jest, as it seems hard for me to wrap my head around IoC, DI, etc., as it applies to using the AGS library. You seem to have the ability to make some fairly complex ideas accessible to us mortals.

PS
I liked your mobile map article on the Adobe Flex Dev site, once again, thanks for making this stuff more accessible.

A.Uijtdehaag said...

Wonderful. Do you take requests? How about integrating a web map from ARCGIS.COM

Sam said...

For the addPolygon function under LatLoncontroller.as, just curious where it says model.polylinArrCol.addItem(feature) should it be polygonArrCol. As Im having a bit of trouble drawing out polygons. Thanks again for the API.

ThunderHead said...

C&P Brain fart :-( git pull latest - Thanks

razukrashka said...

Thank you for this work!

Flex Application Developer said...

Great post. Its really informative and useful post...

CDSturzaker said...

This is great. Is it possible to turn off the map switcher in the mobile map?

ThunderHead said...

Gave you the source code - have fun !

urthling said...

The core API is quite simply fantastic - and this "lite" project is a great resource for figuring out how to implement the advanced API.. Great job.

One major issue - I called to get pricing from: http://www.esri.com/software/arcgis/web-mapping/pricing

I explained I wanted to use a simple street maps with geocoding - nothing special.. and this would be distributed with my mobile app to the public.. The app would be free.

I was told I would need to get a server which would cost about $50,000 upfront with about $10,000 p/y in licensing...?!

The reason for the Server is that each call to the hosted service is considered "a credit" and a business account is charged per credit.. so the cost would become very high..

The Sales person couldn't wait to get me off the phone - I guess she had bigger fish to fry?! So.. my question is - is this correct?

Mansour Raad said...

Rendering some basemap from ArcGIS online is free - however, using some services is not - talked to a local rep and he told me that yes it does cost $$ for certain services - if you are a non-profit or is associated with an educational institutions there is a "break".

urthling said...
This comment has been removed by the author.
urthling said...

For those who might find this post - and hope to use the underlying API - and plan on just using OSM - the API can be licensed for just a few thousand dollars a year - great news considering this is certainly the best flex map API available.

urthling said...

Mansour - I have a question I hope you might be able to help with..

Given the following code - you can see I'm successfully using an embedded SWF PictureMarkerSymbol:

var geoCenter:MapPoint = new MapPoint(geoObj.longitude, geoObj.latitude);
var webCenter:MapPoint = WebMercatorUtil.geographicToWebMercator(geoCenter) as MapPoint;

var blueDot:PictureMarkerSymbol = new PictureMarkerSymbol(BlueDotSwf, 16.75, 17);

var myGraphicPic:Graphic = new Graphic(webCenter);
myGraphicPic.symbol = blueDot;


I need to be able to access the SWF MovieClip - I've tried coercing the symbol like this:

trace( (myGraphicPic.symbol as MovieClip).currentFrame);

…and as many variations as I can think of to get to the underlying MovieClip – but all to no avail – how can I access the MovieClip??

Thank you very much in advance for your time.

urthling said...


Can google Maps Tiles be used with ArcGIS flex API?

Mansour Raad said...

Yes - but it is not "legal" from Google's perspective as u will be accessing the tiles directly !!

urthling said...

The plan is to use the Google Places API - which require Google Maps to be used when displaying results.. We'll work on getting "permission" from Google.

So with that said, how can I do it??

Mansour Raad said...

A bit old - but gives u the idea - https://dl.dropbox.com/u/2193160/GoogleTiledMapServiceLayer.zip

urthling said...

You are a scholar and a gentleman!

urthling said...

Quick update here - Esri no longer offer their API for commercial use - now you can ONLY use their API with one of their three licensing options, Online Plan, Server or Portal:
http://www.esri.com/software/arcgis/web-mapping/pricing

Expensive is a gross understatement. What a shame.