MarkerClusterer with custom icons and data from a XML file.

  • Posted by racoonlab
  • Tagged with

MarkerClusterer collects markers into different clusters and displays the number of markers in each cluster with a label, creating new clusters as the map zoom level changes.

http://googlegeodevelopers.blogspot.com/2009/04/markerclusterer-solution-to-too-many.html

Let’s say that you retrieve your data from a XML file and you show the markers with “map.addOverlay(marker);”

Now if you want to integrate your application with MarkerClusterer use the following code:

Code:

<div id="_mcePaste">[Embed( "images/chart.png" )]
private static const userMapIconClass:Class;</div>

 

<div id="_mcePaste">public var markerClusterer : MarkerClusterer;</div>

 

<div id="_mcePaste">...</div>

 

<div id="_mcePaste">
public function readXml(event:Event):void{

    var markersXML:XML = new XML(event.target.data);
    var markers:XMLList = markersXML..marker;
    var markersCount:int =  markers.length();
    var i:Number;
    var marker_s:Array = new Array();	

    for (i=0; i &lt; markersCount; i++) {
	var markerXml:XML = markers[i];
	var name:String = markerXml.@name;
	var address:String = markerXml.@address;
	var type:String = markerXml.@type;
	var distance:String = markerXml.@distance;
	var latlng : LatLng = new LatLng(markerXml.@lat, markerXml.@lng);
        var marker:Marker = createMarker(latlng, name, address, type);

        //add custom icons markerOptions
        var icon:DisplayObject = DisplayObject( new userMapIconClass );
        var markerOptions:MarkerOptions = new MarkerOptions( { icon: icon,</div>

 

<div id="_mcePaste">        iconAlignment: MarkerOptions.ALIGN_HORIZONTAL_CENTER |</div>

 

<div id="_mcePaste">        MarkerOptions.ALIGN_VERTICAL_CENTER } );
        var marker_ : UnitMarker = new UnitMarker(latlng, markerOptions);

        //add clusters
        marker_s.push(marker_);

        //populate the datagrid
        myMarker.addItem({nameInstitute:name, distanceInstitute:distance,</div>

 

<div id="_mcePaste">        latLntInstitute:latlng });

   }

   //create the object markerClusterer
   markerClusterer = new MarkerClusterer(map, marker_s);

}</div>

That’s it.