Last active
August 29, 2015 14:08
-
-
Save lqb2/ce6f9b62428d20e6d651 to your computer and use it in GitHub Desktop.
Wifi 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
| <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='newjs.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'); | |
| //Hardcoding my geoJson data | |
| var geoJsonData = { | |
| "type": "FeatureCollection", | |
| "features": [ | |
| { | |
| "type": "Feature", | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -71.107624, | |
| 42.363406 | |
| ] | |
| }, | |
| "properties": { | |
| "name": "40 Cottage", | |
| "downloadSpeed": 4.31, | |
| "uploadSpeed": 3.94 | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -71.120681, | |
| 42.37356 | |
| ] | |
| }, | |
| "properties": { | |
| "name": "Crema Cafe", | |
| "downloadSpeed": 8.31, | |
| "uploadSpeed": 5.94 | |
| } | |
| } | |
| ] | |
| } | |
| // Attempt #1 to load in the geojson data from an external file | |
| var geoJsonURL = 'wifiSpeeds2.geojson'; | |
| var geoJsonData2 = L.mapbox.featureLayer() | |
| .loadURL(geoJsonURL); | |
| // Attempt #2 to load in the geojson data using d3 this time | |
| var geoJsonData3 = d3.json(geoJsonURL); | |
| // But geoJsonData != geoJsonData2 != geoJsonData3. | |
| // Why aren't geoJsonData2 & 3 actually JSON collections? | |
| console.log(geoJsonData); | |
| console.log(geoJsonData2); | |
| console.log(geoJsonData3); | |
| // Below, if I try to make geoJsonData geoJsonData2 or geoJsonData3, it all breaks. | |
| // I know for geoJsonData2 it has something to do with lines 44 & 45 and the featureLayer | |
| // but I don't get it. | |
| var geoJson = L.geoJson(geoJsonData, { | |
| 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; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment