Welcome to the information age! We are part of a lucky generation to be living in a time of great technological change. All around us, data and information about the world is being collected and collated, just waiting for someone to take advantage of it. Based on a recent demonstration we provided to a group of enthusiastic startups, this blog post looks at how to pull in some publicly available data via web services into a basic ArcGIS web app. We are going to use the Public transport data for emerging cities from wheresmytransport through a simple Restful web service.
We will build a basic web (but mobile-ready) app that locates the user and identifies the 10 nearest public transport stops and shows them on a map.
So, where do we begin? With the map of course!
1. Create a web app stub
Open a new project/page in your favourite web development IDE (I still just use notepad++) and create a basic framework for an app. We will pull in the ArcGIS JSAPI and related CSS, a simple HTML structure with some associated CSS classes for controlling how the app will look.
You wont see much when opening this, but here is a tip for how I view and debug my “mobile-ready” apps – open Chrome Developer tools (F12) and toggle the device toolbar. Dock the dev tools window to the right and choose an appropriate mobile device from the drop-down. You can now easily view your app and follow the console alongside.
2. Add a map control
Using the JSAPI that has been loaded, follow the basic steps for creating a WebMap from an ArcGIS Online web map ID, add it to a MapView and assign it to the dom node you just created called “map”. Place the following code inside a script tag in the document header.
If you are using the Chrome Developer tip I mentioned, you should see something like this.
3. Add “find me” button
HTML5 provides a handy geolocation API for getting the user’s location based on the best available method on the device. Esri has packaged this method into a simple widget that makes it easy to add to a map. Note that in v4.x of the JSAPI you can now add items to the “ui” of the map using the “view.ui” properties. To add the widget, insert the following code into the main function that will load the widget, add it to the UI and set up a handler that zooms and centres the map to your coordinates.
TIP: don’t forget to add the new requires: “esri/widgets/Locate”,”esri/layers/GraphicsLayer”
And, then call the new function once the map has loaded (i.e. within the “view.then(function(){“ function).
Your output should look a little like this after clicking the new button:
4. Get stops from wheresmytransport
First, I recommend going to check out wheresmytransport.com and read up on their cool data service that provides real-time access to consolidated public transport information in many major global cities (including Joburg and Cape Town). Use of their API is free if you sign up as a developer here: https://developer.whereismytransport.com/ – you will need to do this to get a client id and secret to run the app.
Now, we will add a new button that will call the service by adding the following code into your main function:
And add a dom node to host the new button to the HTML body:
Now that we have a button, let’s listen for it’s click event and then call the wheresmytransport service – by adding this code to the main function:
Now, before you can use the wheresmytransport service, you need to request a security token. Add this code into the function you just created.
You will notice that the successful callback runs a new function called “getStops(token)” to which it passes that new token. The getStops function looks like this.
This code only sends the request, now we need to handle the response by adding “then” and “catch” callbacks for the promise variable we created called “getLocalStops”. This code will process the results by creating a new Esri graphic and adding to the graphics layer with the specified symbology.
TIP: Remember to add the new requires “esri/symbols/SimpleMarkerSymbol”, “esri/Graphic” and “esri/geometry/Point”
Finally, for the eagle-eyed among you, there is a utility function called from within the code called “getWMTdata” that takes the url, token and payload which you can use generically for calls to those services.
That’s it. Run the app and after clicking both the “Locate Me” and the “Get Stops” button, your app should look a little like this:
5. Take it further…
This is a basic example, but think about how you can take this app further, by adding capabilities such as:
- Finding the nearest stop based on travel distance/time using the FindNearest method from ArcGIS
- Display results back to the user in a table or list for easy viewing
- Log requests made by users to be able to assess where the demand for the app is…
- Many many more!!
If you would like to try out the sample code, you can download this example here. Let me know in the comments below if you want some more info/help!
Happy app-making
– Richard
