ATA concept w24

dabblet.css

/* ATA concept w24 */


/* primary actions */
nav { position:absolute; bottom:.3rem; left:0; right:0;	
	display:flex; justify-content:center; align-items:center }
nav label { line-height:1.27rem; width:4rem; text-align:center; 	
	padding:8px; margin:0 .3rem; border-radius:3px }
nav label:before { display:block }

/* toggle actions */

/* background is context */
#map { position:absolute !important;
	top:0; bottom:0; left:0; right:0; z-index:-1 }
	
/* boxen */
* { margin:0; padding:0; box-sizing:border-box }

/* fonts, rhythm and hierarchy */
* { font:100 1rem/1.27 Avenir-Light;
	text-decoration:none }
:before { font:1.6rem FontAwesome }

/* color */
nav label { color:white; background:hsl(208,70%,42%) }

dabblet.html

<figure id=map></figure>

<nav>
	<input type=radio id=contacts name=type>
	<input type=radio id=products name=type>
	<input type=radio id=locations name=type>
	<input placeholder=Destination>
	<label class=fa-hand-spock-o for=contacts	
		title="Schedule with friends and family
			and be right on time"> Meet </label>
	<label class=fa-gift for=products				
		title="Pick up food and errands,					
			discover new services along familiar routes"> Get </label>
	<label class=fa-bus for=locations				
		title="Plan your trip and be on time with real time traffic
		and predictive analytics"> Go </label>
</nav>

dabblet.js

var renderer,
	service;

route=()=>{
	service.route({
		origin: 'Los Angeles',
		destination: 'Kansas City',
		travelMode: 'DRIVING'
	}, (result, status) => {
		if ('OK' == status)
			renderer.setDirections(result);
	});
}

// maps callback
ready=()=>{
  (renderer = new google.maps.DirectionsRenderer())
  .setMap(new google.maps.Map(document.querySelector('#map'), {      
  	zoom:13,          
  	center: {lat:39.0833686,lng:-94.6019888},      
  	disableDefaultUI:true  }));
  service = new google.maps.DirectionsService();
  route();
}
// load maps
(url => new Promise (then => {    return;
	with (document){    	
		if (querySelector(`[src='${url}']`))    		
			return then(url);    	
		s = createElement`script`,    	
		s.src = url,            	
		s.onload = () => then(url),            	
		head.appendChild(s);    
	}
}))`https://maps.googleapis.com/maps/api/js?key=AIzaSyCXWEosHeKfrWRJR3cIhbv92ENo97a6cas&callback=ready`.then(ready);
// load font awesome
(url => {	
	with (document)		
		link = querySelector(`[src='${url}']`)			
			|| createElement`link`,		
		link.href = url,		
		link.rel = 'stylesheet',		
		head.appendChild(link)
})`https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css`;

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"","page":"html"}