From 54026e89eb9cefeebc97eb16a055d3b9193439a6 Mon Sep 17 00:00:00 2001
From: Matt Stratton <matt.stratton@gmail.com>
Date: Wed, 11 Jan 2017 23:07:30 -0800
Subject: [PATCH] Make map load with data

Also changed coordinates for pony events

Signed-off-by: Matt Stratton <matt.stratton@gmail.com>
---
 exampleSite/data/events/2017-hoofington.yml |   2 +-
 exampleSite/data/events/2017-ponyville.yml  |   2 +-
 layouts/index.html                          | 101 +-------------------
 layouts/partials/map.html                   |  89 +++++++++++++++++
 4 files changed, 92 insertions(+), 102 deletions(-)
 create mode 100644 layouts/partials/map.html

diff --git a/exampleSite/data/events/2017-hoofington.yml b/exampleSite/data/events/2017-hoofington.yml
index bd3828626..f188986f5 100644
--- a/exampleSite/data/events/2017-hoofington.yml
+++ b/exampleSite/data/events/2017-hoofington.yml
@@ -8,7 +8,7 @@ enddate: 2017-02-01
 cfp_date_start: 2016-12-01
 cfp_date_end: 2016-12-30
 cfp_date_announce: 2017-01-01
-coordinates: "41.882219, -87.640530"
+coordinates: "-22.242517, 25.859375"
 location: "Hoofington Palace"
 newnav: "yes"
 # navigationelements: ["welcome", "contact", "location", "program", "propose", "proposals", "conduct", "sponsor"]
diff --git a/exampleSite/data/events/2017-ponyville.yml b/exampleSite/data/events/2017-ponyville.yml
index bed8df2d6..c6c7147b5 100644
--- a/exampleSite/data/events/2017-ponyville.yml
+++ b/exampleSite/data/events/2017-ponyville.yml
@@ -8,7 +8,7 @@ enddate: 2017-01-30
 cfp_date_start: 2016-12-01
 cfp_date_end: 2016-12-30
 cfp_date_announce: 2017-01-01
-coordinates: "41.882219, -87.640530"
+coordinates: "-43.814067, 170.703125"
 location: "Applejack House"
 newnav: "yes"
 # navigationelements: ["welcome", "contact", "location", "program", "propose", "proposals", "conduct", "sponsor"]
diff --git a/layouts/index.html b/layouts/index.html
index 096b4390a..cb92a9c94 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -2,106 +2,7 @@
 
     <div class="row">
         <div class="col-md-12">
-            <!--
-Customize the labels on the map
-
-*References*
-- http://code.google.com/apis/maps/documentation/javascript/maptypes.html#StyledMaps
-- http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1/examples/basic.html
--->
-            <link href="/css/googlemaps.css" rel="stylesheet">
-            <script type="text/javascript" language="javascript">
-                function initialize() {
-                    var map;
-                    var bounds = new google.maps.LatLngBounds();
-                    var mapOptions = {
-                        mapTypeId: 'roadmap'
-                    };
-
-                    // Display a map on the page
-                    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
-                    map.setTilt(45);
-
-                    // Add upcoming events here Get Latitude and Longitude of a Point: http://itouchmap.com/latlong.html
-                    var markers = [
-                        [
-                            'Berlin', 52.524332, 13.389849, 'Nov 16', '/events/2016-berlin'
-                        ],
-                        [
-                            'Brasília', -15.7951612, -47.8934636, 'Nov 18', '/events/2016-brasilia'
-                        ],
-                        [
-                            'Cape Town', -33.935600, 18.457423, 'Nov 7', '/events/2016-capetown'
-                        ],
-                        [
-                            'Nashville', 36.160606, -86.7746752, 'Nov 10', '/events/2016-nashville'
-                        ],
-                        [
-                            'Paris', 48.871047, 2.345704, 'Nov 28', '/events/2016-paris'
-                        ],
-                        [
-                            'Sydney', -33.8688, 151.2093, 'Dec 1', '/events/2016-sydney'
-                        ],
-                        [
-                            'Tel Aviv', 32.1052681, 34.8072141, 'Dec 12', '/events/2016-telaviv'
-                        ],
-                        [
-                            'Warsaw', 52.1800879, 20.9766055, 'Nov 22', '/events/2016-warsaw'
-                        ],
-                        [
-                            'Amsterdam', 52.376862, 4.922078, 'Jun 28', '/events/2017-amsterdam'
-                        ],
-                        [
-                            'Austin', 30.284901, -97.732391, 'May 4', '/events/2017-austin'
-                        ],
-                        [
-                            'Baltimore', 39.286400, -76.605606, 'Mar 7', '/events/2017-baltimore'
-                        ],
-                        [
-                            'Charlotte', 35.2271, -80.8431, 'Feb 6', '/events/2017-charlotte'
-                        ],
-                        [
-                            'Minneapolis', 44.972610, -93.272960, 'Jul 25', '/events/2017-minneapolis'
-                        ],
-                        [
-                            'Salt Lake City', 40.552756, -111.901249, 'May 16', '/events/2017-salt-lake-city'
-                        ],
-                        [
-                            'Seattle', 47.606209, -122.332071, 'Apr 26', '/events/2017-seattle'
-                        ],
-                        ['Zürich', 47.497854, 8.731663, 'May 3', '/events/2017-zurich']
-                    ];
-
-                    // Display multiple markers on a map var infoWindow = new google.maps.InfoWindow(), marker, i; Loop through our array of markers & place each one on the map
-                    for (i = 0; i < markers.length; i++) {
-                        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
-                        bounds.extend(position);
-                        marker = new MarkerWithLabel({position: position, map: map, labelContent: markers[i][0] + "<br>" + markers[i][3],
-                            labelAnchor: new google.maps.Point(25, 50),
-                            labelClass: "labels",
-                            labelStyle: {
-                                opacity: 1
-                            }
-                        });
-                        // cityLink = markers[i][4] This isn't working right now btw google.maps.event.addListener(marker, "click", function (e) { location.href=cityLink}); refocus
-                        map.fitBounds(bounds);
-                    }
-                }
-            </script>
-
-            <script type="text/javascript" language="javascript">
-                window.onload = function () {
-                    initialize();
-                };
-            </script>
-
-            <script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?key=AIzaSyC1bvNK9qFJGEhoWNbQuojmJJ1Tg0DoOew"></script>
-            <!-- <script type="text/javascript" src="/js/googlemaps_label.js"></script> -->
-            <!-- <script type="text/javascript" src="/js/googlemaps_content.js"></script> -->
-            <div class="embed-responsive embed-responsive-16by9">
-                <div id="map_canvas" class="embed-responsive-item"></div>
-            </div>
-
+          {{ partial "map.html" . }}
         </div>
     </div>
     {{ $.Scratch.Add "i" 1 }}
diff --git a/layouts/partials/map.html b/layouts/partials/map.html
new file mode 100644
index 000000000..7c4f8cd1b
--- /dev/null
+++ b/layouts/partials/map.html
@@ -0,0 +1,89 @@
+<!--
+  Customize the labels on the map
+
+  *References*
+  - http://code.google.com/apis/maps/documentation/javascript/maptypes.html#StyledMaps
+  - http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1/examples/basic.html
+-->
+<link href="/css/googlemaps.css" rel="stylesheet">
+<script type="text/javascript" language="javascript">
+function initialize() {
+    var map;
+    var bounds = new google.maps.LatLngBounds();
+    var mapOptions = {
+        mapTypeId: 'roadmap'
+    };
+
+    // Display a map on the page
+    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
+    map.setTilt(45);
+
+    // Add upcoming events here
+    // Get Latitude and Longitude of a Point: http://itouchmap.com/latlong.html
+    var markers = [
+      {{ range $.Site.Data.events }}
+
+      // if there is a startdate set
+        {{ if .startdate }}
+
+      // if the startdate is today or in the future
+          {{ if ge (dateFormat "2006-01-02" .startdate) (dateFormat "2006-01-02" ($.Now.Format "2006-01-02")) }}
+
+      // if the startdate month and enddate month are different, show both months
+            {{ if ne (dateFormat "Jan" .startdate) (dateFormat "Jan" .enddate) }}
+              ['{{ .city}}', {{ .coordinates | safeJS }}, '{{ dateFormat "Jan 2" .startdate }}-{{ dateFormat "Jan 2" .enddate }}', '/events/{{ .name }}'],
+            {{ else }}
+
+      // if the startdate and enddate are the same (ie, a one-day event), show one day
+            {{ if eq .startdate .enddate }}
+              ['{{ .city}}', {{ .coordinates | safeJS }}, '{{ dateFormat "Jan 2" .startdate }}', '/events/{{ .name }}'],
+            {{ else }}
+
+      // if both dates in one month, show startdate with month & enddate without month
+              ['{{ .city}}', {{ .coordinates | safeJS }}, '{{ dateFormat "Jan 2" .startdate }}-{{ dateFormat "2" .enddate }}', '/events/{{ .name }}'],
+            {{ end }} // end of same month
+
+            {{ end }} // end of different month
+          {{ end }} // end of "ge dateformat"
+        {{ end }} // end of startdate
+      {{ end }} // end of "range"
+    ];
+
+    // Display multiple markers on a map
+    // var infoWindow = new google.maps.InfoWindow(), marker, i;
+
+    // Loop through our array of markers & place each one on the map
+    for( i = 0; i < markers.length; i++ ) {
+        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
+        bounds.extend(position);
+        marker = new MarkerWithLabel({
+            position: position,
+            map: map,
+            labelContent: markers[i][0] + "<br>" + markers[i][3],
+            labelAnchor: new google.maps.Point(25, 50),
+            labelClass: "labels",
+            labelStyle: { opacity: 1 }
+        });
+        // cityLink = markers[i][4]
+        // This isn't working right now btw
+        // google.maps.event.addListener(marker, "click", function (e) { location.href=cityLink});
+
+        // refocus
+        map.fitBounds(bounds);
+    }
+}
+</script>
+
+<script type="text/javascript" language="javascript">
+      window.onload = function()
+      {
+          initialize();
+      };
+</script>
+
+<script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?key=AIzaSyC1bvNK9qFJGEhoWNbQuojmJJ1Tg0DoOew"></script>
+<!-- <script type="text/javascript" src="/js/googlemaps_label.js"></script> -->
+<!-- <script type="text/javascript" src="/js/googlemaps_content.js"></script> -->
+<div class="embed-responsive embed-responsive-16by9">
+    <div id="map_canvas" class="embed-responsive-item"></div>
+</div>