Skip to content
This repository was archived by the owner on Jul 21, 2019. It is now read-only.

Make map load with data #99

Merged
mattstratton merged 1 commit into from
Jan 12, 2017
Merged

Make map load with data #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion exampleSite/data/events/2017-hoofington.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"]
Expand Down
2 changes: 1 addition & 1 deletion exampleSite/data/events/2017-ponyville.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"]
Expand Down
101 changes: 1 addition & 100 deletions layouts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand Down
89 changes: 89 additions & 0 deletions layouts/partials/map.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>