an intro to cfmap mdcfug march 2010 l.
Download
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

Loading in 2 Seconds...

play fullscreen
1 / 24

An Intro to CFMap MDCFUG March 2010 - PowerPoint PPT Presentation


  • 778 Views
  • Uploaded on

An Intro to CFMap MDCFUG March 2010. Ajay Sathuluri http://www.teratech.com. 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'An Intro to CFMap MDCFUG March 2010' - KeelyKia


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
an intro to cfmap mdcfug march 2010
An Intro to CFMap

MDCFUG

March 2010

Ajay Sathuluri

http://www.teratech.com

about me
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
intro
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.
google maps api key
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)
google maps api key how to specify
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……">

google maps api key how to specify6
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
google maps limitations
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

cfmap
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.
cfmap types
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.
cfmap type control
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
cfmap marker color and icon
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.
cfmapitem
CFMapItem
  • Extra markers for extra addresses
cfmap marker window
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
cfmap binding
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
cfmap binding to url
CFMap Binding to URL
  • markerbind="url:mapdata.cfm?cfmapname={cfmapname}&cfmaplatitude={cfmaplatitude}&cfmaplongitude={cfmaplongitude}&cfmapaddress={cfmapaddress}"
cfmap binding parameters
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.)
cfmap binding cfc
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
binding to cfc remote method demo
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
get the gmap object to extend
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
driving directions demo
Driving Directions demo
  • Demo: cfmap_DrivingDirections.cfm
resources
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”