Chad Things

This is the Google Calendar Map (GCM) homepage, part of the mapFilter project on github. GCM is a way to view calendar events on a google map, see About for more or go straight to the working GCM prototype. This page will change but always contain the latest and greatest on how to use GCM prototype.

• About
• Definitions
• Uses
• Key Features
• Calendar Setup
• URL Options
• Examples
• Screenshots
• Influences and Related
• Browser Compatibility
• Wish List
• Changelog

About

Paraphrased from my first GCM blog:

Basically it takes a google calendar and plots all the events on a map.  Well, at least all events that have a valid map address.  The mashup works with any google calendar, as long as its public. You provide the URL of a google calendar XML Feed to GCM, then its javascript code eats it up and spits out markers on the map and lists all events on the right side.  The list is really a table, with sortable columns (sort by date, event name, address).

The map acts like a filter – you only see events that occur on the map canvas.  For example, if the map is zoomed in to show downtown Chicago, you might only see events in grant park.  But if you zoom way out you will see events in north chicago or suburbs, too.  This is great when there is a calendar with tons of events going on all over the place.

For more details on this project, check out my GCM presentation from January 2010.  Also make sure to read the Key Features below.

Definitions

• calendar – a google calendar for now.  Only events in the calendar with valid addresses will appear on map.
• event – contains name, location, date, and description.  More than one event can be at same location or same time. Can be repeating
• map canvas – the area of the map you can see on the browser. If an event location is not on the map canvas, it will not be shown on the events list. To zoom out or change map canvas to show all events, remove the map filter by clicking “[x] Filtered by map”
• location – ‘where’ the event is.  This should be an address, otherwise GCM can’t put it on a map.  Examples of locations that are not addresses include  “Mom’s house” or “Top of Sears Tower”
• marker – an icon at a location on the map canvas.  When clicked, reveals details on events at that address (may be more than one event at same location)
• drawer – on the right side, this contains most everything not on the map – the calendar name, date sliders, GCM logo, status,  events list and filters.  The drawer can be opened/closed (shown or hidden) by clicking on the +/- in the top right.
• events list – in the drawer, list (in table format) of matching events that are on map.  The events listed are filtered and sortable by name, date, location. When filtered, it may be a subset of all the events.
• filters – appears above events list.  Currently there are just 2 filters – map and date.  Existing filters are always listed, and can be removed by clicking them.  When all filters are removed, all events are displayed in events list (map will change if necessary to show all events, too).

Uses

1. User: Going to a neighborhood, want to see what events occur in that neighborhood
   • use map to jump to that neighborhood, and the map change triggers events list and markers to update
2. User: Going to attend a specific event, want to see what else is nearby
   • use events list to highlight event, which triggers map to center on event
3. Promoter: My band, book tour, historic buildings seminar, archeological dig, etc .. has several events in several places on different dates. I want to show them all.

Key Features

1. Map as a Filter
   Move or zoom the map to the area you care about.  The markers and the events list update instantly and automatically, hiding events that are not on the map canvas
2. Date slider as a Filter
   Show only events that occur between a specific start date and end date.  You can click “Change dates” to pick a large window, say 6 months.  Once all events for those 6 months is loaded and decoded (a few seconds), you can used the date sliders to filter events to a certain week or weekend or whatever.  Instantly.  It’s fun, try it out!
3. Event Address Debugger
   If you’re not sure how many of your events have valid addresses as locations, this feature makes it easy to find out. All event locations are decoded, and if any are not valid addresses, a “Warning [3]” will appear above the events list.  Clicking on it displays a table of the problematic events.  Just click “Event Details” to load that specific google calendar event.  If you are logged into google and have edit permissions, you can update it immediately, save, and reload GCM.
4. Map Link
   Share a specific events calendar with exact map location and zoom level – just like the “link” button on google maps
5. Simple
   First time users – Grab any Google calendar’s ID, drop it in – it just works.  Or grab the “Map Link” and email or IM it to a friend.
6. Instant
   When you drag date sliders to a specific day, events list updates instantly.  Likewise, moving the map will instantly update events list to only show those events on the map canvas.
7. Sortable Events
   Events in events list are sortable by name, date, and location
8. Jump to an address, city, or zip – just type it in the box
9. Multiple events can exist on one location
10. Want all map?  you can now make the map cover the entire browser window by closing the GCM Drawer by clicking the +/- in the top right.

Calendar Setup

First, make your calendar public (if it ain’t your calendar, ask owner to do it).

1. In the Google Calendar interface, locate “My Calendars” or “Other Calendars” lists on the left.
2. Hover over desired calendar, and click the arrow the appears. A menu will appear.
3. Click “Share this calendar”
4. Check “Make this calendar public”
5. Make sure “Share only my free/busy information” is unchecked.
6. Click “Save”

Second, find your Calendar’s ID

1. In the Google Calendar interface, locate “My Calendars” or “Other Calendars” lists on the left.
2. Hover over desired calendar, and click the arrow the appears. A menu will appear.
3. Click “Calendar settings”
4. Look at the “Calendar Address” section of the screen, near XML, ICAL, HTML icons.
5. Copy string after “Calendar ID:” – it may be your email, or may look like vf3u7s6odj0r74q4lrnb730phk@group.calendar.google.com
6. NOTE: the calendar ID can also be extracted from the XML Feed. For example, xxxx@group.calendar.google.com is the id for this XML Feed:
   https://www.google.com/calendar/feeds/xxxx@group.calendar.google.com/public/basic

Lastly, Paste the Google Calendar ID in the box above. Optionally add more Calendar IDs, separated by spaces. Click “Add Calendar” .. you’re off!

• Before (no calendar)
  https://chadnorwood.com/gcm/
• After (example with calendar)
  https://chadnorwood.com/gcm/?gc=webdog6@gmail.com

URL Options

This section explains how some of the (un)documented options for https://chadnorwood.com/gcm work.  Options are standard key=value params in the URL.

• sd= Startdate
• ed= EndDate
  • GCM will fetch all events on calendar beginning with Startdate and up to and including EndDate
  • date can be YYYY-MM-DD format, or YYYY-M-D format, like this:
    • sd=2011-2-12
  • or date can be an offset number of days from today,
    • ed=42 means 42 days (6 weeks) from today
    • sd=-7 means 7 days before today (useful to find events that already occurred)
  • set automatically when clicking “map link”
• u= URL
  • set automatically when clicking “map link”
  • the original way to load calendar via XML URL feed.  This has been deprecated in favor of gc=
• gc= Google Calendar ID
  • set automatically when clicking “map link”
  • instead of a complete URL passed via ‘u’ param, just pass the email feed from the URL to the ‘gc’ param.
  • For example,
    • instead of this:  https://chadnorwood.com/gcm/?u=https://www.google.com/calendar/feeds/dnr6osjdrtn4fqpf70ep8ck1rc@group.calendar.google.com/public/basic
      
    • Do this  https://chadnorwood.com/gcm/?gc=dnr6osjdrtn4fqpf70ep8ck1rc@group.calendar.google.com
  • Multiple google calendars can now be shown on a map at the same time.  Just use the ‘gc’ param mentioned above, and separate each calendar ID with a comma.
  • For example
    • This URL: https://chadnorwood.com/gcm/?gc=webdog6@gmail.com,dnr6osjdrtn4fqpf70ep8ck1rc@group.calendar.google.com
    • Will show these 2 calendars: https://www.google.com/calendar/feeds/webdog6@gmail.com/public/basic – https://www.google.com/calendar/feeds/dnr6osjdrtn4fqpf70ep8ck1rc@group.calendar.google.com/public/basic
• z= Zoom
  • zoom level, where z=1 is zoomed out (earth), z=18 is zoomed in (street)
  • set automatically when clicking “map link”
• lat= latitude,
• lng= longitude
  • coordinates of where to start. must be between -180 and 180.
  • set automatically when clicking “map link”
• cd= close drawer
  • set cd=1 to close drawer after calendar events, markers, and map are all ready.
  • set cd=2 to close drawer quicker, as soon as page starts loading
• tz= Timezone
  • as of 2011-9-21, gcm defaults to browser’s timezone.  Adding tz=cal to URL will use calendar’s timezone.  Ex: https://chadnorwood.com/gcm/?tz=cal&gc=dnr6osjdrtn4fqpf70ep8ck1rc%40group.calendar.google.com
• os= Overlapping Sliders
  • Overlapping slider handles can be forced on by setting “os=1“ in URL parameters. Likewise, the original slider behavior can be forced on by setting “os=0“ in URL parameters. More in 2012-6-6 changelog.  Example:  https://chadnorwood.com/gcm/?gc=webdog6@gmail.com&os=1

Examples

Potential Examples:

• Tour schedule for bands
• Garage sales on craigslist
• Homeowners: Open Houses
• Chicago Summer Festivals

Actual Working Examples

• Chad’s Chicago: Summer Festivals and More
• Geocaching (Spain)
• A New York Track Club

Screenshots

more here

Influences and Related

• UI
  • Google.  Duh.
  • kayak.com filters
  • padmapper.com
• Code
  • jquery
  • jquery-ui

As of September 2010, this is very much a prototype.  That means lots of trying out things to see what works. There are many bits and pieces from other projects, more details coming soon.

Browser Compatibility

Tested to work with the following browsers:

• Safari
• Chrome
• Firefox
• IE9
• IE8
• IE7 (maps can be buggy)

Wish List

• Text box as a Filter
  • type chars in a box and only events that contain those chars will show
• Code cleanup
  • Lots here

Changelog

This info is now in the mapfilter changelog on github

This file can also be viewed as a GCP project on github pages