Javascript Tag | Jacob Emerick's Blog

Setting up the Hiking Website

Even though my waterfalls site turned out to be a great way to chronicle adventures through wilderness, it has several areas that are lacking. The biggest area is the Google Maps functionality, which is shaky at best. It can only show the end points and major points along the route, but I didn't have enough data to actually upload the suggested route (waypoint by waypoint) for each journey. Also, I didn't have any way of displaying or archiving my other adventures with the waterfalls site, so I decided to make an individual web project: the hiking site.

The layout for this site was fairly simple: a full screen map with removable sidebar containing the hike and view options. Utilizing the jQuery framework would allow me to add the Google Maps pieces easily and use cool animation on different elements. The largest step was the data transfer. I only wanted to return xml, preferably formatted as KML, and use Javascript to parse the data and display it correctly.

Breaking it down to the user's view... A user will visit the main page and see a large map and a small sidebar. On the map will be icons, either for images or hikes, and the sidebar will contain links to different hikes and viewing options (view all points of interest v some points). Everything will be handled...

• Tags:
• my site
• jquery
• ajax
• javascript
• google api
• kml

Style Switcher Part B

This post assumes some intermediate understanding of Javascript, stylesheets, and cookies. It will show you how to use cookies with a style switcher to remember a user's preference and load it with their (many) return visits.

In the previous post, I explained a method for allowing users to switch between different stylesheets on your website. However, after they leave your website, there's no way for your site to remember them or which style they preferred. If they liked the 'yellow' stylesheet, they would have to click it each and every time they visited your website. The best way to avoid this problem is to set a cookie when they choose a style, then read the cookie on their return to display the preferred stylesheet.

You can create your cookie as soon as the user clicks on a style, but you'll end up overwriting the cookie several times if the user clicks multiple styles (to check out the different options). A better method is to remember the last style they view before they leave the page.

• Tags:
• cookies
• dynamic
• javascript
• css

Style Switcher Part A

This post assumes some intermediate understanding of Javascript and stylesheets. It will show you how to setup a Javascript-powered styleswitcher that works for individual pages.

One of the huge benefits that CSS, or Cascading Style Sheets, brought to web design was the ability to easily change an entire website's design and layout. Since CSS allows a separation of content and layout, a single style sheet can control all of the pages of a website. Some extra markup in the HTML may be needed for specific layout requirements, but colors, font-size, and normal layout options can be easily modified with a few lines.

This brings up an interesting opportunity: multiple stylesheets for a web site. These different stylesheets can have simple changes: a main one containing layout and general styles with several optional sheets with color information. By attaching the stylesheets to the document with the alternate tag, some browsers will allow users to switch between the sheets under their 'View' menu.

• Tags:
• dynamic
• javascript
• css

Using XSL for Websites

Throughout the course of my web development learning, I've always had a central problem to deal with. On a typical website, multiple pages have some sort of general, non-changing bits that stay constant throughout the site: headers, footers, and navigational bars are great examples. The only piece that changes regularly, and is arguably the most important piece of a web page, is the central container. How do you keep these two pieces separate on both the frontend and backend of the site? Also, if there are non-changing or simple pieces of a website that do not change from page to page, is there a way to keep them on the client side to keep bandwidth low?

There are several options to this problem, the most obvious one being AJAX. When a user clicks on a new link, a request is sent for an XML document that would be parsed out and displayed within the container. The XML would be much smaller than an entire xHTML document and would be easy to setup and send from a server. It would be a truly clean separation of data v presentation. The main fall is with the URL - an AJAX request does not refresh the address bar. A user would have difficulty linking to a specific page from a browser, and search engine robots would only see a single address for an entire site. Non-Javascript...

• Tags:
• template
• ajax
• javascript
• xml

Topographic Images on a Google Map

This post assumes intermediate understanding of the Google Maps API.

While I was working on a personal project I bumped into the need to create a Google Map that included locations and driving directions of the different Keweenaw waterfalls. This gave me the opportunity to learn about the Google Maps API, including displaying driving routes, arrays of points, and custom markers/descriptions. After working with Google Maps for awhile, I decided to take my website's map to the next level and add USGS topographic maps to the features.

Google Maps already offers several premade maps automatically with neat features, like Satellite, Terrain, and Map view that can work with street routes, but I needed to go a step further for a good topographic view. The maps work by displaying different 'tiles', or images, based on your zoom level and position. While the premade maps do all of this behind the scenes, to add custom maps (either self-made or supplied by another web service), I needed to sort out what tiles were needed and where to display them so all the latitude/longitude information could display properly.

The first step was finding a good topographic map service that had their own API that I could request tiles from. This wasn't hard - Terraserver, a service...

• Tags:
• my site
• javascript
• google api