Design, photography and ramblings

Month: February 2011

Referencing a location in Google Maps without a street address

If you use Google Calendar service as I do, you probably rarely enter an address into the ‘Where’ location field for the events you create. For instance I will enter things such as ‘UNC Genetics Building’.  This works great for me because I know where this building is located.  But, if I share my calendar with others and they see ‘UNC Genetics Building’ listed as the location, they may not know where the building is located on a map. To complicate matters, an auto-generated ‘map’ link gets created for the event that can intelligently deal with address locations but has no clue where ‘UNC Genetics Building’ is located.  Thus anyone viewing your event and curious about the map location will be unpleasantly surprised that the map is unhelpful.

Two birds with one stone

What if we want our Google Calendar event to have map link to this building or any building that doesn’t really have a defined street address? Well, first we must go to Google Maps to find the building.

To obtain a reference to a spot on a Google Map, zoom in on the location you want to reference and use the ‘center map’ right-click option to center the location on the map (below is a screenshot showing this).

 

Next copy the http link for the map and (this is where I get technical) extract the ‘ll’ query option from the address as highlighted below.
http://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=202406211964991804611.00049d0a3774678a238b3&ll=35.901318,-79.054259&spn=0.003033,0.004544&z=18

 

Once you have this number, 35.901318,-79.054259 (the latitude and longitudinal coordinates for the location above), you are now able to reference this location in Google Maps and Google Calendar events.  In a Google Calendar event, enter 35.901318,-79.054259 (UNC Genetics Building) into the ‘Where’ field.  NOTE: The latitude and longitude coordinates MUST BE entered first followed by an (optional) description in parentheses. When you save the event, the map link created for you will redirect you to a Google map with the highlighted location (as shown below).

 

When you click on the map link in the Google Calendar event, you should be redirected to Google Maps with the building location marked on the map.


Now you have learned how to reference Google Map locations (buildings, barns, a picnic area at the lake…) without the need for street addresses.  Now when you have a barn party out on the farm, miles from civilization and proper street addresses, your Google Calendar event will show your friends where to find the barn.

Force client CSS or javascript refresh

So you update the CSS and javascript for your website frequently, but most of your website visitors are reporting not seeing your latest style changes?  Is this a caching issue in their browser?  Can I force client browsers to pull the latest version of CSS or javascript files when I update them?

The answer is yes, this is probably a caching issue, but it is easily resolved.  When you reference you CSS or other files like javascript for instance in your html like so:

<link rel="stylesheet" type="text/css" href="lightbox.css" media="all" />

…a web browser accessing the webpage normally caches a copy of the file so subsequent visits to the page does not require the browser to download the file again unnecessarily.  This can be a good thing most of the time since you want to keep bandwidth usage to a minimum.  If the CSS hasn’t changed since the website visitor last viewed the page then there is no reason to force the browser to download the same file content over and over.

Forcing a refresh

But how do you tell a web browser to grab a new version of the CSS script after you make an update to it?  Yes you could rename the CSS file each time you update it, but that is silly.  Not only would you need to ensure you update all of the references to the script in your html, but it just isn’t necessary.  Simply add a querystring element to the file name in the html reference like so:

<link rel="stylesheet" type="text/css" href="lightbox.css?v=2" media="all" />

Here I added a ‘?v=2’ string to the end of the file name but it can be a datestamp or whatever you want basically.  This is the equivalent to changing the the file name, without the need to change the physical file name. The web browser just interprets it as this script (the lightbox.css in this case) as needing to process the v=2 you are passing through the querystring.  Since your CSS isn’t actually doing anything with the query values the script doesn’t care if the querystring is present.  The only thing that matters is the browser thinks something is different.

So for instance, each time you update a .css or .js script you could change the querystring to increment like v=3, v=4, etc.  This also allows you to update the scripts you have on your production website and see the changes (by performing a shift+reload on your browser) while silently keeping the changes from showing up for your other visitors until you change or add the querystring value; since most browsers will cache the CSS file your site visitors would not notice the change unless until you update the querystring.

Additional usage

There you go.  Now you know how to force client browsers to download the latest versions of your included scripts when you make an update.  Some Content Management Systems allow inline editing of CSS (such as the Joomla CMS).  This would allow you to build a function into the CMS that appends the latest date stamp of the CSS script to a querystring referencing the CSS file in your site template.  This may not be something you would want in all cases, but it would be a case for dynamically updating your site html for your site vistors when you make an update to the CSS.

Simple image mapping using CSS

Below is the html and CSS code to map an image. IE is a pain in the butt about letting us set the height of the link block without an image. So I am forcing the issue by added a blank image to the links. The image defines the height of the link area (which was just removed from the css). Make sure the links use a target of parent so that the links will leave the iframe wrapper (if you put this in an iframe, as I have below).

<style type="text/css">
.swine_flu_img { position: relative; width: 151px; height: 141px; background-image: url(http://pgale.web.unc.edu/?attachment_id=315); background-repeat: no-repeat; }
.link-1-Top { top: 34px; }
.link-2-Top { top: 53px; }
.link-3-Top { top: 72px; }
.link-4-Top { top: 90px; }
.linkBase { position: absolute; left: 20px; width: 110px; }
.linkHover:hover { opacity:0.2;filter:alpha(opacity=20); background-color: #fff; border: 1px dotted #fff; }
</style>
<div class="swine_flu_img">
<a class="linkHover linkBase link-1-Top" href="http://www.sph.unc.edu/swineflu#nc" title="N.C. Info" target="_parent"><img src="http://www.sph.unc.edu/images/blank.png" height="14px" border="0"></a>
<a class="linkHover linkBase link-2-Top" href="http://www.sph.unc.edu/swineflu#unc" title="UNC Info" target="_parent"><img src="http://www.sph.unc.edu/images/blank.png" height="14px" border="0"></a>
<a class="linkHover linkBase link-3-Top" href="http://www.sph.unc.edu/swineflu#school" title="School Info" target="_parent"><img src="http://www.sph.unc.edu/images/blank.png" height="14px" border="0"></a>
<a class="linkHover linkBase link-4-Top" href="http://www.sph.unc.edu/swineflu#news" title="In the News" target="_parent"><img src="http://www.sph.unc.edu/images/blank.png" height="14px" border="0"></a>
</div>