NYC Open Data, GoogleMaps and React

I first started looking into these topics when I was working on a hackathon project for school. I wanted to create an app the allowed people to find and schedule pick up basketball games in NYC. I found these technologies to be really useful for my app and I hope this guide will be useful.

Step 1: Finding Your Data From NYC Open Data

NYC Open Data is portal that houses datasets from over 80 NYC entities, such as the Parks Department, Department of Buildings and Fire Department of New York City. For my project I needed to find the location of all the outdoor basketball courts in the city. I was able to access the Directory of Basketball Courts page on the Open Data site and given the option of exporting the dataset as a JSON or XML file. The dataset contained the latitude and longitude of each basketball court. It was difficult to visualize this code so I found it very useful to create an account with Mapbox and import the dataset. The other useful thing is that the Mapbox dataset visualizer allows you to edit you GeoJSON file using the intuitive map.

You could visit the Mapbox link below to import the dataset.

What the dataset looked like in the Mapbox dataset editor.

One issue that you might run into is that the Mapbox dataset editor is only compatible with GeoJSON files. Which is a specific format for map data. Some of the datasets on the NYC Open Data are only available as JSON files, so they have to be converted to GeoJSON before they can be used with the Mapbox dataset editor. I found the conversion to be very simple with the help of some NPM modules. The conversion can by done on the terminal command line as follows:

npm install -g json2csv csv2geojson
cat fileName.json | json2csv | csv2geojson > fileName.geojson

Step 2: Creating A React Component for GoogleMaps API

In order to use the Google Maps API with your React component you will need to get an API key, see link below.

There are many NPM modules out there that help you integrate Google Maps into React. For my project I used the ‘google-maps-react’ module. The documentation for the module was extremely useful, see link below.

You will need to make a parent component which I called App.js and a child component (HoopMaps.js in my case) that renders the map.

Parent (App) Component

The structure of my App.js component.

Child (HoopMaps) Component

The structure of my HoopMaps.js component.

We are importing GoogleApiWrapper from the ‘google-maps-react’ module, wrapping the child component with it and exporting it to the parent component.

Step 3: Adding Markers

Map with markers of outdoor courts in NYC.

In order to add the markers I used the built in Marker component of the ‘google-maps-react’ module. You can export your GeoJSON data as follows:

Then remember to import it into your React component.

import courtData from '../courtData'

Using the built in Marker component you can simply map over the features property of the courtData object when the component is rendered.

The marker must contain the latitude and longitude coordinates and not the address. It’s as simple as that. I hope you find this guide useful.