An Intro to CFMap MDCFUG March 2010

1. An Intro to CFMap MDCFUG March 2010 Ajay Sathuluri http://www.teratech.com

2. About Me • Ajay Sathuluri • Email: ajay@teratech.com • URL: http://www.teratech.com • 10+ years with ColdFusion • 8 years with Fusebox • Also work with SQL, Oracle, JavaScript, VB, HTML, Design, Print Media • Server Tuning, Administration, Load Testing • Teach one-on-one and custom classes • On site and custom development • Fusebox and Process Methodology

3. Intro • New cfmap tag can create an interactive map using the Google Maps API. • There is nothing in this control that couldn’t be done already using the API. • Much easier to use.

4. Google Maps API Key • String that authorizes you to get Google Maps. • Based on domain and path • This domain+port, folder and below • http://mydomain.com/ • http://mydomain.com/office1/ • Doesn’t have to be a public URL • Log in to any Google account, request a Maps API key for that URL • http://code.google.com/intl/en/apis/maps • Key will be valid for any maps requested from under that folder, on that domain+port (based on referrer URL)

5. Google Maps API Key: How to specify • There are three options for setting this key in your application: server-wide, per-application, and per-page • Option 1: • Server-wide • In CFAdmin, Settings page, "Google Map API Key" • Option 2: • Per-Application, for whole application • In Application.cfc at top, as application property: <cfset this.googlemapkey = "ABQI……">

6. Google Maps API Key: How to specify • Option 3: • Pass as a structure key to params of cfajaximport (attribute params gets a structure, with var "googlemapkey") <cfset myparams = StructNew()> <cfset myparams["googlemapkey"] = "ABQI….."> <cfajaximport params = "#myparams#"> Or: <cfajaximport params="#{googlemapkey='ABQI…….'}#"/> • Then, just use the CFMap tag • Must be in the same page

7. Google Maps limitations • Free • Performance limited • Google will limit access to resolving address to latitude and longitude • Resolving address to latitude + longitude requires extra processing for them • If you have a database of locations/addresses, would be good to keep the latitude and longitude • Error: “The given key has gone over the requests limit in the 24 hour period or has submitted too many requests in too short a period of time. If you're sending multiple requests in parallel or in a tight loop, use a timer or pause in your code to make sure you don't send the requests too quickly.” GeoStatus Code http://code.google.com/apis/maps/documentation/reference.html#GGeoStatusCode

8. CFMap • CFMap • Embeds a geographical map within a ColdFusion web page. • Must be unique within this page by the name attribute • ColdFusion supports only embedding of Google maps. • CFMapItem • The cfmapitem tag is a child tag of the cfmap tag. • This tag creates additional markers, for more locations.

9. CFMap types • Type of map that shows up. • Types: • map • satellite • hybrid • terrain • earth: If you use type="earth", you are prompted to download Google Earth 3D plug-in.

10. CFMap type control • typecontrol="basic|advanced|none" • Allows you to select which map type to display • basic: Displays 3 buttons horizontally, that allow you to select type map, satellite, or hybrid. • (livedocs is wrong here – not a dropdown) • none • advanced: Displays a drop-down list with all five type options • Demo

11. CFMap marker color and icon • markericon • Relative or absolute URL path to an image file • markercolor • Indicates the color of the marker. • Specify an RGB hex value: for example , “AA0000” for red • NOTE: Livedocs lies again. Says has to be a string value: "black", "red", or "green". • By default, the center marker is green in color. • The attributes markericon and markercolor are mutually exclusive.

12. CFMap marker color and icon: Demo • Demo

13. CFMapItem • Extra markers for extra addresses

14. CFMap marker window • The marker window is what shows up when you click on the marker for an address. • showmarkerwindow • True/false: show marker window • (Livedocs syntax summary has a typo: winodw) • markerwindowcontent • HTML to display after clicking on the icon • markerbind • Use bind expression (CFC, plain URL, or JS function) to get HTML for marker window • Mutually exclusive with markerwindowcontent

15. CFMap marker window demo • Demo

16. CFMap Binding • Attribute markerbind • Dynamically gets HTML for the marker window • Like other CF AJAX binding • Bind to JS function, CFC method, or URL • Pass parameters for this address

17. CFMap Binding to URL • markerbind="url:mapdata.cfm?cfmapname={cfmapname}&cfmaplatitude={cfmaplatitude}&cfmaplongitude={cfmaplongitude}&cfmapaddress={cfmapaddress}"

18. CFMap Binding parameters • cfmapname • The name of the map. • Also: If it comes from a cfmapitem, this is the name you specify in the cfmapitem tag, not the map name! You can use this to pass a unique ID • Should be unique within the page • cfmaplatitude • The latitude value for the location, in degrees. This value is set as the center of the map. • cfmaplongitude • The longitude value for the location, in degrees. This value is set as the center of the map. • cfmapaddress • The address of the location, which is set as the center of the map. • (Note: This address may not get passed through for mapitems.)

19. CFMap Binding: URL Demo

20. CFMap Binding: CFC • markerbind="cfc:maps.getMapData({cfmapname}, {cfmaplatitude}, {cfmaplongitude}, {cfmapaddress})" • Assumes you have a maps.cfc in same folder, with a remote getMapData method, that gets those arguments and returns an HTML string

21. Binding to CFC remote method: Demo <cffunction name="getMapData" access="remote" returntype="string"> <cfargument name="cfmapname" hint="The name of the map."> <cfargument name="cfmaplatitude" hint="The latitude value for the location, in degrees. This value is set as the center of the map."> <cfargument name="cfmaplongitude" hint="The longitude value for the location, in degrees. This value is set as the center of the map."> <cfargument name="cfmapaddress" hint="The address of the location, which is set as the center of the map."> • Demo

22. Get the GMap object to extend • In javascript, call ColdFusion.Map.getMapObject("themap") where your cfmap name is “themap”, and extend with other google map info • Warning: this ties your code to the Google Maps implementation

23. Driving Directions demo • Demo: cfmap_DrivingDirections.cfm

24. Resources • search for "cfmap site:help.adobe.com“ • http://www.google.com/search?q=cfmap+site%3Ahelp.adobe.com • http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec22c24-7a01.html • Using Ajax User Interface Components and Features • In CF9 Livedocs, “Developing ColdFusion 9 Applications” / “Requesting and Presenting Information” has 2 main topics for Ajax, including geographical maps • Search for “site:help.adobe.com Binding data to form fields”