SupportObjective
ColdFusion Consulting, Support and Sales
December 30, 2010 12:33 PM | By: Mike Collins | Categories: ColdFusion Maps, Google Maps

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>

Comments Comments (0) | Print Print | Send Send | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 2987 Views
December 30, 2010 12:14 PM | By: Mike Collins | Categories: ColdFusion Maps, Google Maps

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>

Comments Comments (0) | Print Print | Send Send | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 2166 Views