Posts Tagged ‘flex’

Embeddable US Demographics Map (ESRI via FreeGeoTools)

Thursday, October 22nd, 2009

[Editor's note: This was demo'd at NACIS earlier this month. Raster thematic map tiles delivered via Flash API that are still interactive. ESRI's solution to Google mashups.]

Republished from Free Geography Tools.

As a demo of the ArcGIS API for Flex, ESRI has a new page that lets you create an embeddable/shareable map of demographic data by US county. Only seven datasets available now:

  • Median Household Income
  • Population Change 2000-2009
  • Population Density (per sq. mile)
  • Median Home Value
  • Unemployment Rate
  • Average Household Size
  • Median Age

Map creation is trivially easy – select the demographic dataset from a dropdown, zoom the map to the desired extents, set a map size in pixels, and you’re done; links to a map with your parameters, and code for an embeddable map, are generated automatically. Here’s an embedded map, scrollable and zoomable; unemployment rate is the default dataset, but you can choose other sets with the dropdown menu at upper right:

More datasets would be nice, as would control over colors and ranges …

Interact with the original at Free Geography Tools . . .


3D Perspective in the Maps API for Flash! (GoogleGeoDev)

Friday, August 14th, 2009

[Editor's note: This seems kinda odd given the poor image resolution, but I'm sure there's a use for it and someone will figure out how to sample higher res tiles. Thanks Laris!]


2-D maps are great, but sometimes it’s cool to gaze into the distance. Today we’re happy to announce support for perspective in the Maps API for Flash. We’ve taken the regular API, added pitch and yaw, borrowed the look-around control from Google Earth, and thrown in some nifty camera trajectory support. The opportunity to see the world from a chosen point of view is now in the hands of a user!


Here’s a perspective map in action. Sit back and watch or dive in and drag the view. Try holding down the zoom plus (+) or minus (-) buttons to see the new smooth continuous zoom.

Play with demos and the possibilities emerge. Shadows stretch out as the land tilts back. Foreground detail blends with background context. Movement through the world becomes first-person in nature and distant features can rapidly be dragged to the fore. On a regular map a cluster of markers might only confuse. Spin a perspective map and their pattern becomes clear as nearer markers pass in front of their more remote partners.

A key strength of Flash is its ubiquitous nature and we’ve taken care to develop an API that preserves this advantage. While supporting the latest, greatest Flash players, the API requires only Flash 9. Build a single target and API runtime code matches implementation library to player version. Flash 10 users gain the benefits of the native 3-D graphics support–rendering speed and accuracy–but Flash 9 users won’t be left out.

So how do you create a 3-D map? If you’ve not used the Maps API for Flash before here we’ve got lots of documentation to help you get up and running. For those who’ve used the API and have an existing map to hand, three quick changes should suffice:

  • Replace Map with Map3D
  • Turn on perspective:
    Map3D.viewMode = View.VIEWMODE_PERSPECTIVE;
  • Replace the old position and zoom controls with the new navigation control:

While this new functionality is aimed at Flash developers, we also have the Earth plugin and API for those of you working with JavaScript and the JS-based Maps API. For developers using the Maps API for Flash, today’s release is just an extension of the existing Flash API; where it makes sense, we have borrowed some learnings from the Earth API (and will continue to do so). From a user’s viewpoint, if you’ve used the Earth plugin or Google Earth, the controls will all be familiar. We’ve kept the same basic key mappings. Add SHIFT to tilt the map, or CTRL to tilt your view and you’re ready to go. More features are hidden just under the surface. Animate a flight from A to B, or apply perspective scaling to your markers. See the new API reference documentation for details.

As always, for those of us working on APIs, the most rewarding aspect is of seeing what developers do with it. Here’s what some of our trusted testers have done to date:

UK Weather Tour ArcGIS Services PaperVision3D Scene
Ian Watkins Nianwei Liu Satoshi Ueyama
Eiffel Tower KMZ 3D Driving Simulator Weather Radar GroundOverlay
Masashi K Katsuomi.K Andrew Trice

Check out some more demos, have a play, make some maps, and let us know what you think!

MarkerClusterer in an All New Flavor – ActionScript! (GoogleGeoDev)

Friday, August 14th, 2009

[Editor's note: An AS3 Flash / Flex library for auto-clustering near map location markers into groups symbols. This speeds map rendering and groups points all within the same neighborhood, avoiding "red dot fever" marker overload. An AS3 implementation of existing JavaScript extension. Still needs to account for geographic region clustering (not just within a grid). Thanks Laris!]

Republished from Google Geo Developer Blog.
Monday, July 27, 200. 

My name is XIAO Juguang – just call me Juguang. I am a freelance software developer based in Beijing, China. Technically speaking, I’m double sided. On one side, I specialize in knowledge management and business modeling, traditionally using LAMP and now experimenting with offerings like Google App Engine. On the other side, I love visualization in time and space, with charts, trees, graphs, and maps, always using the power of ActionScript/Flex, with the help of open-source projects like Degrafa, Axiis, and Birdeye, and of course, APIs like the Google Maps API for Flash.

A few month ago, Xiaoxi Wu (also from China!) created the MarkerClusterer library for the Google Maps JavaScript API v2 and released it in their open source utility library. This library did automatic clustering of markers placed on a map, so that a large amount of markers wouldn’t overcrowd the map or overwhelm the user. This is a great technique for having a better performing map (see this talk for more tips on improving map performance), and the Flash map community immediately rushed to port the code to ActionScript. Developer Sean Toru posted the first port, a version that was only Flash-compatible, Ian Watkins modified that port to use Flex packages, and then I refactored the code to be more ActionScript-friendly and released it into the open-source library. It’s great when random strangers can collaborate together on a common code goal. :)

To see how the AS3 MarkerClusterer works, try out the demo (shown above). As you zoom and pan the map, you can witness how the markers are clustered and re-clustered. To learn how to use MarkerClusterer on your own map, view the source code of the demo. To use the library, check out the source code and import it into your project.

The current algorithm is quite simple, just clustering markers in a grid and using static images for the cluster markers. Future extensions could include support for regional clustering or using arbitrary DisplayObjects for the cluster markers. If you’re interested in extending the library, join the project.

Advanced Text Layout Framework for Flash Open-Sourced (Adobe)

Thursday, July 23rd, 2009


[Editor's note: Finally, Adobe's purchase of Macromedia is bearing fruit! The fine-control that Illustrator and InDesign have over typography (text layout) is now available in Flash and Flex as an ActionScript 3.0 framework. There are even a few controls I wish would make it back to Illustrator, like where in the text container the text starts from (not always the top-left hand corner) and allowing images and graphics to be embedded in the text frame, ala Freehand. Also note the Photoshop style numerical control scrubbers!]

Republished from Adobe Labs.

Welcome to the beta release of the Text Layout Framework for Adobe® Flash® Player 10 and Adobe AIR® 1.5. The Text Layout Framework is an extensible library, built on the new text engine in Adobe Flash Player 10, which delivers advanced, easy-to-integrate typographic and text layout features for rich, sophisticated and innovative typography on the web. The framework is designed to be used with Adobe Flash CS4 Professional or Adobe Flex®, and is already included in the next version of Flex, code named Gumbo. Developers can use or extend existing components, or use the framework to create their own text components. Source code and component library for TLF are now available as open source at no charge under the Mozilla Public License at

Together with the new text engine in Flash Player 10 and AIR 1.5, the Text Layout Framework delivers multi-lingual, print-quality typography for the web, including support for:

  • Bidirectional text, vertical text and over 30 writing systems including Arabic, Hebrew, Chinese, Japanese, Korean, Thai, Lao, the major writing systems of India, and others
  • Selection, editing and flowing text across multiple columns and linked containers, and around inline images
  • Vertical text, Tate-Chu-Yoko (horizontal within vertical text) and justifier for East Asian typography
  • Rich typographical controls, including kerning, ligatures, typographic case, digit case, digit width and discretionary hyphens
  • Cut, copy, paste, undo and standard keyboard and mouse gestures for editing
  • Rich developer APIs to manipulate text content, layout, markup and create custom text components.

For a complete list of features and more information regarding this beta, please see the release notes. Please help us ensure that the final release of the Text Layout Framework will be of the highest quality by installing and using this beta version and sending us your feedback on the Text Layout Framework forum.

Open Source

The Text Layout Framework is now an open source project.

PatchPanel: Flash Panels for Multiple CS Applications (Adobe)

Thursday, June 18th, 2009


[Editor's Note: ]

Republished from Adobe Developer Connection.

By Dr. Woohoo @

Follow along with this tutorial to expand on what we created in the previous tutorial, PatchPanel: Integrating your ExtendScript, with the objective of using a framework that embraces running our Flash plug-in in multiple Creative Suite applications (Photoshop and Illustrator). When we are done, our Flash plug-in will work in all three CS applications using code that is appropriate for each host application― keeping in mind that this is necessary due to the differences in the DOMs of each application.

Our Flash plug-in will get the RGB values of the foreground color of the host CS4 application. You will integrate a separate ActionScript file for each host application within the Flash plug-in that you develop within a Flex Builder MXML project using the PatchPanel SWC library as the mechanism for communicating between your SWF and the host application, which will dynamically be defined in this example.

After completing this tutorial, you should be able to:

  • Add the Adobe PatchPanel SWC library, cs4.swc, to your Flex Builder Project
  • Import the host CS applications ExtendScript DOM
  • Copy your ExtendScript code from ExtendScript Toolkit to Flex Builder
  • Know what the appropriate color object structure is within the DOM of the three possible host applications
  • Install the SWF and accompanying JSX/JS file so that it is accessible from within Photoshop and Illustrator

Continue reading at Adobe Developer Connection . . .

Shapefiles, Actionscript 3.0, and Google Maps (Box Shaped World)

Monday, June 8th, 2009

[Editor's note: Tutorial for using the vanrikom classes to read in shapefiles in Flash and Flex AS3 and display them on a Google Maps mashup.]

Republished from the Box Shaped World blog. 28 April 2009.

I’m working an Adobe AIR application and I wanted to be able to have the user select a shapefile, and then parse it to create a KML file.  I didn’t want to have the user be responsible for creating a KML file.  I thought I might try and crack the shapefile enigma since it is a well documented format, but that would have taken time and I suddenly realized I’m not actually a developer :).  Instead, I found this set of Actionscript Classes to parse a shapefile in Flash.  Unfortunately, I didn’t find a very good tutorial on how to work with the classes.  The example is a little confusing (at least for me) and also uses a far file.  I’d never heard of far compressed files.  So I took the classes and created my own parser.  I thought I would post a tutorial on how to use these shapefile classes in conjunction with AIR and the Google Maps API for flash.  This technique would work with flex as well, I just didn’t want to have to write the code to upload a file.  I presume a few things with this.  The shapefile you are using for this should already have a geographic projection (e.g. latitude and longitude Geographic NAD 83).  In order to use the Google Maps API with AIR, you need a URL with a key associated with it.  Below are two zipfiles available for download.  The is the shapefile I was using.  The is the downloaded actionscript classes from the Google Code repository.  I had trouble downloading the using an svn so I did it manually.  I’ll save you the time by making it available here…unless the original author asks me to remove them.  There are parts that I find confusing with the way the reader was set up.  For some reason polyline inherits from polygon.  Intuitively to me it should be the other way around…but like I said, I’m not a developer.

This was all done using FlashDevelop and the Flex SDK 3.  There are 4 custom classes in addition to the mxml file.  Each are shown here.

Continue reading at Box Shaped World . . .

Mapping Foreclosures in the New York Region (NY Times)

Wednesday, June 3rd, 2009

[Editor's note: The interactive Google Maps mashup in Flash AS3 from the New  York times shows vector overlay of choropleth mapping by census tract and at the street level via dot distribution. As the user zooms in, the dots are revealed, as is a street map. At all levels the census tract summary statistics are available with a mouse over. Zooms are preset for some areas, and the user can type in their own address to zoom to that area. Multiple years add time dimension. Spatial brushing on the map is accomplished by outlining the geography's stroke, not changing the fill color. Thanks Laris!]

Republished from the New York Times. May 15, 2009

A New York Times analysis found that foreclosure rates in the region were highest in areas with high minority populations. Zoom in to see foreclosures at the street level. Screenshot below.

Interact with the original at New York Times . . .




ESRI’s ArcGIS Server Provides Foundation for Maryland’s MD iMap (ESRI)

Tuesday, April 28th, 2009


[Editor's note: One of the more useful + powerful sites to leverage new Flash / Flex mashup capabilities of new ArcGIS 9.3 release. The site is designed both for state residents and government policy makers. Thanks Mary Kate!]

Republished from ESRI and State of Maryland. Original Feb. 11, 2009.

Authoritative Statewide Basemap and Performance Measurement Tool Serves Government and Citizens

Redlands, California—Maryland Governor Martin O’Malley recently launched the ArcGIS Server software-based MD iMap, an authoritative online basemap of Maryland that allows government and citizens to assess state, local, and municipal performance. As the portal into the state’s enterprise geographic information system (GIS), MD iMap also provides data to governments throughout the state including seamless, geocoded statewide centerlines and six-inch imagery. MD iMap embodies O’Malley’s vision of “one Maryland, one map.”

“In Maryland, GIS is vital to setting goals, tracking performance, and creating transparency,” said O’Malley. “We have been using GIS for years to increase government accountability and efficiency and to enhance transparency. With one comprehensive and interactive map for Maryland, our citizens will have access to unprecedented information online. From land conservation to public safety, the possibilities are endless when government becomes transparent and accountable to the citizens it serves.”

GreenPrint is the first GIS-based performance measurement application that is accessible via MD iMap. It is a planning tool designed to help government staff, conservation organizations, and individual citizens make good decisions about land conservation and growth. The state’s other performance measurement applications, including StateStat and BayStat, will be added soon.

To support government staff in Maryland, a secure agency login on the MD iMap Web site home page connects users to Maryland GIS Online, which is built with ArcGIS Online. On that site, staff can download data and Web services from other government entities in the state. In addition to significantly enhancing data sharing and coordination, the portal is innovative in its delivery of real-time, up-to-date statistics in one sleek, user-friendly interface.

“Governor O’Malley’s vision of one Maryland, one map, speaks to the best in government including accountability, unity, and service to citizens. It is also an outstanding example of a public and private partnership driving government forward,” said ESRI president Jack Dangermond.

Interact with the original at MDiMap . . .

TRAINING: Building Rich Internet Applications with ArcGIS API for Flex (ESRI)

Wednesday, January 28th, 2009

[Editor's note: Take advantage of free training from GIS-leader ESRI. Thanks Mary Kate!]

Republished from ESRI.

When: Thursday, January 29, 2009
Three broadcast noted in three local time zones

  • 9:00 a.m., 11:00 a.m., or 3:00 p.m. (PST)
  • Noon, 2:00 p.m., or 6:00 p.m. (EST)
  • 5:00 p.m., 7:00 p.m., or 11:00 p.m. (UTC/GMT)

Do you want to use the new ArcGIS API for Flex to build fast and visually rich Web mapping applications? We will show you how during Building Rich Internet Applications with ArcGIS API for Flex, the next ESRI live training seminar. You will learn the concepts of rich Internet applications (RIAs) and what tools are needed to start building Web mapping applications with ArcGIS API for Flex that you can deploy on the Internet or to the desktop.

During the seminar, you also will learn about:

  • The capabilities of the Adobe Flex framework and the ArcGIS API for Flex features and functionality
  • How to use existing Flex components with ArcGIS API for Flex
  • What to consider when authoring and deploying applications in a Web server
  • Other educational resources available about Flex applications and how to obtain the information

Viewing the Seminar

A broadband Internet connection and an ESRI Global Account (free) are needed to watch the seminar. An ESRI Global Account is complimentary and only takes a few minutes to create. A few weeks after the live presentation, a recorded version of the seminar will be archived and available for viewing.

For more information, visit ESRI Training and Education.

Bullet Graphs for Not-to-Exceed Targets (Visual Business Intelligence)

Wednesday, January 28th, 2009

[Editor's note: The bullet graph is an alternative to circular gauges and meters commonly used on dashboards with a graph that provides a richer data display using less space. The bullet graph consists of five primary components: text label, a quantitative scale along a single linear axis, the featured measure usually as dark black line, one or two comparative or target measures of performance (optional), and from two to five ranges shown as background fills along the quantitative scale to declare the featured measure’s qualitative state like bad, satisfactory, and good (optional) All use the same quantitative scale. Flex component with source code from Agile UI. Google charts version from Dealer Diagnostics. Excel version from Excel User.

Correction on 2010 March 18: The image of the dashboard above is from Robert Allison. Get the SAS/Graph code to create the dashboard.]

Republished from Visual Business Intelligence. Monday, February 4th, 2008 at 2:54 pm.

Image above from Stephen Few’s Information Dashboard Design book seen here.
View PDF format Bullet Graph Design Specification from Stephen Few on the bullet graph. He’s got other useful information design writeups in his Library.

When I designed the bullet graph back in 2005, I did it to solve a particular problem related to dashboard displays. The graphical widgets that software vendors were providing to display single measures, such as year-to-date sales revenue, consisted mostly of circular gauges and meters, which suffered from several problems. Most of them conveyed too little information, did so unclearly, and wasted a great deal of space on the screen. The bullet graph was my alternative, which was designed to convey a rich story clearly in little space.

Bullet Graph Description

Since their introduction, a number of dashboard vendors now support bullet graphs, either as a predesigned display widget or as a display that can be easily constructed using their design tools. Now that bullet graphs are being used a great deal, they are being put to the test, and best practices are being developed to use them effectively.

One challenge that is faced by any graphical display of a single measure compared to another, such as a target, is the fact that the target usually functions as a point that the measure should reach or exceed, such as a sales target, but sometimes it functions as a point that the measure should stay below, such as an expense target. Here is a series of bullet graphs, which are designed in the typical manner:

Bullet Graphs for Not-to-Exceed Targets 1.jpg

Two of the measures—expenses and defects—work the opposite of the others in that the goal is to remain below the target. The background fill colors on these bullet graphs, which vary from dark gray to indicate “poor performance” through to the lightest gray to indicate “good performance,” are arranged from poor on the left to good on the right for revenue, average order size, and new customers, but in reverse for expenses and defects. The reversed sequence serves as a visual cue that expenses and defects should remain below the target. This cue, however, is not strong. It would be useful if something that stood out more signaled this difference.

We might be tempted to replace the varying intensities of a single color—in this case varying intensities of gray—with distinct hues, to make the reversal of the qualitative scale more apparent, such as by using the traditional traffic light colors that are so popular on dashboards.

Bullet Graphs for Not-to-Exceed Targets 2.jpg

This does cause expenses and defects to more clearly stand out as different from the other measures, but at what cost? Even if we ignore the fact that most people who are colorblind (10% of males and 1% of females) cannot distinguish green and red, we are still left with an overuse of color that makes the dashboard appear cluttered and visually overwhelming, as well as a dramatically weakened ability to use color to draw viewers’ eyes to particular areas that need attention. Is there a better way to make certain bullet graphs look different without introducing other more troubling problems?

Here’s a suggestion: not only reverse the sequence of the qualitative scale, but also the direction of the quantitative scale. Using expenses as an example, the quantitative scale could run from 0 at the right of the bullet graph with values increasing leftwards. The bar that encodes the expense measure would then also run from the right edge of the bullet graph leftwards. The bar running from right to left serves as a stronger visual cue that the target works differently, as you can see below:

Bullet Graphs for Not-to-Exceed Targets 3.jpg

Although it is not conventional for a quantitative scale to run from right to left, except in the case of negative values, this is easy to read and the unconventionality actually causes it to pop out more clearly. In fact, expenses and manufacturing defects are measures that we can easily think of as negative values (for example, expenses reduce profit and defects reduce manufacturing productivity).

I would like to encourage all the vendors out there that support bullet graphs to support this functionality and for those who use them to take advantage of it.

Take care,