Posts Tagged ‘marker’

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.  XIAO Juguang, Community Developer

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.

Tags: , , , , , , , , , ,
Posted in Best practices, Flash, Google Map Mashup, Interactive, Mapping, Promote, scripting, Software | 12 Comments »

Visualization: Geomap (Google)

Friday, June 19th, 2009

geomapgooglevisualization

[Editor’s note: Google has made freely available the curious choropleth (colors by country) and graduated symbol (bubble) maps found in their Google Analytics tools as part of their charting – visualization kit. You set-up a HTML JavaScript object with the map parameters (country-value pairs or city-value pairs) and the colors and Google will make you an interactive Flash map (data brushing reveals country value on mouseOver) color coded via uninformative class breaks and terrible cartography linework (look at the US, Canada border) and a terrible world map projection (cylindrical with gross distortions in the higher latitudes). But it is free and fast and several regional base map are also available. There is certainly an oportunity for someone else to come up with a better API that uses the same function calls but draws better maps with meaningful data classes. Screenshot above is static, click on it to go to interactive version.]

Republished from Google Visualization.

Overview: A geomap is a map of a country, continent, or region map, with colors and values assigned to specific regions. Values are displayed as a color scale, and you can specify optional hovertext for regions. The map is rendered in the browser using an embedded Flash player. Note that the map is not scrollable or draggable, but can be configured to allow zooming.

We have two examples here: one that uses the regions display style, and another that uses the markers display style.

Regions Example

The regions style fills entire regions (typically countries) with colors corresponding to the values that you assign. Specify the regions style by assigning options[‘dataMode’] = ‘regions’ in your code.

Markers Example

The “markers” style displays a circle, sized and colored to indicate a value, over the regions that you specify. To use markers, you must include the following Google Maps API script with a key, unless you specify locations using latitude and longitude values.

Continue reading at Google . . .

Tags: , , , , , , ,
Posted in Charting, Critique, Flash, General, Geography, Google Map Mashup, Interactive, Mapping, Promote, Software | Comments Off on Visualization: Geomap (Google)