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

    Problem with "Building interactive maps with Flex" example


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



      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.








      <?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">




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




                                    private function mapCore():void


                                              _map.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);   

                                              _mapUI = new UIComponent();


                                              var zoomslider:ZoomSlider = new ZoomSlider(_map);

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

                                              zoomslider.y = 30;


                                              var handcursor:HandCursor = new HandCursor(_map);





                                    private function mouseWheelHandler(e:MouseEvent):void {

                                              if (e.delta < 0) {



                                              else if (e.delta > 0) {



                                              _mouseWheelZoomCenter = _map.getCenter();

                                              _mouseWheelZoom = _map.getZoom();







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