Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
MultiLayer Wax.G Switcher
<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/css/basic.css' rel='stylesheet' type='text/css' />
<link href='http://www.geosprocket.com/css/buttons.css' rel='stylesheet' type='text/css' />
<link href='http://www.geosprocket.com/mapbox-wax/theme/controls.css' rel='stylesheet' type='text/css' />
</head>
<body onload="initialize()">
<div>
<table width: 100%;>
<tbody>
<tr>
<td rowspan="2" style="border:1px solid #9ACD32; padding:5px"><IMG src="http://www.geosprocket.com/images/buttons/Honeywell_logo.jpg" width="162" height="39" align="left" border="0"><br>Renewable Energy<br>Data Explorer</td>
<td class="padded"><IMG src="http://www.geosprocket.com/images/buttons/all.png" alt="All Layers" width="49" height="48"></a></td>
<td class="padded2"><IMG src="http://www.geosprocket.com/images/buttons/public_k12.png" alt="Public K-12 Schools" width="49" height="48"></td>
<td class="padded2"><IMG src="http://www.geosprocket.com/images/buttons/private_k12.png" alt="Private K-12 Schools" width="49" height="48"></td>
<td class="padded2"><IMG src="http://www.geosprocket.com/images/buttons/highered.png" alt="Higher Education" width="49" height="48"></td>
<td class="padded2"><IMG src="http://www.geosprocket.com/images/buttons/hospitals.png" alt="Hospitals" width="49" height="48"></td>
<td class="padded2"><IMG src="http://www.geosprocket.com/images/buttons/municipalities.png" alt="Municipalities" width="49" height="48"></td>
<td class="padded2"><IMG src="http://www.geosprocket.com/images/buttons/dod.png" alt="DOD Installations" width="49" height="48"></td>
<td>Click on a Label or <br>Enter an Address Below.</td>
</tr>
<tr>
<td class="padded"><a href='#' rel='http://api.tiles.mapbox.com/v2/landplanner.enstrat_all_tx_100911.jsonp' class='switcherButtons'>All Layers</a></td>
<td class="padded2"><a href='#' rel='http://api.tiles.mapbox.com/v2/landplanner.enstrat_public_k12_tx_100911.jsonp' class='switcherButtons first'>Public K-12</a></td>
<td class="padded2"><a href='#' rel='http://api.tiles.mapbox.com/v2/landplanner.enstrat_private_k12_tx_100911.jsonp' class='switcherButtons'>Private K-12</a></td>
<td class="padded2"><a href='#' rel='http://api.tiles.mapbox.com/v2/landplanner.enstrat_highered_tx_100911.jsonp' class='switcherButtons'>Higher Education</a></td>
<td class="padded2"><a href='#' rel='http://api.tiles.mapbox.com/v2/landplanner.enstrat_hospitals_tx_100911.jsonp' class='switcherButtons'>Hospitals</a></td>
<td class="padded2"><a href='#' rel='http://api.tiles.mapbox.com/v2/landplanner.enstrat_municipalities_tx_100911.jsonp' class='switcherButtons'>Municipalities</a></td>
<td class="padded2"><a href='#' rel='http://api.tiles.mapbox.com/v2/landplanner.enstrat_dod_tx_100911.jsonp' class='switcherButtons'>DOD Installations</a></td>
<td class="padded2"><input id="address" type="textbox" value="Enter Address"><input type="button" value="Go!" onclick="codeAddress()"></td>
</tr>
</tbody>
</table>
<hr>
</div>
<div id="map_canvas" style="height:200px;top:2px"></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">Honeywell &mdash; Renewable Energy Potential</div>
<div class="dot-source" style="color:white">
Source: <a href="http://honeywell.com">Honeywell International</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">Scores</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><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>
<hr>
</body>
</html>
@wboykinm

This comment has been minimized.

Copy link
Owner Author

wboykinm commented Oct 29, 2011

Soooooo, on line 32 I added the "first" class in addition to the "switcherButtons" class (because W3 said I could!), since this gets referenced on line 92 to draw the map when the page first loads. I tested this a few times on a simplified page, and the reason the map isn't drawing is that line 92 doesn't know how to dig through the new table structure for the "first" class (before your revisions it was just looking for li and a) I've tried a few variations and they don't work. This will require more time, but It's definitely going to seem like an easy fix once it's done.

Some notes on multiple layers in Wax.Gmaps: 1.) the layer set as the "first" class has to be set to a functioning URL, or the map doesn't draw at all, 2.) Other switchable layers can have bad URLs; they just don't go anywhere when you click on them.

@springmeyer

This comment has been minimized.

Copy link

springmeyer commented Oct 29, 2011

Sooooo, on line 156 I see a typo, hehe, just trolling ;)

@wboykinm

This comment has been minimized.

Copy link
Owner Author

wboykinm commented Oct 29, 2011

@tmcw

This comment has been minimized.

Copy link

tmcw commented Oct 30, 2011

I see your Friday night and raise you a 2:20am Saturday. Here's a gist where this works, probably just needed to bind the event to td a.first too, as well as triggering that click. http://bl.ocks.org/1325573

@wboykinm

This comment has been minimized.

Copy link
Owner Author

wboykinm commented Oct 31, 2011

Binding. Jeezus. Now seeking a way to exchange beer for answers to life's easy code questions . . .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.