0 Replies Latest reply on Nov 13, 2012 12:13 PM by windy1954

    Problem with "Building interactive maps with Flex" example

    windy1954

      I have been looking at the tutorial by Matt Sheehan Building interactive maps with Flex found at

      http://www.adobe.com/devnet/flex/articles/interactive_maps.edu.html

       

      I have downloaded  Flash Builder 4.6 trial version and followed the example. I have also copied the source code from the example and pasted that into the file mymodestmap.mxml.

       

      In both cases the application opens a new page in Google Chrome but does not display any map data.

      No errors or warnings are displayed when I run the code from Flash Builder.

       

      Although I have got plenty of experience of writing software, I am a total beginner when it comes to developing web applications!

       

      Any ideas as to what I am doing wrong, I have attached the source below.

       

       

      Cheers

       

      Steve

       

       

      <?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:mx1="library://ns.adobe.com/flex/halo"

                                       minWidth="1024" minHeight="768" creationComplete="init()" viewSourceURL="srcview/index.html" xmlns:mx="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.geo.Location;

                                    import com.modestmaps.extras.ZoomSlider;

                                    import com.modestmaps.extras.HandCursor; 

       

                                    [Bindable]private var _map:TweenMap;       

                                    private var _mapUI:UIComponent;

                                    [Bindable]private var _initialLat:Number = 40.668903;

                                    [Bindable]private var _initialLong:Number = -111.680145;

                                    [Bindable]private var _initialZoom:Number = 6;

                                    private var _mouseWheelZoomCenter:Location;

                                    private var _mouseWheelZoom:int;     

       

                                    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);   

                                    }

       

                                    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();

                                    }

       

       

                          ]]>

                </fx:Script>

       

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

       

      </s:Application>