Skip to content

Instantly share code, notes, and snippets.

@newsroomdev

newsroomdev/index.html Secret

Created January 8, 2013 04:08
Show Gist options
  • Save newsroomdev/4481066 to your computer and use it in GitHub Desktop.
Save newsroomdev/4481066 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Map Template
Raw
index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script src="http://app1.kuhf.org/_plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="https://raw.github.com/filamentgroup/SocialCount/master/dist/socialcount.min.js"></script>
<link href="http://app1.kuhf.org/_plugins/bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<link href="http://bootswatch.com/cosmo/bootstrap.min.css" rel=
"stylesheet">
<link href=
"http://app1.kuhf.org/_plugins/bootstrap/css/bootstrap-responsive.min.css"
rel="stylesheet">
<link href=
"https://raw.github.com/filamentgroup/SocialCount/master/dist/socialcount-with-icons.css"
rel="stylesheet">
<title>Title</title>
<style>
* {
-webkit-transition:color .3s ease-in-out, background-color .3s ease-in-out;
-moz-transition:color .3s ease-in-out , background-color .3s ease-in-out;
-o-transition:color .3s ease-in-out, background-color .3s ease-in-out;
transition:color .3s ease-in-out, background-color .3s ease-in-out;
}
a:hover { text-decoration: none; }
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
width: 100%;
}
.flag img {
width:6em;
background-color: #fafafa;
-webkit-box-shadow: 0 0 .5em #000;
-moz-box-shadow: 0 0 .5em #000;
box-shadow: 0 0 .5em #000;
}
#right-col {
overflow: scroll !important;
z-index: 1;
position: absolute;
right: .25em;
top: .8em;
max-height: 88%;
width:220px;
padding: 1em;
background: #fafafa;
text-align: right;
-webkit-box-shadow: 0 0 .5em #000;
-moz-box-shadow: 0 0 .5em #000;
box-shadow: 0 0 .5em #000;
}
#story_box{
padding: 1em;
}
#hed{
font-size:3.5em;
padding-bottom: 0.3em;
padding-top: 0.2em;
}
#submitButton {
margin-top: -1px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.share center {
height:2.4em;
}
.btn-info {
background-color: #49afcd !important;
}
.btn-info:hover {
background-color: #2f96b4 !important;
}
small {
color: #000 !important;
}
hr {
margin-top:10px;
margin-bottom:5px;
}
.line {
height: 15px;
margin-bottom: 3px;
}
a.btn-small {
color: #1F1F1F !important;
}
.legend_color {
float: right;
display: block;
overflow: hidden;
height: 13px;
width: 13px;
border: 1px solid #666;
margin-bottom: 2px;
}
.legend_text {
line-height: 15px;
}
.legend_title {
font-weight: bold;
}
</style>
<script type="text/javascript">
// Declare map, Fusion Table Layers(optional), bounding box
var geocoder;
var map;
var id1,id2,id3;
//Geolocator bounding box. Currently set to Greater Houston Area
var sw_lim = new google.maps.LatLng(28.63, -96.62);
var ne_lim = new google.maps.LatLng(31.4, -94.15);
var bound_box = new google.maps.LatLngBounds(sw_lim, ne_lim);
//Inverted map base
function initialize() {
geocoder = new google.maps.Geocoder();
// var styles = [{
// "stylers": [{
// "invert_lightness": true
// }, {
// "saturation": -100
// }, {
// "visibility": "on"
// }]
// }];
var mapOptions = {
center: new google.maps.LatLng(29.763, -95.363),
minZoom: 7,
zoom: 9,
panControl: false,
streetViewControl: false,
mapTypeControl: false,
//styles: styles,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var layerOptions = {
query: {
from: id1,
select: "???" //active or primary layer
},
map: map
};
layer = new google.maps.FusionTablesLayer(layerOptions);
//Layers object which the selector2000 picks from
var layerPick = { };
//Where the magic happens. Write HTML for mobile & desktop legends
$('.selector2000').change(function() {
var val = this.value;
layerOptions['query'] = layerPick[val];
layer.setOptions(layerOptions);
if (val == 'nil') {
$(".legend").html("");
}
});
function flag_gen(controlDiv, map) {
var controlUI, controlText;
controlUI = document.createElement('div');
controlUI.setAttribute('class','flag');
controlDiv.appendChild(controlUI);
controlText = document.createElement('div');
controlText.setAttribute('class','flag');
controlText.innerHTML = "<a href='http://kuhf.org'><img src='http://app1.kuhf.org/images/content/photos/KUHF_BottomTag_BW.png\'/></a>";
controlUI.appendChild(controlText);
};
flag_div = document.createElement('div');
flag = new flag_gen(flag_div, map);
flag_div.index = 1;
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(flag_div);
}
//Google GeoCoder with bounding box for messy user input
function codeAddress() {
var address1 = document.getElementById("address1").value;
var address2 = document.getElementById("address2").value;
if (address1) { var address=address1; } else { var address=address2; }
var address = document.getElementById("address").value;
geocoder.geocode({
"address": address,
"bounds": bound_box
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
animation: google.maps.Animation.DROP
});
} else {
alert("Oops, looks like you may have typed in an unrecognizable address. Try an address, zip code or even a neighborhood name, as long as it's located inside the Greater Houston Area.");
}
});
}
$('#input').keypress(function(e) {
if (e.which == 10 || e.which == 13) {
$('submit').click();
}
});
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map_canvas");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '800px';
}
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class="visible-phone" id="story_box">
<div class="container-fluid">
<span>
<center id="hed"><p>Head</center>
<center>By <a href="#">AUTHOR</a> | DATE</p></center></span>
<span class="share"><center>
<a class="btn btn-small" data-toggle="modal" href="#myModal1"><i class="icon-heart icon-white"></i> Share</a>
<a class="btn btn-small" data-toggle="modal" href=
"#myModal2"><i class="icon-list icon-white"></i> Data</a>
<a class="btn btn-small" data-toggle="modal" href="#myModal3"><i class="icon-info-sign icon-white"></i> Code</a>
<a class="btn btn-small" data-toggle="collapse" data-target="#description">
<i class="icon-align-justify icon-white"></i> Fold</a>
</center></span>
</div>
<div class="collapse in container-fluid" id="description">
<p><span>Food truck trust fund veniam whatever. Meh pitchfork aute, dolore forage magna squid. Delectus salvia pariatur, meh magna tousled photo booth banksy sunt. Direct trade velit ut actually, terry richardson nihil you probably haven't heard of them duis truffaut deserunt. Craft beer aesthetic yr neutra reprehenderit portland, jean shorts odd future wes anderson. Consequat cardigan incididunt magna pop-up. Fugiat helvetica banh mi mcsweeney's etsy eiusmod.</span></p>
<div id="search" class="form-inline">
<label><strong>Lookup your neighborhood</strong></label> <input class="span-block" id="address" onkeydown="if (event.keyCode == 13) document.getElementById('submitButton').click()" placeholder="Zip, Address or Neighborhood?" type="text" /><input class="btn btn-primary btn-block" id="submitButton" onclick="codeAddress()" type="submit" value="Search" />
</div>
<br />
</div>
<div class="container-fluid">
<label><strong>Select or clear the map</strong></label> <select class="selector2000 span1">
<option value="active">
Activate!
</option>
<option value="opt2">
Two-who
</option>
<optgroup label="subhead">
<option value="opt3">
more
</option>
<option value="opt4">
moar
</option>
<option value="opt5">
even moar!
</option>
</optgroup>
<option value="nil">
--Clear Map--
</option>
</select>
</div>
<div class"legendM"></div>
</div>
<div id="map_canvas"></div>
<div class="modal hide fade" id="myModal1" tabindex="-1">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">x</button>
<h3 id="myModalLabel">Share or Embed this Map</h3>
</div>
<div class="modal-body">
<center><div class="nav-pills row-fluid"><span class="socialcount" data-url="http://app1.kuhf.org/growing-need-in-houston.html" data-share-text="Check out this interactive map from @KUHFnews">
<p><a class="facebook btn btn-block btn-primary" href="https://www.facebook.com/sharer/sharer.php?u=http://app1.kuhf.org/growing-need-in-houston.html" target="_blank" title="Share on Facebook"><i class="icon-thumbs-up icon-white"></i><span class="count"> Like</span></a></p>
<p><a class="twitter btn btn-block btn-info" href="https://twitter.com/intent/tweet?text=http://app1.kuhf.org/growing-need-in-houston.html" target="_blank" title="Share on Twitter"><i class="icon-retweet icon-white"></i><span class="count"> Tweet</span></a></p>
<p><a class="googleplus btn btn-block btn-danger" href="https://plus.google.com/share?url=http://app1.kuhf.org/growing-need-in-houston.html" target="_blank" title="Share on Google Plus"><i class="icon-plus icon-white"></i><span class="count">1</span></a></p>
</ul></span></div></center>
<br />
<p>Include the following code in the HTML of your page to share this
app</p><pre>&lt;iframe src="http://kuhf.org/" width=600px height=800px frameborder=0&gt;&lt;/iframe&gt;</pre>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
<div class="modal hide fade" id="myModal2" tabindex="-1">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">x</button>
<h3 id="myModalLabel">View the data used</h3>
</div>
<div class="modal-body">
<ul>
<li><strong><a href="#" target="_blank">Very</a></strong>...</li>
<li style="list-style: none"><br /></li>
<li><strong><a href="#" target="_blank">Fancy</a></strong>...</li>
<li style="list-style: none"><br /></li>
<li><strong><a href="#" target="_blank">Stuff</a></strong>...</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
<div class="modal hide fade" id="myModal3" tabindex="-1">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">x</button>
<h3 id="myModalLabel">APIs, Libraries and Plugins</h3>
</div>
<div class="modal-body">
<ul>
<li><a href=
"https://developers.google.com/maps/documentation/javascript/tutorial" target="_blank">Google
Maps Javascript API v3</a></li>
<br />
<li><a href=
"http://twitter.github.com/bootstrap/index.html" target="_blank">Bootstrap</a>,with a <a href="http://bootswatch.com">Bootswatch</a> CSS</li>
<br />
<li><a href="https://github.com/filamentgroup/SocialCount">SocialCount</a>, a simplified jQuery library for social widgets.</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
<div id="right-col" class="row hidden-phone">
<span class="share">
<a class="btn btn-small" data-toggle="modal" href="#myModal1"><i class="icon-heart icon-white"></i> Share</a>
<a class="btn btn-small" data-toggle="modal" href=
"#myModal2"><i class="icon-list icon-white"></i> Data</a>
<a class="btn btn-small" data-toggle="modal" href="#myModal3"><i class="icon-info-sign icon-white"></i> Code</a>
</span>
<h1><small>Head</small></h1>
<p><span id="byline">By <a href="#">AUTHOR</a> | DATE</span></p><span id=
"description"></span>
<p><span id="description">Food truck trust fund veniam whatever. Meh pitchfork aute, dolore forage magna squid. Delectus salvia pariatur, meh magna tousled photo booth banksy sunt. Direct trade velit ut actually, terry richardson nihil you probably haven't heard of them duis truffaut deserunt. Craft beer aesthetic yr neutra reprehenderit portland, jean shorts odd future wes anderson. Consequat cardigan incididunt magna pop-up. Fugiat helvetica banh mi mcsweeney's etsy eiusmod.</span></p>
<div class="form-inline" id="search">
<label><strong>Lookup your neighborhood</strong></label> <input class=
"input-block-level" id="address" onkeydown=
"if (event.keyCode == 13) document.getElementById('submitButton').click()"
placeholder="Zip, Address or Neighborhood?" type="text" /> <input class="btn btn-primary btn-block"
id="submitButton" onclick="codeAddress()" type="submit" value="Search" />
</div>
<hr />
<div>
<label><strong>Select or clear the map</strong></label> <select class="selector2000">
<option value="active">
Activate!
</option>
<option value="opt2">
Two-who
</option>
<optgroup label="subhead">
<option value="opt3">
more
</option>
<option value="opt4">
moar
</option>
<option value="opt5">
even moar!
</option>
</optgroup>
<option value="nil">
--Clear Map--
</option>
</select>
</div>
<div class="legend"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment