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.
You can use the Mapbox Studio dataset editor to import, create, and edit point, line, and polygon features and their…www.mapbox.com
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
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
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.