An intro to cfmap mdcfug march 2010
Download
1 / 24

An Intro to CFMapMDCFUG 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: [email protected] 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 CFMapMDCFUG 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 CFMapMDCFUG 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: [email protected]

  • 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”


ad