Permalink
Browse files

Start switching over to new map and list style

  • Loading branch information...
1 parent 0631326 commit 118bb97eb16bfb554822ba600d781bd2985739db @ranguard ranguard committed Jul 31, 2012
Showing with 182 additions and 148 deletions.
  1. +11 −10 lib/heading
  2. +19 −3 lib/layout
  3. +35 −32 src/groups/continent.html
  4. +23 −27 src/groups/country.html
  5. +26 −14 src/groups/group.html
  6. +2 −7 src/groups/index.html
  7. +30 −41 src/groups/map.html
  8. +29 −0 src/includes/map.js
  9. +5 −1 src/includes/style.css
  10. +2 −13 src/index.html
View
@@ -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
@@ -7,17 +7,30 @@
<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>
<a href="/"><img src="/images/camel.png" height="30px" id="onion_logo" alt="Perl Mongers"></a>
<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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 %]
Oops, something went wrong.

0 comments on commit 118bb97

Please sign in to comment.