14 Replies Latest reply: Dec 7, 2014 2:26 PM by GusMaia00 RSS

    Mapquest API AS3 - Points of Interest

    GusMaia00 Community Member

      Hey everyone,

       

      I'm a new as3 student taking my first steps foward into a map-based tourism app.

      I'm using the MapQuest API for as3, it's the first time I'm using an api and so far I've made the basic AS3 Map and the MouseWheel ZoomControl from here.

      At the moment I'm trying to use the 'Easy POIl' from the link I left above but I've no idea how to get the code right, since it looks like xml and I'm working with AS3 on Flash Pro CC.

       

      Can anybody help me?

      Thanks a lot everyone, best regards.

       

      Here's my code so far:

       

      package {

       

      //IMPORTS

          import flash.display.Sprite;

          import flash.display.StageScaleMode;

                  import com.mapquest.tilemap.*

        import com.mapquest.tilemap.pois.*

                  import com.mapquest.tilemap.controls.inputdevice.*;

                  import com.mapquest.tilemap.controls.shadymeadow.*;

                  import com.mapquest.LatLng;

        import mx.controls.*;

       

        public class AS3Map extends Sprite {

        var zs:ZoomSettings;

        var map:TileMap

        var myPoi:Poi;

       

      //MAP

            public function AS3Map():void {

              //turn scaling off

              this.stage.scaleMode = StageScaleMode.NO_SCALE;

              //create a new TileMap object, passing your platform key

              map = new TileMap("Fmjtd%7Cluurn96rnl%2Cra%3Do5-9w80lr");

              //set the size of the map

              map.size = new Size(stage.stageWidth, stage.stageHeight);

              //add the map to the sprite

              addChild(map);

        addMapCenterF();

        addControlsF();}

       

      //ZOOM

        private function addMapCenterF():void{

        //set the map center

        map.setCenter(new LatLng(41.156168845136705,-8.628559112548828),12);}

        private function addControlsF():void{

        //add a control to the map

        map.addControl(new SMLargeZoomControl());

          //make a zoomSettings object

          this.zs = new ZoomSettings();

          this.zs.animate = true;

          //CODIGO COM ERRO: this.zs.easeFunction = mx.effects.easing.Linear.easeInOut;

          //add the mousewheelzoomcontrol to the map

          map.addControl(new MouseWheelZoomControl());}

       

        }

        }

        • 1. Re: Mapquest API AS3 - Points of Interest
          kglad CommunityMVP

           

          package {

           

          //IMPORTS

              import flash.display.Sprite;

              import flash.display.StageScaleMode;

                      import com.mapquest.tilemap.*

            import com.mapquest.tilemap.pois.*

                      import com.mapquest.tilemap.controls.inputdevice.*;

                      import com.mapquest.tilemap.controls.shadymeadow.*;

                      import com.mapquest.LatLng;

            import mx.controls.*;

           

            public class AS3Map extends Sprite {

            var zs:ZoomSettings;

            var map:TileMap

            var poi:Poi;

           

          //MAP

                public function AS3Map():void {

                  //turn scaling off

                  this.stage.scaleMode = StageScaleMode.NO_SCALE;

                  //create a new TileMap object, passing your platform key

                  map = new TileMap("Fmjtd%7Cluurn96rnl%2Cra%3Do5-9w80lr");

                  //set the size of the map

                  map.size = new Size(stage.stageWidth, stage.stageHeight);

                  //add the map to the sprite

                  addChild(map);

            addMapCenterF();

            addControlsF()

          addPOIF();

          ;}

           

          //ZOOM

            private function addMapCenterF():void{

            //set the map center

            map.setCenter(new LatLng(41.156168845136705,-8.628559112548828),12);}

            private function addControlsF():void{

            //add a control to the map

            map.addControl(new SMLargeZoomControl());

              //make a zoomSettings object

              this.zs = new ZoomSettings();

              this.zs.animate = true;

              //CODIGO COM ERRO: this.zs.easeFunction = mx.effects.easing.Linear.easeInOut;

              //add the mousewheelzoomcontrol to the map

              map.addControl(new MouseWheelZoomControl());

          }

          private function addPOIF():void{

          // or add it elsewhere

          poi = new Poi(map.center);

          map.addShape(poi);

          }

          }

            }

          • 2. Re: Mapquest API AS3 - Points of Interest
            GusMaia00 Community Member

            Thanks a lot, it worked 1st try

            Btw, do u have idea how can I say where to place the points of interest and how can I make more than 1?

            • 3. Re: Mapquest API AS3 - Points of Interest
              kglad CommunityMVP

              just create new poi's using the lat/long as the Poi argument and add them toyour map using addshape

              • 4. Re: Mapquest API AS3 - Points of Interest
                GusMaia00 Community Member

                The only lat/long that's in the code (I think) it's for the starting map positioning/zoom, so how can I call the lat/long for a specific point?

                • 6. Re: Mapquest API AS3 - Points of Interest
                  GusMaia00 Community Member

                  Yeah, I got that, what I don't know where to apply that code, would it be like:


                  poi = LatLng(41.156168845136705,-8.628559112548828)


                  or something?

                  • 7. Re: Mapquest API AS3 - Points of Interest
                    kglad CommunityMVP

                    use:

                     

                    poi = new Poi((41.156168845136705,-8.628559112548828);

                    • 8. Re: Mapquest API AS3 - Points of Interest
                      GusMaia00 Community Member

                      package {

                       

                      //IMPORTS

                          import flash.display.Sprite;

                          import flash.display.StageScaleMode;

                        import com.mapquest.tilemap.*

                        import com.mapquest.tilemap.pois.*

                        import com.mapquest.tilemap.controls.inputdevice.*;

                        import com.mapquest.tilemap.controls.shadymeadow.*;

                        import com.mapquest.LatLng;

                        import mx.controls.*;

                       

                      //VARS/CLASS

                        public class AS3Map extends Sprite {

                        var zs:ZoomSettings;

                        var map:TileMap

                        var poi:Poi;

                       

                      //MAP

                            public function AS3Map():void {

                              //turn scaling off

                              this.stage.scaleMode = StageScaleMode.NO_SCALE;

                              //create a new TileMap object, passing your platform key

                              map = new TileMap("Fmjtd%7Cluurn96rnl%2Cra%3Do5-9w80lr");

                              //set the size of the map

                              map.size = new Size(stage.stageWidth, stage.stageHeight);

                              //add the map to the sprite

                              addChild(map);

                        addMapCenterF();

                        addControlsF()

                        addPOIF();

                       

                       

                      ;}

                       

                      //ZOOM

                        private function addMapCenterF():void{

                        //set the map center

                        map.setCenter(new LatLng(41.156168845136705,-8.628559112548828),12);}

                        private function addControlsF():void{

                        //add a control to the map

                      // map.addControl(new SMLargeZoomControl());

                          //make a zoomSettings object

                          this.zs = new ZoomSettings();

                          this.zs.animate = true;

                          //CODIGO COM ERRO: this.zs.easeFunction = mx.effects.easing.Linear.easeInOut;

                          //add the mousewheelzoomcontrol to the map

                          map.addControl(new MouseWheelZoomControl());

                      }

                       

                       

                      //POIs

                      private function addPOIF():void{

                      // or add it elsewhere

                      poi = new Poi((41.156168845136705,-8.628559112548828);

                      map.addShape(poi);

                      poi.rolloverAndInfoTitleText = "Torre dos Clerigos\n Horário: 08:15 às 15:30";

                      }

                      }

                        }

                       

                      Line 54, Column 54, Error 1084 :S

                      • 9. Re: Mapquest API AS3 - Points of Interest
                        kglad CommunityMVP

                        which is line 54?

                        • 10. Re: Mapquest API AS3 - Points of Interest
                          GusMaia00 Community Member

                          The line with the code you told me, it worked with 'map.center' but it didn't with the coordenates

                          • 11. Re: Mapquest API AS3 - Points of Interest
                            kglad CommunityMVP

                            use:

                             

                            poi = new Poi(new LatLng(41.156168845136705, -8.628559112548828));

                            • 12. Re: Mapquest API AS3 - Points of Interest
                              GusMaia00 Community Member

                              Thanks mate, got it done, and I also figured out how to create multiple points

                              What I got left to do is creating a path from one point to other. Would the 'Routing with map' from the link get it working?

                              If so, how I apply the code?

                              • 13. Re: Mapquest API AS3 - Points of Interest
                                kglad CommunityMVP

                                check routing with map if you want to add a route to a map. if you just want directions, check routing.

                                • 14. Re: Mapquest API AS3 - Points of Interest
                                  GusMaia00 Community Member

                                  I tried routing with map but I got an error, here's my code:

                                   

                                  package {

                                   

                                  //IMPORTS

                                      import flash.display.Sprite;

                                      import flash.display.StageScaleMode;

                                    import com.mapquest.tilemap.*

                                    import com.mapquest.tilemap.pois.*

                                    import com.mapquest.tilemap.controls.inputdevice.*;

                                    import com.mapquest.tilemap.controls.shadymeadow.*;

                                    import com.mapquest.LatLng;

                                    import mx.controls.*;

                                    import mx.collections.ArrayList;

                                    import spark.components.List;

                                    import com.mapquest.services.directions.Directions;

                                   

                                  //VARS/CLASS

                                    public class AS3Map extends Sprite {

                                    var zs:ZoomSettings;

                                    var map:TileMap

                                    var poi:Poi;

                                    var poi2:Poi;

                                    var arrLocations:Array;

                                    var dir:Directions;

                                    [Bindable]private var alResults:ArrayList;

                                    

                                   

                                   

                                   

                                  //MAP

                                        public function AS3Map():void {

                                          //turn scaling off

                                          this.stage.scaleMode = StageScaleMode.NO_SCALE;

                                          //create a new TileMap object, passing your platform key

                                          map = new TileMap("Fmjtd%7Cluurn96rnl%2Cra%3Do5-9w80lr");

                                          //set the size of the map

                                          map.size = new Size(stage.stageWidth, stage.stageHeight);

                                          //add the map to the sprite

                                          addChild(map);

                                    addMapCenterF();

                                    addControlsF()

                                    addPOIF();

                                   

                                   

                                  ;}

                                   

                                   

                                   

                                   

                                   

                                  //ZOOM

                                      private function addMapCenterF():void{

                                    map.setCenter(new LatLng(41.1499680,-8.6102426),12);}

                                      private function addControlsF():void{

                                      map.addControl(new SMLargeZoomControl());

                                    map.addControl(new SMViewControl());

                                      map.addControl(new MouseWheelZoomControl());

                                  }

                                   

                                   

                                  //ROUTING

                                   

                                   

                                             /*

                                              called when the "Get Route" button is clicked

                                              prepares addresses routing & makes the routing call

                                              */

                                              private function doRoute():void {

                                                  //remove any existing locations

                                                  if (this.dir) this.dir.locations = null;

                                                 

                                                  //clean the array list

                                                  this.alResults = new ArrayList();

                                                 

                                                  //hide the results

                                                  this.vgrpResults.visible = false;

                                                 

                                                  //cretae the locations array onto which the addresses will be pushed

                                                  this.arrLocations = new Array();

                                                 

                                                  //push the from address onto the array

                                                  this.arrLocations.push(this.txtFrom.text);

                                                 

                                                  //push the from address onto the array

                                                  this.arrLocations.push(this.txtTo.text);

                                                 

                                                  //assign the array to the directions object's locations

                                                  this.dir.locations = this.arrLocations;

                                                 

                                                  //set the busy cursor

                                                  this.cursorManager.setBusyCursor();

                                                 

                                                  //make the routing call

                                                  this.dir.route();

                                              }

                                             

                                             

                                              /*

                                              function to handle a successful route result

                                              */   

                                              private function onRouteSuccess(e:DirectionsEvent):void {

                                                  this.cursorManager.removeBusyCursor();

                                                  if (e.routeType != DirectionsConstants.REQUEST_TYPE_ROUTESHAPE) {

                                                      this.makeDirectionsList(e.xml);

                                                  }

                                              }

                                             

                                   

                                   

                                              /*

                                              function to handle an ambiguity in the routeresult

                                              */

                                              private function onRouteAmbiguity(e:DirectionsEvent):void {

                                                  this.cursorManager.removeBusyCursor();

                                                  this.makeErrorList(e.collectionsXml.toString());

                                              }

                                             

                                             

                                              /*

                                              function to handle an ioerror

                                              */

                                              private function onRouteIOError(e:DirectionsEvent):void {

                                                  this.cursorManager.removeBusyCursor();

                                                  this.makeErrorList("DIRECTIONS IO ERROR");

                                              }

                                             

                                             

                                              /*

                                              function to handle an error in the result

                                              */

                                              private function onRouteError(e:DirectionsEvent):void {

                                                  this.cursorManager.removeBusyCursor();

                                                  this.makeErrorList("DIRECTIONS ERROR");

                                              }

                                             

                                             

                                             

                                              /*

                                              function to make an array list to hold an error

                                              */

                                              private function makeErrorList(s:String):void {

                                                  this.alResults = new ArrayList();

                                                 

                                                  var o:Object = new Object();

                                                  o.Maneuver = s;

                                                  o.Distance = "";

                                                  o.Time= "";

                                                  this.alResults.addItem(o);

                                                 

                                                  this.dgResults.dataProvider = this.alResults;

                                                  this.vgrpResults.visible = true;

                                              }

                                             

                                             

                                             

                                              /*

                                              function to handle creating the arraylist for a successful route result and

                                              displaying it in the list control

                                              */

                                              private function makeDirectionsList(x:XML):void {

                                                  this.alResults = DirectionsDisplayUtil.makeDirectionsArrayList(x);

                                                 

                                                  this.lblTime.text = "Total Time:  " + x.route.formattedTime.text();

                                                  this.lblDistance.text = "Total Distance:  " + Number(x.route.distance.text()).toFixed(2);

                                                 

                                                  this.dgResults.dataProvider = this.alResults;

                                                  this.vgrpResults.visible = true;

                                              }

                                   

                                   

                                  //POIs

                                  private function addPOIF():void{

                                  // or add it elsewhere

                                  poi = new Poi(new LatLng(41.1456753, -8.6145985));

                                  map.addShape(poi);

                                  poi.rolloverAndInfoTitleText = "Torre dos Clerigos\n Horário: 08:15 às 15:30";

                                   

                                  poi2 = new Poi(new LatLng(41.160575, -8.628282));

                                  map.addShape(poi2);

                                  poi2.rolloverAndInfoTitleText = "Casa da Musica\n Horário: 10:00 às 21:00\n Encerrado aos Domingos";

                                  }

                                  }

                                    }

                                   

                                      //make a new directions object

                                                  this.dir = new Directions(this.map.tileMap);

                                                 

                                                  // call function to add event listeners for directions object

                                                  this.addDirectionsListeners();       

                                              }

                                   

                                   

                                             

                                              /*

                                              function to add event listeners for directions object

                                              */

                                              private function addDirectionsListeners():void {

                                                  //event listener to handle successful directions result

                                                  this.dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS,this.onRouteSuccess);

                                                  //event listener to handle erroe in directions result

                                                  this.dir.addEventListener(DirectionsEvent.DIRECTIONS_ERROR,this.onRouteError);

                                                  //event listener to handle ambiguous location in directions result

                                                  this.dir.addEventListener(DirectionsEvent.DIRECTIONS_AMBIGUITY,this.onRouteAmbiguity);

                                                  //event listener to handle io error for directions call

                                                  this.dir.addEventListener(DirectionsEvent.DIRECTIONS_IOERROR,this.onRouteIOError);   

                                                 

                                                  if (this.dir.configured) {

                                                      this.onDirectionsReady(null);

                                                  }

                                                  else {

                                                      //event listener to handle ready state of directions object

                                                      this.dir.addEventListener(DirectionsEvent.DIRECTIONS_READY,this.onDirectionsReady);

                                                  }

                                              }

                                             

                                             

                                             

                                              /*

                                              event handler called when the directions object is ready to accept requests

                                              */

                                              private function onDirectionsReady(e:DirectionsEvent):void {

                                                  this.btnRoute.enabled=true;

                                              }

                                   

                                  Error 1087 @

                                                  // call function to add event listeners for directions object

                                                  this.addDirectionsListeners();       

                                              }

                                   

                                   

                                  (Error found on the last line, the one with the } )