Charm City Map Project

A screenshot from the Charm City Map

I have had the pleasure of working with some students and faculty members at MICA on a map designed specifically with incoming freshman in mind. Pushing the boundaries of HTML and CSS (with a little bit of php for the includes) I was able to create a dynamic map showcasing points of interest, mass transit routes, streets, and roads around MICA‘s campus and all of Baltimore. I used a few advanced/unique ideas in CSS to achieve this goal and after the jump I will explain how it’s done.

Using pure XHTML and CSS for something as interactive and involved as this map is out of the ordinary. The original plan at this project’s inception was to use Flash to make the map functional, however my knowledge of Flash is minimal at best and I seem incapable of learning. Therefore, I chose to push the limits of a medium with which I am very experienced. Here are a few of the problems I had to face on this project:

Using Anchor Tags to Jump to Specific Parts of the Page’s Content

Most experienced web designers know that you can use anchor tags to automatically jump or scroll on the y-axis to a specific chunk of a page’s content. This is done by giving the anchor tag the “name” attribute and tacking “#name” onto the end of whatever link you want to jump to the named anchor tag:<a href="/url.extension#potato">Lorem Ipsum</a>Will jump to the top of the following anchor tag no matter where it is located on the page:<a href="/url.extension" name="potato">Lorem Ipsum</a>This will bring the viewer’s browser window to the very top of the anchor tag (or to the very bottom of the page if the anchor tag is too close to the bottom). However, in the case of the Charm City Map, I wanted the page to display the anchor tag in the middle of the browser window instead of on the top. The solution involves giving the anchor tag a large top padding and an offsetting negative margin:<a href="/url.extension" class="mainlink" name="potato">Content Here</a>You will need at least the following CSS to get the browser to put the main link in the middle of the page on load:
a.mainlink{
display:block;
padding:50% 0 0 0;
margin:-50% 0 0 0;
}Keep in mind, the percentages are based on the parent div, so this will work best directly in the body or in a containing div with a height of 100%.

Using Basic PHP for Includes

PHP can seem like an overwhelmingly vast and complex language, but if you are well versed in XHTML and CSS you can use some simple PHP to make your life easier when coding things. One of the most basic things you can do in PHP is create include files and place them into web pages, thus allowing you to create one file for something like the navigation of your site. You place a little bit of PHP on any pages you want the navigation to be on, and then if you have to make any changes to the nav, you do it on the external file and the changes will work on all pages.

First you have to change the extensions of any HTML file that will have an include to “.php”. The reason for this is because only .php files will recognize the language. PHP is a server side language, you will not be able to preview your files locally anymore (without something like MAMP). So, my suggestion would be to finish your HTML and CSS before you move on to the PHP implementation.

Next, decide what chunk of your code you want to turn into an include. Some good examples are navigation, headers, and footers. You are going to copy all of this code and paste it into a new PHP document, naming it appropriately. You will then replace the code on each one of your pages with the following PHP:<?php include_once('filepath/name.php'); ?>Make sure your file is in the correct place on your server and you’re are done!