An intro to cfmap mdcfug march 2010
Download
1 / 24

An Intro to CFMap MDCFUG March 2010 - PowerPoint PPT Presentation


  • 758 Views
  • Updated 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

Related searches for An Intro to CFMap MDCFUG March 2010

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 l.jpg

An Intro to CFMap

MDCFUG

March 2010

Ajay Sathuluri

http://www.teratech.com


About me l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
CFMapItem

  • Extra markers for extra addresses


Cfmap marker window l.jpg
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 l.jpg
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 l.jpg
CFMap Binding to URL

  • markerbind="url:mapdata.cfm?cfmapname={cfmapname}&cfmaplatitude={cfmaplatitude}&cfmaplongitude={cfmaplongitude}&cfmapaddress={cfmapaddress}"


Cfmap binding parameters l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
Driving Directions demo

  • Demo: cfmap_DrivingDirections.cfm


Resources l.jpg
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”