Last active
August 29, 2015 14:10
-
-
Save lqb2/b25947b4922b54e2726f to your computer and use it in GitHub Desktop.
Wifi Map Test
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> | |
| <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet'> | |
| <script src='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.css' rel='stylesheet' /> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| </head> | |
| <body> | |
| <div class='sidebar pad20'> | |
| <div class='heading'> | |
| <h1>Coffeeshops Wifi</h1> | |
| </div> | |
| <div id='listings' class='listings'></div> | |
| </div> | |
| <div id='map' class='map pad20'></div> | |
| <script src='new_simple_js.js'></script> | |
| </body> | |
| </html> | |
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
| // Loading my map and access token | |
| L.mapbox.accessToken = 'pk.eyJ1IjoibHFiMiIsImEiOiJZMlowSHZFIn0._9bYohJZDwa4WA9mcuT0Zg'; | |
| var map = L.mapbox.map('map', 'lqb2.k0cgg1h0'); | |
| // Attempt #1 to load in the geojson data from an external file | |
| var geoJsonURL = 'wifiSpeeds2.geojson'; | |
| var jsonLayer = L.mapbox.featureLayer() | |
| .loadURL(geoJsonURL); | |
| L.geoJson(jsonLayer, { | |
| pointToLayer: function(feature, latlng) { | |
| var marker = feature.properties; | |
| return L.circleMarker(latlng, { | |
| radius: marker.downloadSpeed * 5, | |
| fillOpacity: Math.random(), | |
| //insert code here to determine whether or not marker gets dotted border | |
| }) | |
| } | |
| }).addTo(map); |
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
| /* CSS */ | |
| body { | |
| background:#f8f8f8; | |
| color:#000; | |
| font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif; | |
| margin:0; | |
| padding:0; | |
| -webkit-font-smoothing:antialiased; | |
| } | |
| /** | |
| * The page is split between map and sidebar - the sidebar gets 1/3, map | |
| * gets 2/3 of the page. You can adjust this to your personal liking. | |
| */ | |
| .sidebar { | |
| width:33.3333%; | |
| } | |
| h1 { | |
| font-size:22px; | |
| margin:10; | |
| margin-bottom: 20; | |
| font-weight:400; | |
| } | |
| a { | |
| text-decoration:none; | |
| } | |
| .listings { | |
| height:100%; | |
| overflow:auto; | |
| padding-bottom:60px; | |
| } | |
| .listings .item { | |
| display:block; | |
| border-bottom:1px solid #eee; | |
| padding:10px; | |
| text-decoration:none; | |
| } | |
| .listings .item:last-child { border-bottom:none; } | |
| .listings .item .title { | |
| display:block; | |
| color:#A18136; | |
| font-weight:700; | |
| } | |
| .listings .item .title small { font-weight:400; } | |
| .listings .item.active .title, | |
| .listings .item .title:hover { color:#543E1C; } | |
| .listings .item.active { | |
| background-color:#efefef; | |
| } | |
| .map { | |
| border-left:1px solid #fff; | |
| position:absolute; | |
| left:33.3333%; | |
| width:66.6666%; | |
| top:0; | |
| bottom:0; | |
| } | |
| .pad20 { | |
| padding:20px; | |
| -webkit-box-sizing:border-box; | |
| -moz-box-sizing:border-box; | |
| box-sizing:border-box; | |
| } | |
| /* Marker tweaks */ | |
| .leaflet-popup-close-button { | |
| display:none; | |
| } | |
| .leaflet-popup-content { | |
| font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif; | |
| padding:0px; | |
| width:200px; | |
| } | |
| .leaflet-popup-content-wrapper { | |
| padding:0; | |
| } | |
| .leaflet-popup-content h3 { | |
| background:#543E1C; | |
| color:#fff; | |
| margin:0; | |
| display:block; | |
| padding:10px; | |
| border-radius:3px 3px 0 0; | |
| font-weight:700; | |
| margin-top:-15px; | |
| } | |
| .leaflet-popup-content div { | |
| padding:10px; | |
| } | |
| .leaflet-container .leaflet-marker-icon { cursor:pointer; } |
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
| { | |
| "type": "FeatureCollection", | |
| "features": [ | |
| { | |
| "type": "Feature", | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -71.107624, | |
| 42.363406 | |
| ] | |
| }, | |
| "properties": { | |
| "name": "41 Cottage", | |
| "downloadSpeed": 4.31, | |
| "uploadSpeed": 3.94 | |
| } | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment