Skip to content

Instantly share code, notes, and snippets.

@scottgruber

scottgruber/home.php

Created December 24, 2017 18:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save scottgruber/a929ce18c985b0f41442e75264de84d0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save scottgruber/a929ce18c985b0f41442e75264de84d0 to your computer and use it in GitHub Desktop.
Download ZIP
Travel fans
Raw
home.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>suefan.art Travel Fans</title>
<meta name="description" content="An interactive map of everywhere the Fan family traveled this year.">
<meta name="author" content="Lauren Hallden">
<link rel="apple-touch-icon" sizes="57x57" href="assets/icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="assets/icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="assets/icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets/icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets/icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon-16x16.png">
<link rel="manifest" href="assets/icons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="assets/icons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Metatags -->
<meta property="og:title" content="Travel Fans" />
<meta property="og:url" content="https://wwww.suefan.art/trips" />
<meta property="og:type" content="website" />
<meta property="og:description" content="An interactive map of everywhere I traveled this year." />
<meta property="og:image" content="images/travellog.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Travel Fans" />
<meta name="twitter:creator" content="@scott_gruber" />
<meta name="twitter:description" content="An interactive map of everywhere we traveled this year." />
<meta name="twitter:url" content="https://www.suefan.art" />
<meta property="og:image" content="images/travellog.jpg" />
<!-- Mapbox GL styles -->
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.css' rel='stylesheet' />
<script src="assets/js/vendor/modernizer.js"></script>
<!-- All our css -->
<link href="assets/css/mapglyphs.css" rel="stylesheet">
<link href="assets/css/screen.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div id="map">
<!-- this is where our map will go -->
</div>
<!-- end map -->
<div id="writing">
<!-- and this is where all the writing and pictures go -->
<section id="intro" class='active'>
<h1>
<?php perch_content('Main heading'); ?>
</h1>
<?php
perch_pages_navigation([
'levels' => 1,
]);
?>
<?php perch_content('Intro'); ?>
</section>
<?php
perch_collection('Trips', [
'template' =>'trip.html',
'filter'=>'publish',
'match'=>'eq',
'value'=>'Yes',
//'sort' => 'date',
//'sort-order' => 'DESC'
]);
?>
<!-- This is the end! -->
<div class="section end">
<h4 class="h2">The end</h4>
<p>Travel Log designed by
<a href="http://www.laurenhallden.com">Lauren Hallden</a>. CMS Integration by Scott Gruber.</p>
<p>Want to make one of these?
<a title="Travel Log GitHub Repo" href="https://github.com/laurenhallden/travellog">Grab the code</a>
</p>
</div>
</div>
<!-- end writing -->
</div>
<!-- end container -->
<!-- JS -->
<script src="assets/js/vendor/jquery.js"></script>
<!-- Here's where we give the map all of its settings and locations -->
<script>
mapboxgl.accessToken =
'' // Add your mapbox API key here
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/outdoors-v9',
center: [-118.412102, 34.023566], // your starting coordiantes
zoom: 12.5,
bearing: 35,
pitch: 40,
duration: 8000
})
map.scrollZoom.disable()
//pull json from runway api.
<?php
$trips = perch_collection('Trips', [
'template' =>'trip.html',
'filter'=>'publish',
'match'=>'eq',
'value'=>'Yes',
'sort' => 'date',
'sort-order' => 'DESC',
'skip-template' => true,
'raw'=> true
]);
echo 'var chapters = {';
foreach( $trips as $trip ) {
$results = '\'location-'. $trip['_id'] .'\': { center: [' . $trip['map']['lng'] .', ' . $trip['map']['lat'] .'], zoom:'. $trip['zoom'] . ', bearing: '. $trip['bearing'] . ', pitch: ' . $trip['pitch'] . ', duration: '. $trip['duration'] .'},';
print_r($results);
}
echo '}';
?>
// Every time the page scrolls, we'll check which section is on the screen
$('#writing').scroll(function () {
var arrPlaces = $("section");
arrPlaces.each(function () {
var offset = $(this).offset()
var bottom = offset.top + $(this).outerHeight()
var windowHeight = $(window).height()
var theId = $(this).attr('id')
if ($(window).width() > 767) {
console.log(theId)
if (offset.top < 200 && bottom > 200) {
setActiveChapter(theId)
}
} else if (offset.top < windowHeight) {
// this is for mobile; we trigger the map move as soon as a section enters the screen
setActiveChapter(theId)
} else {
$(this).removeClass('active')
}
});
});
var activeChapterName = 'intro'
function setActiveChapter(theId) {
$('#' + theId).addClass('active')
if (theId === activeChapterName) return
map.flyTo(chapters[theId])
activeChapterName = theId
}
</script>
</body>
</html>
Raw
trip.html
<section id='location-<perch:content id="_id" type="hidden" suppress="false" />'>
<h3><perch:content id="heading" type="text" label="Heading" required="true" title="true" /></h3>
<perch:content id="body" type="textarea" label="Body" markdown="true" editor="simplemde" required="true" imagewidth="800" />
<span class="date"><perch:content id="date" type="date" label="Date" format="M j" required="true" /></span>
<perch:repeater id="images" label="Images" max="3">
<perch:before><div class="grid"></perch:before>
<div class="box <perch:if exists="box_grid"> <perch:content id="box_grid" type="select" label="Photo Grid" options="box--1x1,box--1x2,box--2x1,box--2x2,box--3x1,box--3x2,box--3x3" help="Layout is a grid of 3 columns and at least one row." allowempty="true" /></perch:if>">
<div class="image-wrapper" style="background-image: url(<perch:content type="image" width="1600" bucket="images" id="image" label="Image" />)"></div>
</div>
<perch:after></div></perch:after>
</perch:repeater>
<perch:content id="map" suppress="true" type="map" label="Google Map" required="false" help="Search for your location then marker will save latitude and longitude." divider-before="Geolocation" />
<perch:content default="12.5" suppress="true" type="text" id="zoom" label="Zoom" help="The desired zoom level. Zoom 1 to see World. 10 to see cities. 15 to see streets. 20 to see buildings." required="false" divider-before="Mapbox GL JS API properties." />
<perch:content default="35" suppress="true" type="text" id="bearing" label="Bearing" help="The desired bearing, in degrees. The bearing is the compass direction that is up; for example, a bearing of 90° orients the map so that east is up." required="false" />
<perch:content default="40" suppress="true" type="text" id="pitch" label="Pitch" help="The desired pitch, in degrees." required="false" />
<perch:content default="8000" suppress="true" type="text" id="duration" label="Duration" help="The animation's duration, measured in milliseconds." required="false" />
<perch:template path="content/includes/publish.html" rescope="parent" />
</section>
<perch:content id="_id" type="hidden" suppress="true" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment