example for download speeds
Last active
December 27, 2015 00:19
-
-
Save feomike/7236848 to your computer and use it in GitHub Desktop.
download speed
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title></title> | |
| <script src='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.js'></script> | |
| <link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' /> | |
| <!--[if lte IE 8]> | |
| <link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.ie.css' rel='stylesheet'> | |
| <![endif]--> | |
| <style> | |
| body { margin:0; padding:0; } | |
| #map { position:absolute; top:0; bottom:0; width:100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- | |
| Include Leaflet.fullscreen and Leaflet-hash's CSS and JavaScript assets. | |
| Unlike mapbox.js, these are not hosted by MapBox; you will | |
| need to download and host them yourself. | |
| --> | |
| <link rel="stylesheet" href="/mapbox.js/assets/leaflet.fullscreen.css" /> | |
| <script src="/mapbox.js/assets/Leaflet.fullscreen.js"></script> | |
| <script src="/mapbox.js/assets/leaflet-hash.js"></script> | |
| <style> | |
| #map-ui { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| z-index: 100; | |
| } | |
| #map-ui ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #map-ui a { | |
| font-size: 13px; | |
| background: #FFF; | |
| color: #3C4E5A; | |
| display: block; | |
| margin: 0; | |
| padding: 0; | |
| border: 1px solid #BBB; | |
| border-bottom-width: 0; | |
| min-width: 138px; | |
| padding: 10px; | |
| text-decoration: none; | |
| } | |
| #map-ui a:hover { | |
| background: #ECF5FA; | |
| } | |
| #map-ui li:last-child a { | |
| border-bottom-width: 1px; | |
| -webkit-border-radius: 0 0 3px 3px; | |
| border-radius: 0 0 3px 3px; | |
| } | |
| #map-ui li:first-child a { | |
| -webkit-border-radius: 3px 3px 0 0; | |
| border-radius: 3px 3px 0 0; | |
| } | |
| #map-ui a.active { | |
| background: #3887BE; | |
| border-color: #3887BE; | |
| border-top-color: #FFF; | |
| color: #FFF; | |
| } | |
| #map-ui li:first-child a.active { | |
| border-top-color: #3887BE; | |
| } | |
| #map .map-fullscreen { | |
| background-color: #28353D; | |
| } | |
| </style> | |
| <div id='map'> | |
| <div id='map-ui'> | |
| <ul> | |
| <li><a href='#' id='mmba_ds_all' class='active'>All - Download Speed</a></li> | |
| <li><a href='#' id='mmba_ds_att' class='inactive'>ATT - Download Speed</a></li> | |
| <li><a href='#' id='mmba_ds_sprint' class='inactive'>Sprint - Download Speed</a></li> | |
| <li><a href='#' id='mmba_ds_tmobile' class='inactive'>T-Mobile - Download Speed</a></li> | |
| <li><a href='#' id='mmba_ds_vz' class='inactive'>Verizon - Download Speed</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div id='legend-content' style='display: none;'> | |
| <div class='my-legend'> | |
| <div class='legend-title'>Average Download Speed</div> | |
| <div class='legend-scale'> | |
| <ul class='legend-labels'> | |
| <li><span style='background:#92ed6b;'></span>LT 1 MBps</li> | |
| <li><span style='background:#41db00;'></span>1 MBps - 1 MBps</li> | |
| <li><span style='background:#4ea429;'></span>1 MBps - 2 MBps</li> | |
| <li><span style='background:#2b8e00;'></span>GT 2 MBps</li> | |
| </ul> | |
| </div> | |
| <div class='legend-source'>Showing cells w/ more than 1 test as of Sept. 2013</div> | |
| </div> | |
| <style type='text/css'> | |
| .my-legend .legend-title { | |
| text-align: left; | |
| margin-bottom: 8px; | |
| font-weight: bold; | |
| font-size: 90%; | |
| } | |
| .my-legend .legend-scale ul { | |
| margin: 0; | |
| padding: 0; | |
| float: left; | |
| list-style: none; | |
| } | |
| .my-legend .legend-scale ul li { | |
| display: block; | |
| float: left; | |
| width: 50px; | |
| margin-bottom: 6px; | |
| text-align: center; | |
| font-size: 80%; | |
| list-style: none; | |
| } | |
| .my-legend ul.legend-labels li span { | |
| display: block; | |
| float: left; | |
| height: 15px; | |
| width: 50px; | |
| } | |
| .my-legend .legend-source { | |
| font-size: 70%; | |
| color: #999; | |
| clear: both; | |
| } | |
| .my-legend a { | |
| color: #777; | |
| } | |
| </style> | |
| </div> | |
| <script> | |
| var map = L.mapbox.map('map', 'fcc.map-kzt95hy6', {attributionControl: false}) | |
| .setView([38.82, -94.96], 4); | |
| map.legendControl.addLegend(document.getElementById('legend-content').innerHTML); | |
| var ds_all_TL = L.mapbox.tileLayer('fcc.rbg74x6r').addTo(map); | |
| var ds_all_GL = L.mapbox.gridLayer('fcc.rbg74x6r').addTo(map); | |
| var ds_all_GC = L.mapbox.gridControl(ds_all_GL, {follow: true}).addTo(map); | |
| var ds_att_TL = L.mapbox.tileLayer('fcc.mmba_us_att'); | |
| var ds_att_GL = L.mapbox.gridLayer('fcc.mmba_us_att'); | |
| var ds_att_GC = L.mapbox.gridControl(ds_att_GL, {follow: true}); | |
| var ds_sprint_TL = L.mapbox.tileLayer('fcc.mmba_us_sprint'); | |
| var ds_sprint_GL = L.mapbox.gridLayer('fcc.mmba_us_sprint'); | |
| var ds_sprint_GC = L.mapbox.gridControl(ds_sprint_GL, {follow: true}); | |
| var ds_tmobile_TL = L.mapbox.tileLayer('fcc.mmba_us_tmobile'); | |
| var ds_tmobile_GL = L.mapbox.gridLayer('fcc.mmba_us_tmobile'); | |
| var ds_tmobile_GC = L.mapbox.gridControl(ds_tmobile_GL, {follow: true}); | |
| var ds_vz_TL = L.mapbox.tileLayer('fcc.mmba_us_vz'); | |
| var ds_vz_GL = L.mapbox.gridLayer('fcc.mmba_us_vz'); | |
| var ds_vz_GC = L.mapbox.gridControl(ds_vz_GL, {follow: true}); | |
| document.getElementById('mmba_ds_all').onclick = function() { | |
| if (this.className === 'active') { | |
| map.removeLayer(ds_all_TL); | |
| map.removeLayer(ds_all_GL); | |
| map.removeControl(ds_all_GC); | |
| this.className = ''; | |
| } else { | |
| map.addLayer(ds_all_TL); | |
| map.addLayer(ds_all_GL); | |
| map.addControl(ds_all_GC); | |
| this.className = 'active'; | |
| } | |
| }; | |
| document.getElementById('mmba_ds_att').onclick = function() { | |
| if (this.className === 'active') { | |
| map.removeLayer(ds_att_TL); | |
| map.removeLayer(ds_att_GL); | |
| map.removeControl(ds_att_GC); | |
| this.className = ''; | |
| } else { | |
| map.addLayer(ds_att_TL); | |
| map.addLayer(ds_att_GL); | |
| map.addControl(ds_att_GC); | |
| this.className = 'active'; | |
| } | |
| }; | |
| document.getElementById('mmba_ds_sprint').onclick = function() { | |
| if (this.className === 'active') { | |
| map.removeLayer(ds_sprint_TL); | |
| map.removeLayer(ds_sprint_GL); | |
| map.removeControl(ds_sprint_GC); | |
| this.className = ''; | |
| } else { | |
| map.addLayer(ds_sprint_TL); | |
| map.addLayer(ds_sprint_GL); | |
| map.addControl(ds_sprint_GC); | |
| this.className = 'active'; | |
| } | |
| }; | |
| document.getElementById('mmba_ds_tmobile').onclick = function() { | |
| if (this.className === 'active') { | |
| map.removeLayer(ds_tmobile_TL); | |
| map.removeLayer(ds_tmobile_GL); | |
| map.removeControl(ds_tmobile_GC); | |
| this.className = ''; | |
| } else { | |
| map.addLayer(ds_tmobile_TL); | |
| map.addLayer(ds_tmobile_GL); | |
| map.addControl(ds_tmobile_GC); | |
| this.className = 'active'; | |
| } | |
| }; | |
| document.getElementById('mmba_ds_vz').onclick = function() { | |
| if (this.className === 'active') { | |
| map.removeLayer(ds_vz_TL); | |
| map.removeLayer(ds_vz_GL); | |
| map.removeControl(ds_vz_GC); | |
| this.className = ''; | |
| } else { | |
| map.addLayer(ds_vz_TL); | |
| map.addLayer(ds_vz_GL); | |
| map.addControl(ds_vz_GC); | |
| this.className = 'active'; | |
| } | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment