As of January 3rd, 2023 the ACCESS NYC Pattern library package is deprecated in favor of the NYC Opportunity Standard which contains updated user interface elements and usability guidance.
Nearby Stops
The Nearby Stops Component will parse a list of MTA subway transit data from the NYC Open Data Portal and use a single latitude and longitude to locate the nearest stop. Note: it will not fetch the data directly but will retrieve it from a local endpoint.
Nearby Stops
<section>
<h3>Nearby Stops</h3>
<div class="c-nearby-stops" data-js="nearby-stops" data-nearby-stops-amount="3" data-nearby-stops-endpoint="data/kk4q-3rt2.json" data-nearby-stops-location="[40.693364, -73.9857147]">
<div class="c-nearby-stops__stop">
<span class="c-nearby-stops__subway icon-subway bg-shuttles"></span>
<span class="c-nearby-stops__subway icon-subway bg-shuttles"></span>
<span class="c-nearby-stops__subway icon-subway bg-shuttles"></span>
<span class="c-nearby-stops__description w-full bg-grey-lightest"> </span>
</div>
<div class="c-nearby-stops__stop">
<span class="c-nearby-stops__subway icon-subway bg-shuttles"></span>
<span class="c-nearby-stops__subway icon-subway bg-shuttles"></span>
<span class="c-nearby-stops__subway icon-subway bg-shuttles"></span>
<span class="c-nearby-stops__description w-full bg-grey-lightest"> </span>
</div>
<div class="c-nearby-stops__stop">
<span class="c-nearby-stops__subway icon-subway bg-shuttles"></span>
<span class="c-nearby-stops__subway icon-subway bg-shuttles"></span>
<span class="c-nearby-stops__subway icon-subway bg-shuttles"></span>
<span class="c-nearby-stops__description w-full bg-grey-lightest"> </span>
</div>
</div>
</section>
Global Script
This component requires JavaScript to function. To use it from the global ACCESS NYC Patterns script use the following code:
var access = new AccessNyc();
access.nearbyStops();Module
The ES6 and IFFE modules all require importing and object instantiation in your main script:
import NearbyStops from '../components/nearby-stops/nearby-stops';
new NearbyStops();The class will select any DOM element with the data-js="nearby-stops" attribute and look up the closest stops to the location embedded in the data-nearby-stops-location attribute. The location attribute accepts an array of latitude and longitude.
Use the data-nearby-stops-endpoint attribute to set the endpoint of the data. The amount of stops defaults to 3 but can be overwritten using the data-nearby-stops-amount attribute, which accepts a number of stops to display.