Custom Google Maps

Recently, I launched our new Interactive Campus Map that integrates with the Google Maps interface. Some of you may remember my past experiences working with the Google Maps API. Well, this is much more complicated. Although this took me more time than I would have liked to get working, I now know my way around the API (mostly). This is a huge advantage moving forward because there’s even more that I can do with it and even more to come.

Unlike the last post, this will not be a tutorial but more of a guide to get you started. You may want to walk through my source code to understand what I’m talking about. If you haven’t yet read my previous post on how to get a simple Google Maps working on your site, you might want to start there. Okay, let’s get to it.

Here’s a list of tools and resources that I used:

• Google Maps API key
• Photoshop CS3
• Dreamweaver or some kind of HTML editor
• Automatic Tile Cutter
• Mapki’s Add Your Own Custom Map
• Google Maps API Tutorial
• Google Maps API Reference
• Google Maps API Discussion Group
• csv2xml converter

What I wanted out of my custom Google Map was to use my own images (Google calls these tiles), to be able to zoom in and out, have a marker for every building with some data in the info bubble, and have some kind of search function. What you end up with is a fully interactive map in an interface that most users will already be familiar with.

Here are the steps you need to take to integrate a custom tiled map onto your site:

1. Find an image to use, preferably one with high quality for zooming
2. Use this tool to figure out the coordinates of your tiles over the standard Google Maps tiles. NOTE: if you plan on showing the standard Google Maps in addition to your custom map, you will need to ensure your image lines up and scales correctly. If you do not do this, the markers you place later will be aligned incorrectly. However, if you know you only want to show your custom map, you can be a little more forgiving on the coordinates.
3. Once you obtain the coordinates, you can configure the Automatic Tile Cutter script.
4. After you plug in your options and save the file, go into Photoshop, open your image and run the script (File->Scripts->Browse). Here it will cut up your image into 256×256 squares for all of the different zoom levels you wanted.
5. Now that you have all of your images, you are ready to add the code to make them show up in Google Maps. Follow the steps in the Mapki to create all of the GCopyright Javascript objects you need.
6. The next step is to add the custom GTileLayer object. This is what tripped me up the most because the Mapki’s tile function is a little out of date. I referenced this tutorial and used the second CustomGetTileUrl function at the bottom of the page. Eventually, I added bounds checks to display a blank image outside of the x/y coordinates. NOTE: the zoom levels passed to the GTileLayer are based off an array numbering system. For example, my lowest zoom level is 15 and my highest is 17. Therefore, in the GTileLayer object I must pass 14 and 16, respectively, in order for the tiles to show up correctly.
7. Now all that is left to do is add our custom map and center it.
8. From there, you can add your own markers via XML. Make your life easier by storing your data in a CSV file and generating the XML from that. If you were industrious, you could store your data in a SQL database and dynamically generate the XML that way.

Whew. As you can see, there’s really a lot to it with quite a few pitfalls. Google doesn’t make this any easier by providing less than helpful documentation. Plus, whatever tutorials you find are either too simple or out of date. But, the upside is that Google lets you customize just about any aspect that you would like. The one downside I would point out is that we can’t have a “Directions To/From Here” function yet. Because of all the construction and road changes around campus, the default Google Maps tiles have yet to be updated which means Google’s directions would be incorrect most of the time.

Keep an eye on the Interactive Campus Map because it will continue to be improved with new functionality. If you have any questions, just let me know.

HighEdWeb Conference

HighEdWeb is a fairly inexpensive conference for anyone involved with the Web in Higher Education, including web development, writing, and marketing. I went last year, and attendees seemed to be split 50-50 between the technical and the not as technical.  I also really liked the size.  It was large enough to be able to network with people from all over the country but small enough that you could find the same people at multiple events and continue previous conversations. (It was also the first conference I had been to where people Facebooked each other before leaving!)

I’m also speaking again this year.  My presentation is on the JQuery JavaScript library.  But this post was not just to market my talk; I really did get a lot out of this conference last year.  Early bird registration ends Friday, after that the $475 registration goes up to $600.  The conference is at Missouri State University, so travel costs are pretty low.

More information is here: http://www.highedweb.org/2008/

Welcome to the team

Longtime WebTide contributor and campus web guru Matthew Muro has joined the Web Communications team this week, and we’re stoked about having him on board.  He brings great skill, expertise and energy to the team, and we’re looking forward to his contribution to our work.  Big things ahead for us in the next year, and he’ll be a big part of that.  Welcome, Matthew.

Opera 9.5 Released

Over the weekend, Opera Software released the newest milestone of its browser, Opera 9.5. This is a completely new branch of the browser (Kestrel) and runs much more quickly than 9.2x (Merlin).

New features include:

• Opera Link: synchronizes your bookmarks, Speed Dial, and Notes between Opera installations on different computers, including Opera Mini on your phone. (View demo.)
• Enhanced address bar searches your entire browsing history, including the contents of each page.
• Security enhancements: malware protection, improved fraud protection, and support for Extended Validation SSL Certificates. (Read more about EV certificates here.)
• New rendering engine with improved site compatibility and performance.
• Opera Dragonfly, the long-awaited developer tools that allows for debugging JavaScript, inspecting CSS and the DOM, and more.
• Slick new default skin

Opera 9.5 Changelog (Windows) (The UI changes are really worth a read, especially the part about “Open with” command, spatial navigation highlighting, and Firefox style tab switching behavior, which I wrote about here.)

Opera 9.5 Features

Download Opera 9.5

For the record, Opera 9.5 scores an 83 on the Acid3 test.

Congratulations!

He Facebooked it and put it on his own blog, so I don’t think it’s a big secret.  Andy has been busy on his vacation!  Congratulations and best wishes!

Zebra Striping Experiement Results

A List Apart has just posted a pretty interesting article on zebra striping and its effectiveness among users. A study was setup to test whether or not striping the rows of tables was as really useful as we make it out to be. Considering that I used ALA’s previous article on zebra striping several years ago, I found the results a little surprising.

Essentially, the experiment found that zebra striping tables did not improve the accuracy or speed of finding information in the table. However, one thing stood out to me:

Finally, and perhaps most interestingly, a number of participants in the study spontaneously reported using their finger, on or over the computer screen, to follow down columns and across rows. Other participants used their mouse to highlight rows of interest. These people were, in effect, creating their own “temporary” zebra striping. So we may be reducing the burden on our users if we do the zebra striping for them.

What this told me is that there is a simple, easy answer to whether or not zebra striping can be helpful. Use hover styles. If the user is already using their mouse to highlight rows of interest, why not do it for them? You can break it down even further by highlighting the individual cell if you have a lot of rows and columns. I think it comes down to what is visually appealing is easier to work with, even though it may not technically improve accuracy or speed.

Here is how I handle my zebra striping.

If you want a bunch of different examples to choose from, here’s a great list.

Job Announcement - Web Developer

The Office of Web Communications has a Web Developer job now open at http://jobs.ua.edu.  The basic job description:

The Web Developer for the Office of Web Communications will be responsible for building dynamic web sites, creating and managing databases, and developing web sites that benefit the overall institutional web presence of the university. The responsibilities will extend to general UA academic web sites and specialized sites that fall within the influence of the Office of Web Communications.  

This position can expect to focus primarily on content management system evaluation/selection/implementation and the launch and administration of a new Flash media server.  It will also be responsible for redesigning existing sites and building new ones that incorporate the above.  If you or someone you know has interest, apply at http://jobs.ua.edu.

WebKit achieves 100/100 on Acid3

WebKit, the rendering engine behind Apple’s Safari web browser, has achieved a 100/100 on the rigorous Acid3 web standards test.

This makes WebKit the first open-source rendering engine to pass the test, with Opera the first browser to pass the test in a private development version. WebKit has more work to do on the test, however: rendering glitches and animation problems still exist, and the Acid3 test, while official released, has made some minor changes in the past.

A nightly build of WebKit which passes the test is available to Mac users here, with a Windows build to follow. The Safari web browser, which currently scores a 75/100 on the test, is available to both major platforms from Apple.

Hello, World!

My name is Jonathan Lanctot, and I’m the Unix Systems Administrator for the Computer-Based Honors Program. As part of my tasks as a CBH Lab Manager, I designed and maintain the CBHP Website, make periodic updates to the Honors College Website, and install and support various web applications for CBH research projects all around the University.

I’m excited to become a contributor to WebTide, and hope to bring a little insight to what I do to the University at large. I always appreciate any comments you have for me, and I hope to continue the conversation!

SXSW Interactive 2008: End of Conference Wrap-Up

Here are a few scattered general thoughts and impressions as I sit in the airport after the conclusion of SXSWi:

- SXSWi is somewhat overwhelming because of the size and scope of the event.  I heard an organizer say that the event has doubled in size just since last year, which is phenomenal, given how long this conference has been around.  That being said, it was well-organized, as it showed very few growing pains associated with such a huge increase in attendees.

- SXSW Interactive is appropriately-named, because it’s all about the interactions you have here.  It’s such a social event, from the interactive panels, to the core conversations, to the meetups and nighttime parties that are centered around the conference attendees.  My sense is that most attendees who really gain great value from attending SXSW are those who focus on the networking with industry representatives, fellow developers/designers, and thought leaders who attend.

- I think the panels here are primarily intended to spur ideas and create opportunities to engage in discussions afterward, both at the event with fellow attendees, and back at home in each attendee’s roles.  Very few of the panels (at least of the ones I attended) are hands-on to the degree of having a list of practical things to take back and implement - it’s more about taking the pulse of the interactive world, and later figuring out where your sites or products fit into the markets you care about.

- It’s a Web 2.0 world.  Discussions on social networking sites absolutely dominated the entire event.  Flickr, Twitter, Facebook, Kyte, YouTube, Dopplr, blogs, Meebo, Second Life, vlogging, etc., etc., etc.

- Also big topics of discussion:  Silverlight, content management solutions (Drupal and Expression Engine mostly), cross-browser standards (especially the IE8 beta), mobile browsing, open APIs and open source software, SEO, expanding on video capabilities, accessibility, OpenID, and consumer electronics/interactive media convergence in general, among many others.

- While certainly not a conference targeted specifically to Higher Ed, our community was well-represented in the sessions I attended that related directly or indirectly to education.

- Best panel?  Well, I found it useful to be exposed to the mainstream’s impressions of new and emerging technologies, and that will help frame up discussions on our strategies going forward.  But the most poignant panel for me was the talk by Jason Fried from 37 Signals, who discussed lessons they’ve learned while developing great web apps.  Read the notes from Day 1 if you want some great ideas on how to be more efficient and successful at your core competencies.

- Takeaways?  Well, I’m still very much on brain overload right now - I need to get back and review my notes, do some surfing, and let the information digest.  But first reactions are centered around the idea that we can possibly expand and improve our overall web presence by employing third-party technologies (CMS) and picking and choosing among 2.0 applications IF they’re warranted.  By no means does that mean we’re going to create “official” UA content on every social networking site out there - it just means that if there are opportunities to reach new audiences by employing new third-party technologies, and they’re appropriate for our mission, then they’re working considering.  Also, I think the standards movement has officially become mainstream, based on the number of panels and true “technoid” thought-leaders who have embraced and championed the movement.  Great to see, and it’s about time.

- Another big topic out here was BRAND.  That was interesting to hear, given our commitment to using the web to further UA’s brand as part of an overall institutional communications plan.  Much of the discussion of “brand” seemed to focus on the personal brand of developers, bloggers, and thought leaders, but there are parallels in how they’re using the web to further their brands, to how a company or institution might do so.  There’s more on this in several places in my notes, particularly the 11:30 a.m. panel on Day 3 and the 3:30 p.m. panel on Day 2.

- On a personal note, the food in Austin is pretty solid.  I had some great tex-mex (Chuy’s on South Congress) and BBQ (Stubb’s and IronWorks on Red River), as well as some pretty good fish tacos at Iron Cactus on 6th Street.  I didn’t get a chance to visit the UT campus, although I did see it from afar on the way in to town.  Incidentally, my flight to Austin was cancelled the night before the conference began, and they couldn’t get me there on an alternate flight until late Saturday night, which would have caused me to miss a full day and a half of the conference. SO, I jumped in the car and drove almost 800 miles on Friday in order to be there for the whole conference.  Made for a really long day, but well worth it in the end.

- The next phase of SXSW - and the much bigger event - is the music festival, which begins tomorrow.  As I sit in the airport, I’ve seen bands coming off planes by the dozens.  Over 1,600 acts are schedule to *officially* play SXSW this year - no telling how many others are here.

- OK, that’s it for now.  My flight’s boarding, and the laptop battery is almost spent.  If anyone has questions, discussion, comments or other feedback from any of my panel notes or other, please let me know.  And feel free to discuss any of it in comment threads here.