Skip to content

Instantly share code, notes, and snippets.

@lqb2
Last active Aug 29, 2015
Embed
What would you like to do?
Wifi Map
<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>
// 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);
/* 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; }
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment