-
-
Save tmcw/1325573 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 style='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"></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; | |
| $('td 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); | |
| } | |
| }); | |
| } | |
| $('td 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment