{
var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'bottom-left');
map.on('load', function() {
var url = 'https://gist.githubusercontent.com/the-observables/7fd9846f47fad8d98a6bafbb91704c85/raw/fbbe2a2270f9f1d6a8e7d73500094c81839e7cd3/subway-lines.geojson';
map.addSource('subway_line_data', { type: 'geojson', data: url});
map.addLayer({
'id': 'subway_lines',
'type': 'line',
'source': 'subway_line_data',
'paint': {
'line-color': [
'match',
['get', 'rt_symbol'],
'A', '#0096e5', 'C', '#0096e5', 'E', '#0096e5',
'B', '#ff9600', 'D', '#ff9600', 'F', '#ff9600','M', '#ff9600',
'G', '#80b62d',
'L', '#bebebe',
'J', '#b47e1e', 'Z', '#b47e1e',
'N', '#ffd200', 'Q', '#ffd200', 'R', '#ffd200', 'W', '#ffd200',
'1', '#ff553c', '2', '#ff553c', '3', '#ff553c',
'4', '#00b95b', '5', '#00b95b', '6', '#00b95b',
'7', '#c373d2',
'S', '#9c9d9f',
'#ccc'
],
'line-width': 2,
'line-opacity': 0.75
}
});
map.addSource('subway_station_data', {
type: 'geojson',
data: march_10_2020,
cluster: true,
clusterRadius: 45
});
map.addLayer({
id: 'clusters',
type: 'circle',
source: 'subway_station_data',
filter: ['has', 'point_count'],
paint: {
'circle-color': [
'step',
['get', 'point_count'],
'#51bbd6', 20,
'#f1f075', 50,
'#f1f075', 300,
'#f28cb1'
],
'circle-radius': [
'step',
['get', 'point_count'],
9, 20,
12, 50,
18, 300,
30
]
}
});
map.addLayer({
id: 'cluster-count',
type: 'symbol',
source: 'subway_station_data',
filter: ['has', 'point_count'],
layout: {
'text-field': '{point_count_abbreviated}',
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
'text-size': 12
}
});
map.addLayer({
'id': 'station',
'type': 'circle',
'source': 'subway_station_data',
'filter': ['!', ['has','point_count']],
'paint': {
'circle-color': 'white',
'circle-radius': 4,
'circle-stroke-color': 'blue',
'circle-stroke-width': 1
}
});
map.addLayer({
'id': 'select-station-region',
'type': 'circle',
'source': 'subway_station_data',
'filter': ['!', ['has','point_count']],
'paint': {
'circle-color': 'rgba(0,0,0,0)',
'circle-stroke-color': 'rgba(0,0,0,0)',
'circle-radius': 10
}
});
map.on('click', 'select-station-region', function(e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var name = e.features[0].properties.STATION.toUpperCase();
console.log(name)
if(station_lines.has(name)){
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(build_subway_sign(name))
.addTo(map);
}else{
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(`<div> Station: ${name}</div>`)
.addTo(map);
}
});
map.on('mouseenter', 'select-station-region', function() {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'select-station-region', function() {
map.getCanvas().style.cursor = '';
});
});
}