Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Start switching over to new map and list style

  • Loading branch information...
commit 118bb97eb16bfb554822ba600d781bd2985739db 1 parent 0631326
@ranguard ranguard authored
View
21 lib/heading
@@ -1,11 +1,12 @@
-[%- DEFAULT heading.align = 'left'
- heading.bgcolor = "#0087d9" -%]
-<table border="0" width="100%" cellpadding="2" cellspacing="0">
-<tr><td bgcolor="#000000"><table cellpadding="4" cellspacing="0" border="0" width="100%">
- <tr>
- <td class="header" width="100%" align="[% heading.align %]" bgcolor="[% heading.bgcolor %]"><font size="5" color="#ffffff"><b>[% subtitle || title %]</b></font></td>
- </tr>
-</table>
-</td></tr>
-</table>
+[% IF hide_masthead %]
+[% ELSE %]
+<figure id="masthead">
+ <img src="/images/background_map_lr.jpg " id="masthead_image" class="photo" alt="">
+</figure>
+
+<div id="masthead_overlay">
+ <h1>Perl Mongers</h1>
+ <h3>Perl Mongers is a loose association of [% allgroupsnum %] international Perl User Groups.</h3>
+</div>
+[% END %]
View
22 lib/layout
@@ -7,9 +7,22 @@
<meta name="MsSmartTagsPreventParsing" content="TRUE" />
<title>[% title or "Perl Mongers" %]</title>
<link rel="stylesheet" href="/includes/style.css">
+ <script type="text/javascript" charset="utf-8">
+ // Global JS container
+ var PM = {};
+ </script>
+ [% IF map_page %]
+ <script type="text/javascript"
+ src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
+ </script>
+ <script type="text/javascript"
+ src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAQUWXHRLr1r3tu1Kve9Jro3pP_e3_VyWc&sensor=true">
+ </script>
+ <script type="text/javascript" src="/includes/map.js"></script>
+ [% END %]
</head>
- <body class="index">
+ <body class="index" [% ' onload="initialize()"' IF map_page %]>
<div id="wrapper">
<header>
@@ -17,7 +30,7 @@
<div id="nav_holder">
<nav>
<div id="large_copy">
- <a href="/groups/">Find a group</a>
+ <a href="/groups/map.html">Find a group</a>
<a href="/start/">Start a group</a>
<a href="/other/">Useful links</a>
</div>
@@ -29,10 +42,13 @@
</div>
</header>
-[%# INCLUDE heading %]
+[% INCLUDE heading %]
+
+<div id="content_holder">
[% content %]
+</div>
<div id="footer">
<div id="google_translate_element"></div>
View
67 src/groups/continent.html
@@ -1,44 +1,45 @@
-[%
- WRAPPER layout title = "Perl Mongers: $continent"
- onload="initialize"
- onunload="GUnload"
+[% WRAPPER layout
+ title = "Perl Mongers: $continent",
+ hide_masthead=1,
+ map_page=1
%]
<script type="text/javascript">
-var longitude = [% longitude %];
-var latitude = [% latitude %];
-var zoom = [% zoom %];
-var coords = [
-[% FOREACH country = groups.keys.sort %]
- [% IF country == 'United States of America' %]
- [% FOREACH state = groups.$country.keys.sort %]
- [% FOREACH group = groups.$country.$state %]
- [% IF group.latitude %]
- [ [% group.latitude %], [% group.longitude %] ],
- [% END %]
- [% END %]
+function initialize() {
+ [% IF latitude && longitude %]
+ var mapOptions = {
+ center: new google.maps.LatLng( [% latitude %], [% longitude %]), // show the most pins possible
+ zoom: [% zoom %],
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ };
+ PM.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
+
+ $.ajax({
+ url: 'perl_mongers.json',
+ dataType: 'json',
+ success: processMapXML,
+ });
[% END %]
- [% ELSE %]
- [% FOREACH group = groups.$country %]
- [% IF group.latitude %]
- [ [% group.latitude %], [% group.longitude %] ],
- [% END %]
- [% END %]
- [% END %]
-[% END %]
-];
-</script>
+}
+</script>
-<div id="map-canvas" style="width: 500px; height: 400px"></div>
+<div id="map_canvas" style="width:100%; height:450px"></div>
+<p style="clear:both; height: 30px">&nbsp;</p>
[% IF groups.keys.size %]
-
+<ol class="details">
<p>The following groups are in [% continent %]:</p>
-[% FOREACH country = groups.keys.sort %]
-<h2><a href="[% country_links.$country %]">[% country %]</a></h2>
+[% countries = groups.keys.sort %]
+[% USE table(countries, cols=3) %]
+[% col_nums = [0,1,2] %]
+
+[% FOREACH col = col_nums %]
+<li id="d[% col + 1 %]">
+[% FOREACH country = table.col(col) %]
+<h2><a href="[% country_links.$country %]">[% country %]</a></h2>
[% IF country == 'United States of America' %]
[% FOREACH state = groups.$country.keys.sort %]
<h3><a href="/groups/[% states.$state %]">[% state %]</a></h3>
@@ -52,15 +53,17 @@
<ul>
[% FOREACH group = groups.$country %]
<li><a href="[% group.id %].html">[% group.name | html_entity %]</a></li>
- <!-- <li><a href="[% group.web %]">[% group.name | html_entity %]</a> (<a href="[% group.id %].html">?</a>)</li> -->
[% END %]
</ul>
[% END %]
-
[% END %]
+</li>
+[% END %]
+</ol>
[% ELSE %]
<p>There are currently no groups in [% continent %].</p>
[% END %]
[% END %]
+</div>
View
50 src/groups/country.html
@@ -1,34 +1,30 @@
-[%
- WRAPPER layout title = "Perl Mongers: $country"
- onload="initialize"
- onunload="GUnload"
+[% WRAPPER layout
+ title = "Perl Mongers: $country",
+ hide_masthead=1,
+ map_page=1
%]
<script type="text/javascript">
-var longitude = [% longitude %];
-var latitude = [% latitude %];
-var zoom = [% zoom %];
-var coords = [
-[% IF country == 'United States of America' %]
- [% FOREACH state = groups.keys.sort %]
- [% FOREACH group = groups.$state %]
- [% IF group.latitude %]
- [ [% group.latitude %], [% group.longitude %] ],
- [% END %]
- [% END %]
- [% END %]
-[% ELSE %]
- [% FOREACH group = groups %]
- [% IF group.latitude %]
- [ [% group.latitude %], [% group.longitude %] ],
- [% END %]
- [% END %]
-[% END %]
-];
-</script>
-
-<div id="map-canvas" style="width: 500px; height: 400px"></div>
+function initialize() {
+ var mapOptions = {
+ center: new google.maps.LatLng( [% latitude %], [% longitude %]), // show the most pins possible
+ zoom: [% zoom %],
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ };
+ PM.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
+
+ $.ajax({
+ url: 'perl_mongers.json',
+ dataType: 'json',
+ success: processMapXML,
+ });
+}
+</script>
+
+<div id="map_canvas" style="width:100%; height:450px"></div>
+
+<p style="clear:both; height: 50px">&nbsp;</p>
[% IF groups.size %]
View
40 src/groups/group.html
@@ -1,22 +1,34 @@
-[% title = name _ " (" _ location _ ") Perl Mongers" | html_entity;
- subtitle = name;
- WRAPPER layout title = title
- onload="initialize"
- onunload="GUnload"
+[%
+title = name _ " (" _ location _ ") Perl Mongers" | html_entity;
+subtitle = name;
+WRAPPER layout
+ title = title,
+ hide_masthead=1,
+ map_page=1
%]
<script type="text/javascript">
-var longitude = [% longitude %];
-var latitude = [% latitude %];
-var zoom = [% zoom %];
-var coords = [
- [[% latitude %], [% longitude %]],
-];
-</script>
+function initialize() {
+ var mapOptions = {
+ center: new google.maps.LatLng( [% latitude %], [% longitude %]), // show the most pins possible
+ zoom: [% zoom %],
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ };
+ PM.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
+
+ $.ajax({
+ url: 'perl_mongers.json',
+ dataType: 'json',
+ success: processMapXML,
+ });
+}
+</script>
+
+<div id="map_canvas" style="width:100%; height:450px"></div>
+
+<p style="clear:both; height: 50px">&nbsp;</p>
-<div id="map-canvas" style="width: 500px; height: 400px"></div>
-<br/>
[% IF web %]
<b><a href="[% web %]">[% name | html_entity %]</a></b> ([% linked_location %])<br>
View
9 src/groups/index.html
@@ -1,15 +1,10 @@
[% WRAPPER layout title = "Perl Mongers: User groups" %]
-<a href="/groups/map.html"><img border=0
- src="/groups/world_map.png"
- alt ="Perl Monger World Map"
- title="Perl Monger World Map">
-<p>
-There are many Perl Monger groups around the world.
+<h3><a href="/groups/map.html">World Map</a></h3>
<p>
-Select a continent:
+or select a continent:
[% link_to("/groups/africa.html", "Africa") %],
[% link_to("/groups/asia.html", "Asia") %],
View
71 src/groups/map.html
@@ -1,47 +1,36 @@
-[% WRAPPER layout title = "Perl Mongers: User groups map" onload="onLoad" %]
-<script src="map.js" type="text/javascript"></script>
+[% WRAPPER layout
+ title = "Perl Mongers: User groups map",
+ hide_masthead=1,
+ map_page=1
+%]
+<script type="text/javascript">
-<br>
-<table border="0" cellpadding="0" cellspacing="0">
- <tr>
- <td colspan="10" rowspan="1">
- <form action="map.jsp" method="post">
- <table border="1" id="form" bgcolor="#999999" cellspacing="0" width="800">
- <tr>
- <td><font color="#ffffff">Recenter &amp; Zoom</font></td>
- <td><input name="World" value="World" onclick="javascript:cz(world, 15)" style="background-color: rgb(52, 52, 52); color: rgb(255, 255, 255);" type="button" /></td>
- <td><input name="USA" value="USA" onclick="javascript:cz(usa, 13)" style="background-color: rgb(52, 52, 52); color: rgb(255, 255, 255);" type="button" /></td>
- <td><input name="North America" value="North America" onclick="javascript:cz(na, 14)" style="background-color: rgb(52, 52, 52); color: rgb(255, 255, 255);" type="button" /></td>
- <td><input name="South America" value="South America" onclick="javascript:cz(sa, 14)" style="background-color: rgb(52, 52, 52); color: rgb(255, 255, 255);" type="button" /></td>
- <td><input name="Europe" value="Europe" onclick="javascript:cz(europe, 13)" style="background-color: rgb(52, 52, 52); color: rgb(255, 255, 255);" type="button" /></td>
- <td><input name="Asia" value="Asia" onclick="javascript:cz(asia, 14)" style="background-color: rgb(52, 52, 52); color: rgb(255, 255, 255);" type="button" /></td>
- <td><input name="Africa" value="Africa" onclick="javascript:cz(africa, 14)" style="background-color: rgb(52, 52, 52); color: rgb(255, 255, 255);" type="button" /></td>
- <td><input name="Australia" value="Australia" onclick="javascript:cz(australia, 13)" style="background-color: rgb(52, 52, 52); color: rgb(255, 255, 255);" type="button" /></td>
- </tr>
- </table>
- </form>
- <div id="map" style="width: 800px; height: 500px;"></div>
- </td>
- </tr>
+function initialize() {
+ var mapOptions = {
+ center: new google.maps.LatLng( 15, 0), // show the most pins possible
+ zoom: 2,
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ };
+ PM.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
+ $.ajax({
+ url: 'perl_mongers.json',
+ dataType: 'json',
+ success: processMapXML,
+ });
+}
+</script>
- <tr>
- <td>
-<ul>
- <li>Is your local group's latitude/longitude data wrong or missing? Please contact your
+<div id="map_canvas" style="width:100%; height:450px"></div>
+
+<p style="clear:both; height: 50px">&nbsp;</p>
+
+<p>Is your local group's latitude/longitude data wrong or missing? Please contact your
group leader, and they can submit new coordinates to us. (This map is only as good as
-<a href="http://www.pm.org/groups/perl_mongers.xml">our data</a>.)
- <li>Maps provided by <a href="http://www.google.com">Google</a>.
- <a href="http://www.google.com/apis/maps/">Google Maps API</a> and Javascript example lifted from
- <a href="http://www.mailinator.com/mailinator/map.html">Mailinator</a>.
- <li>If this isn't working at all please check your <a href="http://www.google.com/apis/maps/documentation/#Browser_Compatibility">browser compatibility</a>.
- <li>Don't know your lat/long? You could try
- <a href="http://www.heavens-above.com/">heavens-above.com</a>,
- <a href="http://www.fallingrain.com/world/">fallingrain.com</a>, or
- <a href="http://geocoder.us">geocoder.us</a> (US only, street level).
-</ul>
- </td>
- </tr>
-</table>
+our data: <a href="http://www.pm.org/groups/perl_mongers.xml">Master XML</a>
+ <a href="http://www.pm.org/groups/perl_mongers.json">Generated JSON</a>
+.)
+</p>
+
[% END %]
View
29 src/includes/map.js
@@ -0,0 +1,29 @@
+function processMapXML(data) {
+ $(data).each(function() {
+ var pm_group = this;
+
+ if (pm_group.latitude && pm_group.longitude && pm_group.status == 'active') {
+
+ var myLatlng = new google.maps.LatLng(pm_group.latitude, pm_group.longitude);
+
+ var marker = new google.maps.Marker({
+ position: myLatlng,
+ map: PM.map,
+ title: pm_group.name
+ });
+
+ var msg = "<h3>";
+ msg = msg + "<a href='" + pm_group.web + "'>" + pm_group.name + "</a><br/>";
+ msg = msg + "</h3>";
+
+ var infowindow = new google.maps.InfoWindow({
+ content: msg
+ });
+
+ google.maps.event.addListener(marker, 'click',
+ function() {
+ infowindow.open(PM.map, marker);
+ });
+ }
+ });
+};
View
6 src/includes/style.css
@@ -10,6 +10,10 @@ ul, ol, li, dl, dt, dd, form, fieldset, legend, figure, hgroup, td, h1, h2, h3,
font-family:Arial, sans-serif;
}
+#map_canvas {
+ top: 50px;
+ bottom: -50px;
+}
#wrapper{
/*width:1200px;*/
margin:0 auto;
@@ -113,7 +117,7 @@ img.masthead{
margin:0 0 20px 0px;
}
.details li{
- padding:11px 18px 11px 0px;
+ padding:5px 18px 5px 0px;
width:233px;
/* height:500px;*/
list-style:none;
View
15 src/index.html
@@ -1,16 +1,5 @@
[% WRAPPER layout title = "Perl Mongers" %]
-
-<figure id="masthead">
- <img src="/images/background_map_lr.jpg " id="masthead_image" class="photo" alt="">
-</figure>
-
-<div id="masthead_overlay">
- <h1>Perl Mongers</h1>
- <h3>Perl Mongers is a loose association of 255 international Perl User Groups.</h3>
-</div>
-
-<div id="content_holder">
<ol class="details">
<li id="d1">
<h3>What are Perl Mongers?</h3>
@@ -20,7 +9,7 @@
location get together periodically to discuss Perl and related topics,
or just to socialize.</p>
- <p>There are currently 255 Perl monger groups around the world</p>
+ <p>There are currently [% allgroupsnum %] Perl monger groups around the world</p>
<img src="/images/title.png">
</li>
@@ -31,6 +20,7 @@
<h3>Find a group</h3>
<p></p>
<ul class="sublist">
+ <li><a href="/groups/map.html">World Map</a> </li>
<li><a href="/groups/africa.html">Africa</a> </li>
<li><a href="/groups/asia.html">Asia</a> </li>
<li><a href="/groups/central_america.html">Central America</a> </li>
@@ -65,6 +55,5 @@
</ol>
-</div>
[% END %]
Please sign in to comment.
Something went wrong with that request. Please try again.