Controls
Controls are a way to encapsulate functionality on a map. The following controls are currently available for this release:
Zoom Control
Adds the new large zoom controller that matches the freshly revamped MapQuest branding and design.
MQA.withModule('largezoom', function() { map.addControl( new MQA.LargeZoom(), new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5)) ); });
Inset Map Control
An MQA.InsetMapControl can provide users with a better idea of location by displaying the current view in context of a larger geographical area. You can customize the look and feel of the map using CSS for coloring and/or passing the optional configuration into the constructor of the control to provide size, zoom differential and mapType.
/*This uses the MQA.withModule support to download and initialize the MQA.InsetMapControl support module. When the modules are ready for use, the function provided as the last parameter will be executed.*/ MQA.withModule('insetmapcontrol', function() { /*Create an object for options (this example does the following:) -Set the size of the control, default is 150px in width and 125px in height. -Set the zoom differential, default is 3 zoom levels. This can also be a negative value if you would like. -Set the mapType of the control, default is 'map'. -Set the starting view of the overview map, default is minimized=false.*/ var options={ size: {width:150,height:125}, mapType: 'map', zoom:3, minimized:false, retainAspectRatio:false, maxZoom: 11, slideWhenClicked:false }; /*Instantiate the MQA.OverviewMapControl control with the options object and add the control to the map by placing it on the bottom left corner of the map.*/ map.addControl( new MQA.InsetMapControl(options), new MQA.MapCornerPlacement(MQA.MapCorner.TOP_RIGHT) ); });
Carousel Control
An MQA.CarouselControl can use used for quickly navigating sets of data on a map.
MQA.withModule('carouselcontrol','shapes','georssdeserializer','remotecollection', function() { /*utility function for creating pois*/ createPOI=function(title,description,lat,lng){ var poi = new MQA.Poi({lat:lat,lng:lng}); poi.setDeclutter(true); poi.setInfoTitleHTML(title); poi.setInfoContentHTML(description); return poi; }; /*callback function to know when an item has been enabled, see below where this is hooked up*/ bestFitter=function(){ map.bestFit(); }; /*build ski area collection*/ var skiAreas=new MQA.ShapeCollection(); skiAreas.collectionName='skiAreas'; skiAreas.add(createPOI('Arapahoe Basin','Arapahoe Basin',39.645649,-105.868097)); skiAreas.add(createPOI('Aspen Highlands','Aspen Highlands',39.182379,-106.855147)); skiAreas.add(createPOI('Aspen Mountain','Aspen Mountain',39.186728,-106.818662)); skiAreas.add(createPOI('Beaver Creek','Beaver Creek', 39.633001,-106.533066)); skiAreas.add(createPOI('Breckenridge Ski Resort','Breckenridge Ski Resort',39.481041,-106.066625)); skiAreas.add(createPOI('Buttermilk','Buttermilk', 39.206842,-106.859238)); skiAreas.add(createPOI('Copper Mountain','Copper Mountain', 39.500904,-106.155698)); skiAreas.add(createPOI('Crested Butte','Crested Butte',38.899736,-106.96536)); skiAreas.add(createPOI('Eldora','Eldora',39.93723,-105.583154)); skiAreas.add(createPOI('Howlsen Hill','Howlsen Hill',39.93723,-105.583154)); skiAreas.add(createPOI('Keystone','Keystone', 39.607845,-105.943734)); skiAreas.add(createPOI('Loveland','Loveland', 39.679919,-105.896495)); skiAreas.add(createPOI('Monarch','Monarch', 38.512511,-106.331453)); skiAreas.add(createPOI('Powderhorn','Powderhorn', 39.070053,-108.150006)); skiAreas.add(createPOI('Silverton','Silverton', 37.630152,-107.814308)); skiAreas.add(createPOI('Snomass','Snomass', 39.208389,-106.946967)); skiAreas.add(createPOI('Sol Vista','Sol Vista', 40.046834,-105.899203)); skiAreas.add(createPOI('Steamboat','Steamboat',40.45821,-106.805481)); skiAreas.add(createPOI('Sunlight','Sunlight',39.401307,-107.340873)); skiAreas.add(createPOI('Telluride','Telluride',37.937418,-107.822504)); skiAreas.add(createPOI('Vail','Vail',39.638278,-106.383444)); skiAreas.add(createPOI('Winter Park','Winter Park',39.886998,-105.763478)); skiAreas.add(createPOI('Wolf Creek','Wolf Creek',37.474145,-106.792844)); /*builds the shape collection*/ var shapes=new MQA.ShapeCollection(); shapes.collectionName='shapes'; shapes.bestFit=false; /*add a line*/ var line = new MQA.LineOverlay(); line.fillColor='#32D655'; line.setShapePoints([37.708817, -102.965622, 38.712905, -103.90781]); shapes.add(line); /*add a rectangle*/ var rectangle = new MQA.RectangleOverlay(); rectangle.setShapePoints([39.847136, -105.362437, 39.641389, -104.682833]); rectangle.color='#B00303'; rectangle.colorAlpha=.3; rectangle.borderWidth=4; rectangle.fillColor='#EFFF79'; rectangle.fillColorAlpha=.2; shapes.add(rectangle); /*add a polygon*/ var poly = new MQA.PolygonOverlay(); poly.setShapePoints([37.084051, -106.171873, 37.686504, -106.537498, 38.283379, -105.98906,37.482463,-105.396622,37.017607,-105.480756]); poly.color='#000000'; poly.colorAlpha=.3; poly.borderWidth=3; poly.fillColor='#075053'; poly.fillColorAlpha=.4; shapes.add(poly); /*remote collection for pictures*/ var photos = new MQA.RemoteCollection('./data/pictures.rss',new MQA.GeoRSSDeserializer()); photos.collectionName='photos'; /*remote collection for a hurricane*/ var hurricane=new MQA.RemoteCollection('./data/hurricaneivan.xml',new MQA.GeoRSSDeserializer()); hurricane.collectionName='georss'; /*actual carousel items*/ var carouselItems = [ {id: 'Shapes', title: 'Shapes', img: {url:'./images/shapes.png'}, icon: {url: './images/shapes.png'},shapeCollection:shapes}, {id: 'Ski Areas', title: 'Ski Areas', img: {url: './images/skiareas.png'}, icon:{url:'./images/skiareas.png'}, shapeCollection:skiAreas}, {id: 'Remote Photos', title: 'Remote Photos', img: {url:'http://farm4.static.flickr.com/3078/buddyicons/33309265@N02.jpg?1229295070#33309265@N02'}, icon: {url:'http://farm4.static.flickr.com/3078/buddyicons/33309265@N02.jpg?1229295070#33309265@N02'}, shapeCollection:photos}, {id: 'Hurricane', title: 'Hurricane', img: {url:'./images/hurricane.png'}, icon: {url:'./images/hurricane.png'},shapeCollection:hurricane} ]; /*build, initilize and add the control to the map*/ var searchControl = new MQA.CarouselControl(carouselItems); map.addControl(searchControl, new MQA.MapCornerPlacement(MQA.MapCorner.TOP_RIGHT)); MQA.EventManager.addListener(searchControl,'itemEnabled',bestFitter); MQA.EventManager.addListener(searchControl,'itemDisabled',bestFitter); });
Next Section: Panning