Skip to content

Instantly share code, notes, and snippets.

@tmcw

tmcw/index.html

Created October 27, 2011 17:30
Show Gist options
  • Save tmcw/1320223 to your computer and use it in GitHub Desktop.
Save tmcw/1320223 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Wax.G Layer Switcher</title>
<script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'></script>
<script src='http://www.geosprocket.com/mapbox-wax/dist/wax.g.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-1.6.4.min.js' type='text/javascript'></script>
<link href='http://www.geosprocket.com/mapbox-wax/theme/controls.css' rel='stylesheet' type='text/css' />
</head>
<body>
<h3>Choose a layer</h3>
<ul>
<li><a href='#'
rel='http://api.tiles.mapbox.com/v2/landplanner.enstrat_public_k12_tx_100911.jsonp' class='first'>Public K-12</a></li>
<li><a href='#'
rel='http://api.tiles.mapbox.com/v2/landplanner.enstrat_private_k12_tx_100911.jsonp'>Private K-12</a></li>
<li><a href='#'
rel='http://api.tiles.mapbox.com/v2/landplanner.enstrat_highered_tx_100911.jsonp'>Higher Education</a></li>
</ul>
<div>
<input id="address" type="text" value="Enter Address">
<input type="button" value="Go!" onclick="codeAddress()">
</div>
<div id="map_canvas" style="height:900px;top:20px"></div>
<!--GMAPS SCRIPTING:-->
<script type="text/javascript">
var geocoder, map, interaction;
$('li a').click(function() {
wax.tilejson($(this).attr('rel'), function(tilejson) {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(29.0, -98.5);
var myOptions = {
zoom: 7,
center: latlng,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.HYBRID
};
if (!map) {
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
map.overlayMapTypes.insertAt(0, new wax.g.connector(tilejson));
interaction = wax.g.interaction(map, tilejson);
} else {
map.overlayMapTypes.setAt(0, new wax.g.connector(tilejson));
interaction.remove();
interaction = wax.g.interaction(map, tilejson);
}
});
});
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode({
address: address
}, 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
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
$('li a.first').click();
</script>
<div class="wax-legends"><div class="wax-legend" style="display: block; "><div class="wax-legend" style="display: block; "><div class="dot-legend">
<div class="dot-title">Enstrat Renewable Energy Potential</div>
<div class="dot-source" style="color:white">
Source: <a href="http://www.enstrat.com">Enstrat Analytics, 2011</a>
</div>
</div>
<style type="text/css">
.wax-legend .dot-title {
font-weight: bold;
}
.wax-legend .dot-scale {
font-size: 90%;
}
.wax-legend .dot-source {
font-size: 80%;
color: #222222;
}
.wax-legend a {
color: #63aece;
}
</style>
<div class="overlay-legend">
<style type="text/css">
.wax-legend .overlay-legend {
padding-top: 10px;
border-top: 1px solid #cccccc;
}
.wax-legend .title {
text-align: left;
margin-bottom: 8px;
}
.wax-legend .scale ul li {
display: block;
float: left;
width: 50px;
margin-bottom: 5px;
text-align: center;
font-size: 90%;
}
.wax-legend ul.labels li span {
height: 16px;
width: 50px;
}
.wax-legend ul li span {
display: block;
float: left;
}
.wax-legend .source {
font-size: 80%;
color: #222222;
}
.wax-legend a {
color: #63aece;
}
</style>
</div>
<div class="overlay-legend">
<div class="title">Higher Education Scores - United States</div>
<div><i>Map points are scaled relative to population size</i></div>
<div class="scale">
<ul class="labels">
<li><span style="background:#2C7FB8;"></span>&lt;15</li>
<li><span style="background:#41B6C4;"></span>15-20</li>
<li><span style="background:#7FCDBB;"></span>20-25</li>
<li><span style="background:#C7E9B4;"></span>25-30</li>
<li><span style="background:#FFFFCC;"></span>30</li>
</ul>
<br /><br />
</div>
</div></div></div></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment