Created
January 18, 2014 11:45
-
-
Save PiotrKrosniak/8489329 to your computer and use it in GitHub Desktop.
Gist - FusionTableSlider
This file contains hidden or 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>Slider to change fusiontable maps</title> | |
| <link href="https://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> | |
| <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |
| <script src="simple-slider.js"></script> | |
| <link href="simple-slider.css" rel="stylesheet" type="text/css" /> | |
| <link href="simple-slider-volume.css" rel="stylesheet" type="text/css" /> | |
| <script type="text/javascript"> | |
| function initialize() { | |
| var myLatLng = new google.maps.LatLng(4.9878199334447695, 53.7890625); | |
| map = new google.maps.Map(document.getElementById('map_canvas'), { | |
| center: myLatLng, | |
| zoom: 3, | |
| panControl: false, | |
| zoomControl: true, | |
| zoomControlOptions: { | |
| position: google.maps.ControlPosition.LEFT_CENTER | |
| }, | |
| mapTypeControl: false, | |
| mapTypeId: 'roadmap' | |
| }); | |
| // Replace the xxx with your Fusion Tables IDs. | |
| //You can use FT Wizard http://fusion-tables-api-samples.googlecode.com/svn/trunk/FusionTablesLayerWizard/src/index.html | |
| layer1 = new google.maps.FusionTablesLayer({ | |
| query: { | |
| select: 'XXXX-GEOODED-COLUMN-XXXX', | |
| from: 'XXXX-FUSION-TABLE-ID-XXXX' | |
| }, | |
| styleId: XXXX, | |
| templateId: XXXX, | |
| map: map, | |
| }); | |
| layer2 = new google.maps.FusionTablesLayer({ | |
| query: { | |
| select: 'XXXX-GEOODED-COLUMN-XXXX', | |
| from: 'XXXX-FUSION-TABLE-ID-XXXX' | |
| }, | |
| styleId: XXXX, | |
| templateId: XXXX, | |
| map: map, | |
| }); | |
| layer1.setMap(map); | |
| } | |
| tableidselections = 0; | |
| function changeLayer(tableidselections) { | |
| if (tableidselections == 1){ | |
| clearmap(); | |
| layer1.setMap(map); } | |
| if (tableidselections == 2){ | |
| clearmap(); | |
| layer2.setMap(map); } | |
| } | |
| function clearmap() { | |
| layer1.setMap(null); | |
| layer2.setMap(null); | |
| } | |
| </script> | |
| </head> | |
| <body onLoad="initialize()"> | |
| <div id="map_canvas" style="width:900px; height:500px;"></div> | |
| <h2>Scroll the scrubber to change maps</h2> | |
| <input type="text" data-slider="true" data-slider-values="1,2,3,4,5,6,7,8,9" data-slider-highlight="true"> | |
| <script> | |
| $("[data-slider]") | |
| .each(function () { | |
| var input = $(this); | |
| $("<span>") | |
| .addClass("output") | |
| .insertAfter($(this)); | |
| }) | |
| .bind("slider:ready slider:changed", function (event, data) { | |
| $(this) | |
| .nextAll(".output:first") | |
| .html(data.value.toFixed(3)); | |
| tableidselections = data.value.toFixed(0); | |
| changeLayer(tableidselections); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment