0 Replies Latest reply on Oct 25, 2014 4:44 PM by austinsometin

    Embedding External XML

    austinsometin

      Hey guys. Based of the ModestMap API example for flex, I want to be able to embed an external XML file instead of directly populating the xml tags on the main app. i have tried different approaches, the markers are not showing up. thanks in advance!

       

      here is the sample code from modestmap

      /////////////////////////////////////

      <?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/halo"
        minWidth="
      1024" minHeight="768" creationComplete="init()" viewSourceURL="srcview/index.html" xmlns:mx1="library://ns.adobe.com/flex/mx">

         <fx:Script>

        <![CDATA[

       

         import mx.core.UIComponent;

         import com.modestmaps.TweenMap

         import com.modestmaps.mapproviders.OpenStreetMapProvider;

         import com.modestmaps.mapproviders.yahoo.YahooHybridMapProvider;

         import com.modestmaps.geo.Location;

         import com.modestmaps.extras.ZoomSlider;

         import com.modestmaps.extras.HandCursor

         import com.custom.PointMarker;

         import com.custom.infoPanel;

        

       

         []private var _map:TweenMap

         private var _mapUI:UIComponent;

         []private var _initialLat:Number = 40.668903;

         []private var _initialLong:Number = -111.680145;

         []private var _initialZoom:Number = 6;

         private var _mouseWheelZoomCenter:Location;

         private var _mouseWheelZoom:int;

         private var resortMarker:PointMarker

         private var _panel:infoPanel;

        

         [("img/marker.png")]

         protected var MarkerImage:Class;

        

         private var srcXML:XML =

         <root>
        <location>
        <name>Alta Ski Resort</name>
        <lat>40.588063</lat>
        <long>-111.637659</long>
        <description>Home of the Greatest Snow on Earth</description>
        </location> 
        <location>
        <name>Crested Butte Resort</name>
        <lat>38.899932</lat>
        <long>-106.964249</long>
        <description>Amazing skiing with small town charm</description>
        </location>
        </root>

        

         private function init():void

         {

         _map = new TweenMap(mappanel.width, mappanel.height, true, new OpenStreetMapProvider())

         _map.setCenterZoom(new Location(_initialLat, _initialLong), _initialZoom);

         mapCore();

         }

        

         private function mapCore():void

         {

         _map.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler)

         _mapUI = new UIComponent();

         _mapUI.addChild(_map)

         var zoomslider:ZoomSlider = new ZoomSlider(_map);

         zoomslider.x = mappanel.width - zoomslider.width*2;

         zoomslider.y = 30;

         _mapUI.addChild(zoomslider)

         var handcursor:HandCursor = new HandCursor(_map);

         _mapUI.addChild(handcursor);

         mappanel.addElement(_mapUI);

         _panel = new infoPanel();

         _panel.containerHeight = mappanel.height;

         _panel.containerWidth = mappanel.width;

         mappanel.addElement(_panel)

         addMarkers();

         }

        

         private function addMarkers():void

         {

         for each (var resort:XML in srcXML.location){

         resortMarker = new PointMarker()

         var markerImage:Bitmap = new MarkerImage() as Bitmap;

         markerImage.x = -markerImage.width/2

         markerImage.y = -markerImage.height/2

         resortMarker.addChild(markerImage);

         resortMarker.resortName = resort.name;

         resortMarker.resortDesc = resort.description;

         resortMarker.addEventListener(MouseEvent.CLICK, handleMouseClick)

         _map.putMarker(new Location(resort.lat, resort.long), resortMarker)

         }

         }

        

         private function mouseWheelHandler(e:MouseEvent):void {

         if (e.delta < 0) {

         _map.zoomOut();

         }

         else if (e.delta > 0) {

         _map.zoomIn();

         }

         _mouseWheelZoomCenter = _map.getCenter();

         _mouseWheelZoom = _map.getZoom();

         }

       

       

         private function handleChangeProvider(event:Event):void

         {

         mappanel.removeAllElements();

        

         if(event.target.label == "Virtual Earth")

         {

         _map = new TweenMap(mappanel.width, mappanel.height, true, new YahooHybridMapProvider());

         }

         else

         {

         _map = new TweenMap(mappanel.width, mappanel.height, true, new OpenStreetMapProvider());

         }

        

         if(_mouseWheelZoomCenter != null && _mouseWheelZoom > 0)

         {

         _map.setCenterZoom(_mouseWheelZoomCenter, _mouseWheelZoom)

         }

         else

         {

         _map.setCenterZoom(new Location(_initialLat, _initialLong), _initialZoom);

         }

         mapCore();

         }

       

         private function handleMouseClick(event:MouseEvent):void

         {

         _panel.ptitle = event.target.resortName;

         _panel.pdesc = event.target.resortDesc;

         }

       

         ]]>

         </fx:Script>

       

         <s:BorderContainer id="mappanel" width="100%" height="97%"/>

         <mx1:HBox width="100%" horizontalAlign="right">

         <mx1:Button label="Open Street Map" click="handleChangeProvider(event)"/>

         <mx1:Button label="Virtual Earth" click="handleChangeProvider(event)"/>

         </mx1:HBox>

       

      </s:Application>




      ///////////////////////////////////////I tried for the external XMl//////////////////////////////

      [("img/marker.png")]

        protected var MarkerImage:Class;

      [Embed(source="data.xml", mimeType="application/octet-stream")]

        [Bindable]

        private var srcXML:Class;

       

        function some_func():void {

        var my_xml:XML = XML(new srcXML);

        }

      ////////////////////////////////and/////////////////////////////////////////////////////// ///

      private function addMarkers():void

        {

        for each (var resort:XML in srcXML){

        resortMarker = new PointMarker();                                             

        var markerImage:Bitmap = new MarkerImage() as Bitmap;

        markerImage.x = -markerImage.width/2

        markerImage.y = -markerImage.height/2

        resortMarker.addChild(markerImage);

        resortMarker.resortName = resort.name;

        resortMarker.resortDesc = resort.description;

        resortMarker.addEventListener(MouseEvent.CLICK, handleMouseClick);                     

        _map.putMarker(new Location(resort.lat, resort.long), resortMarker);                                                           

        }