Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Mobile Map Form
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="shortcut icon" href="http://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="http://netdna.bootstrapcdn.com/bootswatch/3.0.0/cosmo/bootstrap.min.css" rel="stylesheet">
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
<!--[if lte IE 8]>
<link href='http://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(http://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='http://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="http://asset.geosprocket.com/img/beer_mug.png"/> Beer</button>
<button type="button" class="btn btn-xl btn-info"><img src="http://asset.geosprocket.com/img/wine_glass.png"/> Wine</button>
<button type="button" class="btn btn-xl btn-info"><img src="http://asset.geosprocket.com/img/martini_glass.png"/> Cocktails</button>
<button type="button" class="btn btn-xl btn-info"><img src="http://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='http://codeorigin.jquery.com/jquery-1.10.2.min.js'></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<script src='http://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('http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment