justCF

I recently needed to create some ColdFusion code to call into Zillow so I thought it would be worth sharing.

The first thing you will need is an ID from Zillow to give you access to the http services. They use the term web services but they are really http services. You can find out everything you need to know about getting started and the Zillow APIs here: Getting Started with Zillow

Once you have your ID you can enter it into the below code and test it on your site.

I posted a demo here: DEMO

view plain print about
1<h1>Zillow Zestimate</h1>
2<cfparam name="form.address" default="671 Lincoln Ave" >
3<cfparam name="form.city" default="Winnetka">
4<cfparam name="form.state" default="IL">
5<cfparam name="form.Zip" default="60093">
6<cfoutput>
7<form name="zform" method="post" >
8    Address: <input type="text" name="address" value="#form.address#" size="35"/>
9 City: <input type="text" name="city" value="#form.city#" size="20"/>
10 State: <input type="text" name="state" value="#form.state#" size="3"/>
11 Zip: <input type="text" name="Zip" value="#form.Zip#" size="14"/>
12 <input type="submit" name="getzestimate" value="Get Zestimate" />
13</form>
14
15<cfif isdefined("form.getzestimate") >
16    <cfset hz = 'na'>
17    <cfset lz = 'na'>
18    <cfset csz = form.city & '+' & form.state & '+' & form.zip>
19 <cfset zurl = 'http://www.zillow.com/webservice/GetSearchResults.htm?zws-id=ENTER YOUR WSID HERE&address=#urlEncodedFormat(form.address)#&citystatezip=#urlEncodedFormat(csz)#'>
20 <cfhttp method="get" url="#zurl#" result="zsearch">
21 <cfset xmlResult = trim(zsearch.FileContent)>
22 <cfset request.zillow = XmlParse(REReplace( xmlResult, "^[^<]*", "", "all" ) ) />
23 <cfif findnocase('error',request.zillow.searchresults.message.text ) lt 1>
24 <cfset h = trim(request.zillow.searchresults.response.results.result.zestimate.valuationrange.high.xmltext)>
25 <cfset l = trim(request.zillow.searchresults.response.results.result.zestimate.valuationrange.low.xmltext)>
26 <cfif isnumeric(h)>
27 <cfset hz = dollarformat(h)>
28 </cfif>
29 <cfif isnumeric(l)>
30 <cfset lz = dollarformat(l)>
31 </cfif>
32 <h3>Zestimate Range: From #lz# to #hz#</h3> <a href='#request.zillow.searchresults.response.results.result.links.homedetails.xmltext#'
33 target="_new">
<h3>View Property at Zillow.com</h3></a>
34     <hr />
35        All the other Property Details<br />
36        <cfdump var='#request.zillow#'>
37 <cfelse>
38     Zillow could not recognize address
39 </cfif>
40</cfif>
41</cfoutput>

I needed to have a user easily enter a latitude and longitude where there might not be a true address, so I created a simple script to populate form variables when a user doubleclicks a Google Map.

The below is just javascript and html which uses the Google Map API V2 to place a map on the page which by default centers the map when you doubleclick.

The function that is fired in a dblclick event will then set the 2 form variables and leave a marker behind to help the user know where they clicked.

You will need to change the center points and the form names, but all this could be dynamically set as well.

Hope you can use this in your apps.

Note: you will need to fix the 2 InvalidTag's with script.

<InvalidTag type="text/javascript"> // JavaScript Document var cm_map; var centerLon = '-81.655651'; var centerLat = '30.332184'; var zoomLevel = 12; var latforminput = ''; var lngforminput = ''; var marker; function cm_load() { // create the map and display in div name cm_map cm_map = new GMap2(document.getElementById("cm_map")); cm_map.addControl(new GLargeMapControl()); cm_map.addControl(new GMapTypeControl()); cm_map.setCenter(new GLatLng( centerLat, centerLon), zoomLevel); // initialize vars for form fields to populate latforminput = document.getElementById("latinput"); lngforminput = document.getElementById("lnginput"); // On Dblclick set form fields and leave a marker GEvent.addListener(cm_map, "dblclick", function(x,ll) { latforminput.value = ll.lat(); lngforminput.value = ll.lng(); marker = new GMarker(ll, {draggable: false}); cm_map.addOverlay(marker); //alert('lat:' + ll.lat() + ' lon:' + ll.lng() ); }); } setTimeout('cm_load()', 500); </script> <!--- Get Google Map API V2 and set Google key---> <InvalidTag src="http://maps.google.com/maps?file=api&v=2&key=ENTERYOURGOOGLEMAPKEYHERE" type="text/javascript"></script> <!--- Map Div ---> <div id="cm_map" style="width:300px; height:300px"> </div> <!--- Sample Form with values that will be populated when user Double Clicks on map---> <form name="setlatlng"> Lat: <input type="text" name="lat" id="latinput" value=""> <br /> Lng: <input type="text" name="lng" id="lnginput" value=""> </form>

In writing a map application with ColdFusion I needed to create some custom icons and discovered an easy way to take any small icon and create hundreds of them with sequential numbers overlayed on top of the icon.

There are a number of sites with free icons, but they all seem to stop at 99, I needed to go into the hundreds in some cases, which made me start to look at what cfimage can do for me.

First, I went I downloaded a default Google icon as my base (20x34px), then I created new blank icons with differing colors within Photoshop. I saved all the blank icons in a directory called /icons off my root directory. Once I have all the blanks I then edit the list in the below script.

The script will create a directory for each color, so for blue you will have /icons/blue/mapicon1.png thru mapicon99.png or however you create.

I think you could move the ImageNew out of the loop and into a variable but it works as written and is a one time conversion.

My next idea is to have user generated icons, by having the users select the background and text color.

I also want to create multiple lists to change the text color, since some backgrounds need black text.

This should be enough to get you started. Enjoy.

<cfset whitecolorlist = "black,blue,blueball,brightgreen,chestnut,chocolate,cyan,darkblue"> <cfset currentDir = getdirectoryfrompath(getbasetemplatepath())> <cfoutput> <!--- Loop colors and create icons inside relative directory ---> <cfloop list="#whitecolorlist#" index="coloritem"> <cfset iconcolor = coloritem> <cfset currentcolordirectory = currentdir & iconcolor> <!--- create a directory for the color if it does not exist---> <cfif not directoryexists(currentcolordirectory)> <cfdirectory action = "create" directory = "#currentcolordirectory#" > </cfif> <cfloop from="11" to="99" index="i"> <cfset myImage=ImageNew("blank#iconcolor#.png")> <cfset ImageSetDrawingColor(myImage,"white")> <cfset attr = StructNew()> <cfset attr.style="bold"> <cfset attr.size=9> <cfset attr.font="verdana"> <cfset attr.underline="no"> <!--- Need to play with x offset depending how many characters.---> <cfif i lt 10> <cfset x = 7> </cfif> <cfif i gt 9 and i lt 100> <cfset x = 4> </cfif> <cfif i gt 99 and i lt 1000> <cfset x = 1> </cfif> <cfset ImageDrawText(myImage,i,#x#,12,attr)> <!--- Place image in a directory based on color ---> <cfimage source="#myImage#" action="write" destination="#currentcolordirectory#/mapicon#i#.png" overwrite="yes"> <img src="/icons/#iconcolor#/mapicon#i#.png"/> </cfloop> </cfloop> </cfoutput>

If you want your code to work across multiple domains when using Google Maps you will need to dynamically change your Google Maps key based on request. Google requires you have a unique key for each host that makes calls into Google.

I solved this by placing a few statements in my application.cfc onrequest function.

The code checks the cgi.http_host and then sets the correct key value.

I created the all the keys at http://code.google.com/apis/maps/signup.html

view plain print about
1<cfif findnocase("123.com", cgi.HTTP_HOST) GT 0>
2 <cfset ajaxparams['googlemapkey'] = 'actual key from google'>
3</cfif>
4<cfif findnocase("345.com", cgi.HTTP_HOST) GT 0>
5 <cfset ajaxparams['googlemapkey'] = 'actual key from google'>
6</cfif>
7<cfif findnocase("567.com", cgi.HTTP_HOST) GT 0>
8 <cfset ajaxparams['googlemapkey'] = 'actual key from google'>
9</cfif>
10<cfajaximport params="#ajaxparams#">

If you just have one host you can alternatively set the key inside the administrator.

BlogCFC was created by Raymond Camden. This blog is running version 5.9.5.004.