๐ผ๏ธ GeoJSON Data Layers
In the parent chapter we briefly explored Google Maps' native transit layer.
In this chapter, we'll attempt to replicate this layer using publicly available GeoJSON data and learn a thing or two about Google Maps' interactive data layers.
I'm a city planner analyzing the proximity of New York City subway lines to new developments.
To start off, I'd like to view and highlight the metro lines:
As you saw in the chapter on ๐ฆพ Turf.js & Exporting to GeoJSON , the GeoJSON format is a popular mechanism to encode and share geospatial data.
Many cities, agencies, and non-profits publish valuable GeoJSON data online. In your case, the city agency of choice would be NYC Open Data . Searching for โsubway linesโ leads to a promising dataset. From there, under โExportโ, you'll need to copy the GeoJSON URL:
To quickly inspect the geometries and properties of this small dataset, you can use geojson.io .
Indeed, you're dealing with a FeatureCollection containing features of the form:
{
"type": "Feature",
"properties": {
"name": "A-C",
"url": "http://web.mta.info/nyct/service/",
"rt_symbol": "A",
"objectid": "800",
"id": "2000251",
"shape_len": "2714.92372395"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-73.88075000161994, 40.674129666468296],
[-73.89035800079188, 40.67270966767174]
]
}
} If the file were bigger (in the 10Mb+ range), you'd be better off with a tool like kepler.gl . Kepler.gl is a super fast, WebGL-powered online tool that lets you visualize, pick, filter, search and share geo data in various formats with ease:
Once you've familiarized yourself with the structure of the GeoJSON file, it's time to connect it to a Google Map via the map.data.loadGeojson() method:
map.data.loadGeoJson(
"https://data.cityofnewyork.us/api/geospatial/3qz8-muuu?method=export&format=GeoJSON",
); Some public-facing GeoJSON endpoints may block such requests due to CORS .
If the desired dataset is static (doesn't change over time), you can download and store it in a Github Gist or on your own server.
If the dataset changes over time, you can fetch the GeoJSON separately and pass it onto the map canvas via map.data.addGeoJson .