{ // Load GeoJSON from a data URL (instead of holding it in a JavaScript object and passing to a Mapbox GL GeoJSON Source ==> reduces client memory overhead) var nav = new mapboxgl.NavigationControl(); map.addControl(nav, 'bottom-left'); map.on('load', function() { // Subway LINES 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': { // want: 'line-color': palette.get(color(['get', 'rt_symbol'])), 'line-color': [ 'match', ['get', 'rt_symbol'], // IND Eighth Avenue Line: Dark Blue (A-C-E) 'A', '#0096e5', 'C', '#0096e5', 'E', '#0096e5', // IND Sixth Avenue Line: Orange (B-D-F-M) 'B', '#ff9600', 'D', '#ff9600', 'F', '#ff9600','M', '#ff9600', // IND Crosstown Line: Light Green or "Lime" (G) 'G', '#80b62d', // BMT Canarsie Line: Light Gray (L) 'L', '#bebebe', // BMT Nassau Street Line: Brown (J-Z) 'J', '#b47e1e', 'Z', '#b47e1e', // BMT Broadway Line: Yellow (N-Q-R-W) 'N', '#ffd200', 'Q', '#ffd200', 'R', '#ffd200', 'W', '#ffd200', // IRT Broadway – Seventh Avenue Line: Red (1-2-3) '1', '#ff553c', '2', '#ff553c', '3', '#ff553c', // IRT Lexington Avenue Line: Green (4-5-6) '4', '#00b95b', '5', '#00b95b', '6', '#00b95b', // IRT Flushing Line: Purple (7) '7', '#c373d2', // Shuttles: Gray 'S', '#9c9d9f', // Other: '#ccc' ], 'line-width': 2, 'line-opacity': 0.75 } }); // STATIONS map.addSource('subway_station_data', { type: 'geojson', data: stations, cluster: true, clusterRadius: 45 // Radius of each cluster when clustering points (defaults to 50) }); // TODO: Scale by volume of entries&exits in cluster instead of cluster count /* Steps/To-Do List for Clustering: https://blog.mapbox.com/clustering-properties-with-mapbox-and-html-markers-bb353c8662ba 1. Scale cluster by the aggregated volume of all the stations in the cluster 2. Scale stations by each one's volume of daily activity 3. Possible: on-click reveal bar graph of that station's hourly break down of entries/exits - different endpoint */ map.addLayer({ id: 'clusters', type: 'circle', source: 'subway_station_data', filter: ['has', 'point_count'], // # in cluster paint: { // https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step) 'circle-color': [ 'step', ['get', 'point_count'], // switch to gradient based off exit-to-entry ratio '#51bbd6', 20, // blue if cluster < 20 exit/entry points '#f1f075', 50, // yellow if cluster 20 < x < 50 exit/entry points '#f1f075', 300, // yellow if cluster of 50 < x < 300 exit/entry points '#f28cb1' // pink if cluster of >= 300 exit/entry points ], 'circle-radius': [ 'step', ['get', 'point_count'], 9, 20, // radius = 9px if cluster < 20 exit/entry points 12, 50, // radius = 12px if cluster 20 < x < 50 exit/entry points 18, 300, // radius = 818px if cluser 50 < x < 300 exit/entry points 30 // radius = 30px if cluster of >= 300 exit/entry points ] } }); 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 } }); // ['!', ['has','point_count']] 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 } }); //pseudo voroni (increase region user can click to show pop-up) map.addLayer({ 'id': 'select-station-region', 'type': 'circle', 'source': 'subway_station_data', 'filter': ['!', ['has','point_count']], 'paint': { 'circle-color': 'rgba(0,0,0,0)', // transparent 'circle-stroke-color': 'rgba(0,0,0,0)', 'circle-radius': 10 // change to scale by volume } }); // Station Pop-up on-click map.on('click', 'select-station-region', function(e) { var coordinates = e.features[0].geometry.coordinates.slice(); var name = e.features[0].properties.name; new mapboxgl.Popup() .setLngLat(coordinates) .setHTML(build_subway_sign(name)) .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 = ''; }); }); }