Created
October 29, 2011 01:35
-
-
Save wboykinm/1323968 to your computer and use it in GitHub Desktop.
MultiLayer Wax.G Switcher
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 — 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> |
Sooooo, on line 156 I see a typo, hehe, just trolling ;)
As grateful as I am for the catch, what through hell are you doing debugging
on a Friday night? Aren't non-parents supposed to have lives?
Seriously, though. Thanks. I'll fix that in the morning.
…On Oct 29, 2011 12:04 AM, "Dane Springmeyer" < ***@***.***> wrote:
Sooooo, on line 156 I see a typo, hehe, just trolling ;)
##
Reply to this email directly or view it on GitHub:
https://gist.github.com/1323968
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
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
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.