block by wboykinm 7373634

Mobile Map Form

Full Screen

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<link rel="shortcut icon" href="//asset.geosprocket.com/img/favicon.ico" type="image/x-icon">
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>Mobile Collector</title>
  	<link href="//netdna.bootstrapcdn.com/bootswatch/3.0.0/cosmo/bootstrap.min.css" rel="stylesheet">
  	<link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
	  <!--[if lte IE 8]>
	    <link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.ie.css' rel='stylesheet'>
	  <![endif]-->
  	<style>
  		.starter-template {
		  	padding: 40px 15px;
		  	text-align: center;
		}
		#map { 
			height:400px;
			width:100%; 
		}
		#centerpoint {
		  display: none;
		  width: 128px;
		  height: 128px;
		  background: transparent url(//farm6.staticflickr.com/5519/10708548293_e38037720a_o.png) 0 0 no-repeat scroll;
		  overflow: visible;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  margin: -64px 0 0 -64px;
		  pointer-events: none;
		  z-index: 11;
		  opacity: 1;
		  -webkit-transition: opacity 0.25s;
		  -moz-transition: opacity 0.25s;
		  -o-transition: opacity 0.25s;
		  -ms-transition: opacity 0.25s;
		  transition: opacity 0.25s;
		}
	</style>
</head>
<body>

	<!--ADD THE FORM EMBEDURL BELOW-->
	<meta itemprop="embedUrl" content="https://docs.google.com/forms/d/17EeoLaAVeGrLYhOGyvy7-jC9ukc90F-UvrAMz_x_LUA/viewform?embedded=true">
	
	<!--ADD THE FORM RESPONSE ACTION HERE, WITH A REDIRECT-->
	<script type="text/javascript">var submitted=false;</script>
    <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"     
onload="if(submitted) {window.location='//cdb.io/1be11H7';}"></iframe>
	<form action="https://docs.google.com/forms/d/17EeoLaAVeGrLYhOGyvy7-jC9ukc90F-UvrAMz_x_LUA/formResponse" method="POST" id="ss-form" target="hidden_iframe" onsubmit="submitted=true;">

	  	<div class="container">
	  		<div class="jumbotron starter-template">
	  			<h1>Libation/ Location</h1>
	  		</div>

	  		<div class="starter-template">
	  			<h2><em>(1) </em>What's your drink of choice?<h2>
	  			<div class="btn-group">
				  <button type="button" class="btn btn-xl btn-info"><img src="//asset.geosprocket.com/img/beer_mug.png"/> Beer</button>
				  <button type="button" class="btn btn-xl btn-info"><img src="//asset.geosprocket.com/img/wine_glass.png"/> Wine</button>
				  <button type="button" class="btn btn-xl btn-info"><img src="//asset.geosprocket.com/img/martini_glass.png"/> Cocktails</button>
				  <button type="button" class="btn btn-xl btn-info"><img src="//asset.geosprocket.com/img/glass_cup.png"/> Cold - hold the booze</button>
				</div>
	  		</div>
	  		<div class="starter-template">
	  			<h2><em>(2) </em>Where you at?<h2>
	  			<p><small>Drag the map to center the marker on your general location</small></p>
	  			<div id="map">
	  				<span id="centerpoint" class="" style="display: inline;">
	  					<span class="shadow"></span>
	  					<span class="x"></span>
	  					<span class="marker"></span>
	  				</span>
	  			</div>

	  			<!-- ADD GOOGLEFORM-RELATED INPUTS HERE, ALL HIDDEN. 
	  			THEY'LL BE GIVEN VALUES IN THE SCRIPT BELOW
	  			THE "NAME" AND "ID" PARAMETERS MUST CORRESPOND TO 
	  			THOSE IN THE SOURCE OF THE GOOGLE-HOSTED LIVE FORM-->

	  			<!-- QUESTION 1 -->
	  			<input type="hidden" name="entry.338471973" value="" id="entry_338471973">

	  			<!-- QUESTION 2: LAT/LONG -->
	  			<input type="hidden" name="entry.80388879" value="" id="entry_80388879">
				<input type="hidden" name="entry.510592791" value="" id="entry_510592791">

				<!-- PAGE STUFF -->
				<input type="hidden" name="pageNumber" value="0">
				<input type="hidden" name="backupCache" value="">
	  		</div>
	  		<div class="starter-template">
	  			<h2>That's it! Thanks!<h2>
	  		    <input type="submit" name="submit" value="Submit" class="btn-lg btn-success">
	  		    <hr>
	  		    <p><small><em>Note: this application will make no effort to deliver said drink to you, though we join you in wishing it were so.</small></em></p>
	  		</div>
	  	</div>
  	</form>

  	<script src='//codeorigin.jquery.com/jquery-1.10.2.min.js'></script>
  	<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
  	<script src='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.js'></script>
    <script type='text/javascript'>
	  // Set default location in case the IP doesn't have one
	  var y = 40.8;
	  var x = -96.67;
	  // Grab IP location from freegeoip API
	  $.getJSON('//freegeoip.net/json/', function(json) {
	    if (json) {
	      y = json.latitude;
	      x = json.longitude;
	    }
	    // Build the map
	    var map = L.mapbox.map('map', 'landplanner.g7443phg', {scrollWheelZoom:false}).setView([y, x], 9);

	    // Set form lat/lon fields from map center location
	    $('#entry_80388879').attr('value', y);
        $('#entry_510592791').attr('value', x);

        // Update these values as the map gets dragged around
        map.on('moveend', function(event) {
		  	$('#entry_80388879').attr('value', map.getCenter().lat);
        	$('#entry_510592791').attr('value', map.getCenter().lng);
		});

		// Set the question choice active
		$('.btn-info').click(function () {
            $('.btn-info').removeClass('active');
            $(this).addClass('active');
			// Then post the choice to the hidden input
		  	$('#entry_338471973').attr('value', $.trim($(this).text()));
		});

	  });
</script>
</body>
</html>