Skip to main content

Patterns

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-color-grey-lightest">&nbsp;</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-color-grey-lightest">&nbsp;</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-color-grey-lightest">&nbsp;</span></div>
  </div>
</section>

Nearby Stops Usage

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, CommonJS, 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.