Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

a few updates - added "Chads Chicago", display calendar's subtitle in…

…fo when hovering over calendar name, fix a few things about displaying event info on markers, etc.

Tested in chrome/safari/FF3/IE7/IE8
  • Loading branch information...
commit a92ed0c8a6d940fe36c53c921fb31ddc7454d8e4 1 parent c74290e
@chadn authored
View
11 examples/gcm/css/mapFilter.css
@@ -61,7 +61,7 @@ table.tablesorter {margin: 0 0 0 0;}
.IWDirections{background-color:#FFF;}
/* want to save linebreaks but also wordwrap */
-.preWrapped pre {
+.preWrapped {
white-space: pre;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
@@ -70,7 +70,8 @@ table.tablesorter {margin: 0 0 0 0;}
word-wrap: break-word; /* Internet Explorer 5.5+ */
text-align:left;
font: normal small verdana, arial, helvetica, sans-serif;
- font-size: 8pt;
+ font-size: 8pt;
+ margin-bottom: 10px;
}
body {text-align:left;}
@@ -296,6 +297,12 @@ div.scrollContent {
margin: 0;
text-align: left;
}
+#calendarTitle h4 {
+ font-size: 24px;
+ margin: 5px 5px 2px 5px;
+ margin: 0;
+ text-align: left;
+}
#calendarTitle span {
font-size: 12px;
margin: 1px 5px 5px 5px;
View
1  examples/gcm/index.php
@@ -187,6 +187,7 @@ function genLink(curData) {
</ol>
<h3>Example Calendars:</h3>
<ol>
+ <a class="actionable" href="<?=$basedir?>?ed=180&u=https://www.google.com/calendar/feeds/dnr6osjdrtn4fqpf70ep8ck1rc%40group.calendar.google.com/public/basic">Chad's Chicago: Summer Festivals and More</a><br>
<a class="actionable" href="<?=$basedir?>?u=http://www.google.com/calendar/feeds/jo0ubvoi1gutr95kdtl1245u3g@group.calendar.google.com/public/basic">A New York Track Club</a><br>
<a class="actionable" href="<?=$basedir?>?sd=2011-01-01&ed=2011-12-31&u=http://www.google.com/calendar/feeds/asa5k2phscdna68j9e5410v6mc@group.calendar.google.com/public/basic">2011 Trail Races</a><br>
<a class="actionable" href="<?=$basedir?>?u=http://www.google.com/calendar/feeds/tour%2540darrellsurvey.com/public/basic">Golf Survey Tour</a><br>
View
7 examples/gcm/js/cnMapFilter.js
@@ -419,8 +419,9 @@
debug.info("parseGCalData() calendar data: ",cdata);
- if (cdata.feed.title) cnMF.gcTitle = cdata.feed.title['$t'];
- if (cdata.feed.link) cnMF.gcLink = cdata.feed.link[0]['href'];
+ cnMF.gcTitle = cdata.feed.title ? cdata.feed.title['$t'] : 'title unknown';
+ cnMF.gcLink = cdata.feed.link ? cdata.feed.link[0]['href'] : '';
+ cnMF.desc = cdata.feed.subtitle ? cdata.feed.subtitle['$t'] : 'subtitle unknown';
cnMF.reportData['fn'] = cnMF.gcTitle.replace(/\W/,"_");
var uniqAddr={};
@@ -471,6 +472,7 @@
cnMF.totalEvents = cdata.feed.openSearch$totalResults.$t || cnMF.totalEntries;
debug.log("calling mapfilter.geocode(): ", uniqAddr );
+ cnMF.myGeoDecodeComplete = false;
cnMF.myGeo = cnMF.geocodeManager({
addresses: uniqAddr,
googleApiKey: cnMF.googleApiKey,
@@ -480,6 +482,7 @@
},
geocodeCompleteCallback: function() {
//onGeoDecodeComplete();
+ cnMF.myGeoDecodeComplete = true;
if ('function' === typeof callbacks.onGeoDecodeComplete) callbacks.onGeoDecodeComplete();
}
});
View
20 examples/gcm/js/cnMapFilterUI.js
@@ -539,13 +539,14 @@
rowHTML += onlyValidCoords ? '<td><a class="eventNameTrigger actionable" onclick="cnMFUI.hItem(' + kk.id + ')" title="Click to show marker on map" href="javascript:void(0)" style="display:block">'
- + cnMFUI.htmlEncode(cnMFUI.maxStr(kk.name, 100, 0, '')) + "</a></td>"
- : '<td>'+ cnMFUI.htmlEncode(cnMFUI.maxStr(kk.name, 100, 0, '')) + '</td>';
+ + cnMFUI.htmlEncode(cnMFUI.maxStr(kk.name, 100, 0, '', 1)) + "</a></td>"
+ : '<td>'+ cnMFUI.htmlEncode(cnMFUI.maxStr(kk.name, 100, 0, '', 1)) + '</td>';
rowHTML += "<td>[<a href='" + kk.url + "' class='jumpLink' title='Click to view Calendar Event Web Page in new window' target='_blank'>Event Details</a>] "
- + cnMFUI.htmlEncode(cnMFUI.maxStr(kk.desc, 100, 0, '')) + "</td>";
+ + cnMFUI.htmlEncode(cnMFUI.maxStr(kk.desc, 140, 0, '', 1)) + "</td>";
- rowHTML += onlyValidCoords ? '<td>' + kk.addrFromGoogle + ' (<a class="actionable" href="javascript:void(0)" title="' + cnMFUI.htmlEncode(cnMFUI.maxStr(kk.addrOrig, 100, 0, '')) + '">orig</a>)</td>'
+ rowHTML += onlyValidCoords ? '<td>' + kk.addrFromGoogle + ' (<a class="actionable" href="javascript:void(0)" title="'
+ + cnMFUI.htmlEncode(cnMFUI.maxStr(kk.addrOrig, 100, 0, '', 0)) + '">orig</a>)</td>'
: '<td>'+(kk.addrOrig.match(/\w/) ? kk.addrOrig : '[empty]' )
+'<br><a href="' + kk.url + '" title="Click to edit this event (if you have permission) in a new window" target="_blank">Edit Event Address</a><br>Error: ' + kk.error + '</td>';
rowHTML += "</tr>\n";
@@ -695,7 +696,7 @@
//infoHTML = "<div class=\"IW\"><h1>"+ kk['n'] +"<\/h1><div id=\"IWContent\">"+ desc +"</div>"+footer+"</div>";
kk.infoHtml = "<div class='IW'><h1>"+ kk.name +"<\/h1>";
- kk.infoHtml += "<div id='IWContent' class='preWrapped'><pre>"+ cnMFUI.maxStr( addLinks(kk.desc), 900, 26, kk.url) +"</pre></div>";
+ kk.infoHtml += "<div id='IWContent' class='preWrapped'>"+ cnMFUI.maxStr( addLinks(kk.desc), 900, 26, kk.url) +"</div>";
kk.infoHtml += '<div id="IWZoom">';
kk.infoHtml += cnMF.formatDate(kk.dateStart, 'F D, l gx') +"-"+ cnMF.formatDate(kk.dateEnd, 'gx') +"<br>";
kk.infoHtml += '<a href="javascript:void(0)" onclick="cnMFUI.zoomTo('+ kk.id +')">Zoom To</a> - ';
@@ -842,7 +843,7 @@
updateStatus("<a title='Click to view Full Calendar' class='actionable' href='"+ cnMF.gcLink +"'>"
+ cnMF.gcTitle +"</a><br>Mapping Events ... ");
- $('#calendarTitleContent').html("<h3><a title='Click to view calendar in new window' "
+ $('#calendarTitleContent').html("<h3><a title='"+cnMF.desc+" - Click to view calendar in new window' "
+"class='jumpLink' target='_blank' href='"+ cnMF.gcLink +"'>"+ cnMF.gcTitle +"</a></h3>");
html = '<span>Calendar has '+ cnMF.totalEvents + (cnMF.totalEvents==cnMF.totalEntries ? ''
@@ -1161,7 +1162,7 @@
return $('<div/>').html(value).text();
},
- maxStr: function(str, maxChars, maxLines, link) {
+ maxStr: function(str, maxChars, maxLines, link, chopLongStrings) {
shorten = false;
if ((maxChars > 1) && (str.length > maxChars)) {
@@ -1177,9 +1178,10 @@
}
}
}
+ // chopLongStrings..
// table column width gets screwed with long strings (urls), so chop'em if longer than 15 chars!!
var rgx = /(\S{15})(\S)/;
- if (rgx.test(str)) {
+ if (chopLongStrings && rgx.test(str)) {
shorten = true;
var ss = str;
// . does not match newline - instead, use [\s\S] - http://www.regular-expressions.info/javascript.html
@@ -1198,7 +1200,7 @@
if (!shorten) return str;
if (link && link.length > 1) {
- if (link.match(/^http/i)) link = "<a href='"+ link +"' title='Link To Complete Details (new page)'>more</a>";
+ if (link.match(/^http/i)) link = "<a href='"+ link +"' target='_blank' title='Link To Complete Details (new page)'>more</a>";
return str + "..\n ("+ link +")";
//return str.substring(0,str.length-5) + "...\n ("+ link +")";
}
View
4 readme.markdown
@@ -2,9 +2,9 @@
### Using a Map as a Filter ###
-I love maps. And I love google for making maps useful, interactive, and cool. When they released the API I wanted to use google maps as a filter. That is, I wanted to filter location-based data based on what is viewable on the map canvas. Google currently does this if you goto maps and do a search. For example, search for bars and markers appear for all bars that exist on the map canvas your viewing. The difference is now you control the data source, not google.
+I love maps. And I love google for making maps useful, interactive, and cool. When they released the API I wanted to use google maps as a filter. That is, I wanted to filter location-based data based on what is viewable on the map canvas. Google currently does this if you goto maps and do a search. For example, search for bars and markers appear for all bars that exist on the map canvas your viewing. The difference between that and this project is that with this project you control the data source, not google.
-My first working example is GCM - Google Calendar Map. It uses a google calendar as the data source, plotting all calendar events with a valid location on a map. This way you can control the data source by populating the calendar with whatever data you want. For more info, check out the <a href="http://chadnorwood.com/projects/gcm">GCM Project page</a> or view <a href="http://chadnorwood.com/gcm">GCM in action</a>.
+My first working example is GCM - Google Calendar Map. It uses a google calendar as the data source, plotting all calendar events with a valid location on a map. This way you can control the data source by populating the calendar with whatever data you want. For more info, check out the <a href="http://chadnorwood.com/projects/gcm">GCM Project page</a> or view <a href="http://chadnorwood.com/gcm">GCM prototype</a> in action.
### Prototype Code ###
View
5 src/cnMapFilter.js
@@ -419,8 +419,9 @@
debug.info("parseGCalData() calendar data: ",cdata);
- if (cdata.feed.title) cnMF.gcTitle = cdata.feed.title['$t'];
- if (cdata.feed.link) cnMF.gcLink = cdata.feed.link[0]['href'];
+ cnMF.gcTitle = cdata.feed.title ? cdata.feed.title['$t'] : 'title unknown';
+ cnMF.gcLink = cdata.feed.link ? cdata.feed.link[0]['href'] : '';
+ cnMF.desc = cdata.feed.subtitle ? cdata.feed.subtitle['$t'] : 'subtitle unknown';
cnMF.reportData['fn'] = cnMF.gcTitle.replace(/\W/,"_");
var uniqAddr={};
Please sign in to comment.
Something went wrong with that request. Please try again.