Maps

Accessible maps can be created and customized by utilizing the nyc-lib npm library developed and maintained by DoITT.

Using geolocation services requires access to the Geoclient API. If you are not an NYC employee, you must first get your Geoclient App ID and App Key from the NYC Developer Portal.

If you don't have an NYC Developer Portal account, you can register here.

Creating a map requires a number of css and javascript dependencies which are listed below. Here is an example of a map that loads facility data from a csv file, and displays the locations in a separate <div>.

To begin customizing your own maps, add the following css dependency in your <header> before your theme and FontAwesome stylesheets. 

                            
                                <!-- nyc-lib css -->
                                <link href="https://maps.nyc.gov/nyc-lib/v1.2.79/css/nyc-basic-lib.css" rel="stylesheet">

                                <!-- Font Awesome -->
                                <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

                                <!-- NYC Theme CSS -->
                                <link rel="stylesheet" href="./css/theme.css">

Next, include the following javascript dependencies after main.js near the closing </body> tag. 

                            
                                <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
                                <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
                                <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.4.0/papaparse.min.js"></script>
                                <script src="https://maps.nyc.gov/nyc-lib/v1.2.79/js/babel-polyfill.js"></script>
                                <script src="https://maps.nyc.gov/nyc-lib/v1.2.79/js/nyc-ol-lib.js"></script>

Where you want to place your map, add a <div> with a unique map id: 

                            
                                <div id='map'></div>

In a separate Javascript file or between script tags, create a new nyc.ol.FrameworkMap object to get your map to appear on the screen: 

                             
                                var map = new nyc.ol.FrameworkMap({
                                    mapTarget: '#map', 
                                    startAt: '2 Metrotech Center'
                                    geoclientUrl: 'https://maps.nyc.gov/geoclient/v1/search.json?app_key=#&app_id=#'
                                });
  • {string} mapTarget (required) - The target element for the map. This must be the same as the id we created above.
  • {string} startAt (optional) - The map will be centered at this location.
  • {string} geoclientUrl (required) - The URL for the Geoclient geocoder with appropiate keys. If you wish to search for locations on the map, or enable geolocation services, this must not be null. Request an app_id and app_key from the NYC DoITT GIS Dept to begin making your own applications.

The following map should now be displayed on your page:

Search Options

{string/boolean} searchTarget (optional) - The target element for search input. By default, the map does not come with a search bar built in. If you set this argument to true, a search bar will appear in the upper left corner of the map. If you prefer it be located outside the map(or simply with your own style), provide your own search element.

Example of embedded search

                             
                                var map = new nyc.ol.FrameworkMap({
                                    mapTarget: '#map', 
                                    startAt: '2 Metrotech Center',
                                    searchTarget: true,
                                    geoclientUrl: 'https://maps.nyc.gov/geoclient/v1/search.json?app_key=#&app_id=#'
                                });

Example of search outside

Example of loading data

  • {string} facilityUrl (required) - The URL for the facility features data. If you plan to load data into markers and/or display them in a list, this argument must not be null.
  • {string} listTarget (optional) - The target element for facility list. If you plan to display a list of facilities, create a div element like you did with the map and include an id for the list, and pass it to the constructor.
  • {string} facilityType (optional) - The title for the facilites list. This will be 'facilities' by default. 
                             
                                var map = new nyc.ol.FrameworkMap({
                                    mapTarget: '#map',
                                    searchTarget: '#map-search',
                                    listTarget: '#list',
                                    facilityType: 'Points of Distribution',
                                    facilityUrl: 'map-data/pod.csv',
                                    geoclientUrl: 'https://maps.nyc.gov/geoclient/v1/search.json?app_key=#&app_id=#'
                                });
                                
                        
                            
                                <div id='map'></div>
                                <div id='list'>
                                <div class="my-2">
                                    <input class="form-control form-control-lg" id="map-search" placeholder="Search Address">
                                </div>

Custom Markers

  • {string} facilityMarkerUrl (optional) - The URL to an image for use as a facility symbol
  • {string} locationMarkerUrl (optional) - The URL to an image for use as the search location symbol.

Custom Map Marker (for facility icons)

                             
                                var map = new nyc.ol.FrameworkMap({
                                    mapTarget: '#map',
                                    searchTarget: '#map-search',
                                    listTarget: '#list',
                                    facilityType: 'Points of Distribution',
                                    facilityUrl: 'map-data/pod.csv',
                                    facilityMarkerUrl: 'map-data/smile-icon.png',
                                    geoclientUrl: 'https://maps.nyc.gov/geoclient/v1/search.json?app_key=#&app_id=#'
                                });

Custom Location Marker (for finding a location)

                             
                                var map = new nyc.ol.FrameworkMap({
                                    mapTarget: '#map',
                                    startAt: '2 Metrotech Center',
                                    searchTarget: '#map-search', 
                                    locationMarkerUrl: 'map-data/map-marker.png',
                                    geoclientUrl: 'https://maps.nyc.gov/geoclient/v1/search.json?app_key=#&app_id=#'
                                });

Additional Resources

Check out nyc-lib via maps.nyc.gov for documentation, examples, and source code.