Part one of this article describes an initial analysis of the data sets released by City of Sydney — you’ll probably want to start there for context.
- Having identified one of the possible uses for the City data sets as being “find my nearest X”, I set out to build a Proof of Concept app.
- I chose the City’s seats data set — a collection of all the public seats and benches. I wanted to build a “find nearest seat” app, which is potentially useful for those with mobility issues or health issues that involve fatigue.
- I had personal motivations to learn React Native and Typescript. I built a quick prototype in a few days using a combination of libraries, including ArcGIS, turf (for geospatial analysis) and some basic React Native components.
Building a POC
In my deep dive into the City of Sydney data sets, I identified certain sets that gave the location of kinds of council facilities. There’s data on water fountains, signage, parking meters, playgrounds and other types of public amenity.
Being the type of person who likes to sit on a bench and watch the world go by, I thought to myself that an app to “find my nearest seat in the city” would be a good place to play. I also have a few projects coming up that involve React Native and TypeScript development, so I was keen to get stuck in to these platforms
The data is expressed as points and is made available in GeoJSON format. In particular, it allows points to be expressed like so:
The City have made their data available in this format. The seats data is available here.
I had a think about the main tasks my app would have to carry out. Here was my initial list.
- Display a map of central Sydney;
- Overlay the list of available seats;
- Read the device position and calculate the nearest seat. Display this marker, and perhaps some additional information, such as distance.
This governed my choice of tech stack.
The City data sets are hosted in ArcGIS, which is a fairly heavyweight, industry standard GIS system with a long heritage. Data can be hosted, plotted, analysed and combined in all manner of ways via web apps and native applications. You can work with raw data as well, exposed in a number of formats (including GeoJSON and KML).
I needed a way of working with maps in my app, so I decided to look for a library that would allow me to display maps. Given that the data involved ArcGIS, I looked at solutions that would allow me to work with ArcGIS in React Native.
I found David Galindo’s react-native-arcgis-mapview node package, and decided to give it a whirl.
In David’s words, it’s a “basic port of ArcGIS for React Native”. ArcGIS provide SDKs for both iOS and Android, and this package is a wrapper around those SDKs.
It exposes a limited subset of the functionality of these SDKs — enough to display and work with maps that you have already set up in ArcGIS, and do some simple overlay stuff.
It took me a while to work out that I couldn’t work with map layers directly in this library — I was limited to adding overlays. So I’d have to download and overlay the seats data directly (just using fetch API), and figure out the nearest seat myself.
To do this, I used a library called turf.js which allows you to work with GeoJSON data. There are all sorts of functions here, including, gloriously, nearestPoint. Hurrah, problem solved.
The app is a simple React Native app, using Hooks and the react-native-geolocation library. It looks like this. The green marker is your location. The red marker is the location of the nearest seat. I’m running it in the iOS simulator. It responds to manual position updates, recalculating the nearest seat each time.
The bulk of the work happens in this hook. I’ve defined my own Point type, and an Overlay type. The react-native-arcgis-mapview library isn’t built in TypeScript, but I used the format specified in the documentation to build the types.
Conclusions and Further Work
I feel pretty happy that I was able to pull together a quick POC in a couple of days, learning a fair bit about React Native in the process. I’m an experienced React developer, so the paradigm was very familiar, and made it easy.
The app is at POC stage, and needs a bit of polish. I would like to build the following features:
- Show route to nearest seat. ArcGIS and the client library support this;
- UX — do it properly;
- Zoom capability — not amazingly well supported by the library I used;
- Show distance to seat in metres;
- Optimise layer drawings. I’m sure I have a memory leak by failing to delete old layers;
- Add a choice of data sets, which should be trivial.
The City of Sydney data sets have some very interesting data and I hope that this demonstrates at least one practical application. I also suggested a number of other approaches to the data in Part One (mostly research based tasks) — perhaps the subject of a follow up?
Given what you’ve learned from these two articles, what would you build?