citibike_stations_leaflet = { let vizId = 'leaflet-stations' let vizDesc = 'Map showing showing historical current and future citibike stations' let container = DOM.element('div', { id: vizId, style: `width:${width}px;height:${width/1.6}px`, 'aria-label': vizDesc }); yield container; let map = L.map(container).setView([40.747, -73.988], 12) map.scrollWheelZoom.disable(); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); //initialize svg to add to map L.svg().addTo(map) const overlay = d3.select(map.getPanes().overlayPane) const svg = overlay.select('svg') let stations = svg.append('g') .attr('class', 'station-set') let station = stations.selectAll("station") .data(citibikeStationsSummary.setAll.filter(d => d.type !== 'T2'), d => d['station_id']) .join('g') .attr('class', d => `station station-${d['station_id']}`) .attr('transform', d => { let point = map.latLngToLayerPoint([d.lat,d.lon]) return `translate(${point.x},${point.y})` }) .attr("pointer-events","visible") .on('mouseover', stationMouseOver) .on('mouseout', stationMouseOut ); station.append('circle') .attr('class', 'bubble') //.attr('pointer-events', 'none') .attr('r', d => { //d.r = r(d[selectR]) return 6 }) .attr('fill-opacity', 0) .attr('fill', '#FFF') station.append('circle') .attr('class', 'point') //.attr('pointer-events', 'none') .attr('r', d => (d.class === 'legacy') ? 2 : 3) .attr('fill', d => cStation[d.class]) const update = () => station .attr('transform', d => { let point = map.latLngToLayerPoint([d.lat,d.lon]) return `translate(${point.x},${point.y})` }) map.on("zoomend", update) function stationMouseOver(event, d){ d3.select(event.target).style("cursor", "pointer"); d3.select(`.station-set .station-${d['station_id']} .bubble`) .transition() .attr('stroke', 'orange') .attr('stroke-width', 2); // let stationLookup = citibikeStationsSummary.mapAll.get(d['station_id'])[0] let formatDate = d3.timeFormat("%Y-%m-%d") let tipContent = ``; tipContent += `(${d.station_id}) ${d.name}
`; // tipContent += `${d.first_year}–${d.last_year}
`; if(d.class === 'new') { tipContent += `Status: New Station
` } if(d.class === 'future') { tipContent += `Status: Future Station
` } if(d.class === 'legacy') { tipContent += `Status: Legacy Station
` } if(d.class === 'active') { tipContent += `Status: Active Station
` } if(d.indata) { tipContent += `` // Start Table tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `

Data Summary
First Appeared	${d.first_date}
Last Appeared	${d.last_date}
Active Days	${format.abs(d.data_days)}
Total Starts	${format.abs(d.data_starts)}
Total Ends	${format.abs(d.data_ends)}

`; // Close Table } else { tipContent += `No Historical Data` } chartTip.style("left", () => { if (innerWidth - d.x < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(`${tipContent}`); } function stationMouseOut(event, d){ d3.select(event.target).style("cursor", "default"); chartTip.style("display", "none"); // Hide toolTip d3.select(`.station-set .station-${d['station_id']} .bubble`) .transition() .attr('stroke', '#FFF') .attr('stroke-width', 0); } }