an intro to cfmap mdcfug march 2010 n.
Skip this Video
Loading SlideShow in 5 Seconds..
An Intro to CFMap MDCFUG March 2010 PowerPoint Presentation
Download Presentation
An Intro to CFMap MDCFUG March 2010

An Intro to CFMap MDCFUG March 2010

802 Views Download Presentation
Download Presentation

An Intro to CFMap MDCFUG March 2010

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. An Intro to CFMap MDCFUG March 2010 Ajay Sathuluri

  2. About Me • Ajay Sathuluri • Email: • URL: • 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 • • • Doesn’t have to be a public URL • Log in to any Google account, request a Maps API key for that URL • • 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

  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“ • • • 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 “ Binding data to form fields”