Skip to content

Commit

Permalink
Merge pull request #8 from alulsh/fix-map
Browse files Browse the repository at this point in the history 
Remove Jump data to fix map
  • Loading branch information
@alulsh
alulsh authored Dec 22, 2019
2 parents 0611294 + 72ce822 commit 5d20bbd
Show file tree
Hide file tree
Showing 5 changed files with 11 additions and 151 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Station capacity information comes from [Motivate's](https://www.motivateco.com/

#### JUMP Bikes

JUMP bike data for DC is available on their [DC open data portal](https://dc.jumpmobility.com/opendata) in [GBFS format](https://github.com/NABSA/gbfs).
JUMP bike data for DC is available in [GBFS format](https://github.com/NABSA/gbfs) from [`https://gbfs.uber.com/v1/dcb/free_bike_status.json`](https://gbfs.uber.com/v1/dcb/free_bike_status.json). Unfortunately this API does not allow for cross-origin resource sharing, so it cannot be used client-side. Follow [issue #7](https://github.com/alulsh/dc-bikeshare-by-neighborhood/issues/7) for any updates. In the mean time, you can use the script in `scripts/jump.js` to fetch the data manually using Node.js.

### Historical bikeshare services

Expand Down
19 changes: 4 additions & 15 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,12 @@
</head>
<body>

<nav id="menu"></nav>
<nav id="menu">
<a href="#" id="cabibikes">Capital Bikeshare Bikes</a>
</nav>
<div id='map'></div>

<div id='cabibikes-legend' class='legend' style='display: none;'>
<div id='cabibikes-legend' class='legend'>
<h4>Bikes</h4>
<div><span style='background-color: #723122'></span>500</div>
<div><span style='background-color: #8B4225'></span>400</div>
Expand All @@ -27,19 +29,6 @@ <h4>Bikes</h4>
<div><span style='background-color: #F2F12D'></span>0</div>
</div>

<div id='jumpbikes-legend' class='legend' style='display: none;'>
<h4>Bikes</h4>
<div><span style='background-color: #723122'></span>8</div>
<div><span style='background-color: #8B4225'></span>7</div>
<div><span style='background-color: #A25626'></span>6</div>
<div><span style='background-color: #B86B25'></span>5</div>
<div><span style='background-color: #CA8323'></span>4</div>
<div><span style='background-color: #DA9C20'></span>3</div>
<div><span style='background-color: #E6B71E'></span>2</div>
<div><span style='background-color: #EED322'></span>1</div>
<div><span style='background-color: #F2F12D'></span>0</div>
</div>

<script src='map.js'></script>

</body>
Expand Down
125 changes: 5 additions & 120 deletions map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,36 +42,7 @@ function cabiData() {
});
}

function jumpData(){
let bikeArray = [];

return new Promise((resolve) => {
let request = new XMLHttpRequest();
request.open('GET', 'https://dc.jumpmobility.com/opendata/free_bike_status.json');
request.responseType = 'json';
request.send();
request.onload = () => {
const bikes = request.response.data.bikes;
bikes.forEach(bike => {
let lonLat = [];
lonLat.push(bike.lon);
lonLat.push(bike.lat);
bikeArray.push(lonLat);
});
resolve(bikeArray);
};
});
}

function isNumber(number) {
if (typeof number !== 'number') {
return false;
} else {
return true;
}
}

function loadDcNeighborhoods(bikeshareData, jumpData) {
function loadDcNeighborhoods(bikeshareData) {

let request = new XMLHttpRequest();
request.open('GET', 'https://opendata.arcgis.com/datasets/f6c703ebe2534fc3800609a07bad8f5b_17.geojson');
Expand All @@ -80,20 +51,17 @@ function loadDcNeighborhoods(bikeshareData, jumpData) {
request.onload = () => {
const cabiStations = new FeatureCollection(bikeshareData);
const neighborhoods = request.response.features;
const jumpBikes = turf.points(jumpData);

neighborhoods.forEach(neighborhood => {
const polygon = turf.polygon(neighborhood.geometry.coordinates);
const cabiWithin = turf.pointsWithinPolygon(cabiStations, polygon);
const jumpWithin = turf.pointsWithinPolygon(jumpBikes, polygon);

let totalBikes = 0;
cabiWithin.features.forEach(station =>{
totalBikes += station.properties.capacity;
});

neighborhood.properties.cabiBikes = totalBikes;
neighborhood.properties.jumpBikes = jumpWithin.features.length;

map.addLayer({
id: `cabibikes-${neighborhood.properties.OBJECTID}`,
Expand All @@ -103,7 +71,7 @@ function loadDcNeighborhoods(bikeshareData, jumpData) {
data: neighborhood
},
layout: {
visibility: 'none'
visibility: 'visible'
},
paint: {
'fill-color': {
Expand All @@ -125,36 +93,6 @@ function loadDcNeighborhoods(bikeshareData, jumpData) {
}
});

map.addLayer({
id: `jumpbikes-${neighborhood.properties.OBJECTID}`,
type: 'fill',
source: {
type: 'geojson',
data: neighborhood
},
layout: {
visibility: 'none'
},
paint: {
'fill-color': {
property: 'jumpBikes',
stops: [
[0, '#F2F12D'],
[1, '#EED322'],
[2, '#E6B71E'],
[3, '#DA9C20'],
[4, '#CA8323'],
[5, '#B86B25'],
[6, '#A25626'],
[7, '#8B4225'],
[8, '#723122']
]
},
'fill-opacity': 0.6,
'fill-outline-color': '#FFF'
}
});

let popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
Expand All @@ -166,75 +104,22 @@ function loadDcNeighborhoods(bikeshareData, jumpData) {
.addTo(map);
});

map.on('mouseenter', `jumpbikes-${neighborhood.properties.OBJECTID}`, e => {
popup.setLngLat(e.lngLat)
.setHTML(`<h4>${e.features[0].properties.NBH_NAMES}</h4><p>${e.features[0].properties.jumpBikes} JUMP bikes</p>`)
.addTo(map);
});

map.on('mouseleave', `cabibikes-${neighborhood.properties.OBJECTID}`, () => {
popup.remove();
});

map.on('mouseleave', `jumpbikes-${neighborhood.properties.OBJECTID}`, () => {
popup.remove();
});

});
};
}

const toggles = [
['Capital Bikeshare Bikes','cabibikes'],
['JUMP Bikes','jumpbikes']
];

toggles.forEach(toggle => {
let link = document.createElement('a');
link.href = '#';
link.id = toggle[1];
link.textContent = toggle[0];

link.onclick = function(e) {
let clickedLayer = this.id;
e.preventDefault();
e.stopPropagation();

let legend = document.getElementById(`${clickedLayer}-legend`);
let visibility = map.getLayoutProperty(`${clickedLayer}-1`, 'visibility');

if (visibility === 'visible') {
legend.style.display = 'none';
this.className = '';
for (let i = 1; i < 47; i++) {
map.setLayoutProperty(`${clickedLayer}-${i}`, 'visibility', 'none');
}
} else {
legend.style.display = '';
this.className = 'active';
for (let i = 1; i < 47; i++) {
map.setLayoutProperty(`${clickedLayer}-${i}`, 'visibility', 'visible');
}
}
};

let layers = document.getElementById('menu');
layers.appendChild(link);

});

map.on('load', () => {

let bikeshare = cabiData()
.then(res => res)
.catch(err => console.error(err));

let jumpBike = jumpData()
.then(res => res)
.catch(err => console.error(err));

Promise.all([bikeshare, jumpBike]).then(res => {
loadDcNeighborhoods(res[0],res[1]);
Promise.all([bikeshare]).then(res => {
loadDcNeighborhoods(res[0]);
});

});
});
2 changes: 1 addition & 1 deletion scripts/jump.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const request = require('request');
const turf = require('@turf/turf');

const dcNeighborhoodData = 'https://opendata.arcgis.com/datasets/f6c703ebe2534fc3800609a07bad8f5b_17.geojson';
const jumpData = 'https://dc.jumpmobility.com/opendata/free_bike_status.json';
const jumpData = 'https://gbfs.uber.com/v1/dcb/free_bike_status.json';

function jumpArray(){
let bikeArray = [];
Expand Down
14 changes: 0 additions & 14 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,20 +52,6 @@ body {
border: none;
}

#menu a:hover {
background-color: #DCDCDC;
color: #404040;
}

#menu a.active {
background-color: #696969;
color: #ffffff;
}

#menu a.active:hover {
background: #A9A9A9;
}

.legend {
background-color: #fff;
border-radius: 3px;
Expand Down

0 comments on commit 5d20bbd

Please sign in to comment.