Tom Wayson

Getting to Know the ArcGIS Online Platform

Tom Wayson — Fri, 03 May 2013 06:15:00 +0000

A few of the sessions at the 2013 Esri Developer Summit got me interested in learning more about how I could utilize some of the new features of ArcGIS Online to help me build web mapping applications. As a developer, my instinct is to approach each new application with a blank page in SublimeText and a cup of coffee, but I’m getting better at learning to utilize the services that are out there to help jump start new development.

Full disclosure: I’ve been working for Esri for close to a year now. I’m sharing my personal experiences in trying to better understand the strengths and weaknesses of the ArcGIS Online platform versus other online mapping platforms. I won’t pretend to be able to be completely impartial, but it is also not part of my job to advocate for the platform.

Now that we’ve got that out of the way we can get down to business. My goals are to understand:

How far I can get without writing a single line of code
The limits of the built in features of the platform like web maps and templates
How to start a project using those built in features (e.g. for rapid prototyping) and then transition to a custom solution to get beyond those limits

The Plan

My plan is to tackle a small application from a few different angles. After seeing the Developing custom JavaScript Applications with ArcGIS Online presentation where they running routes as sample data, I was inspired to build a map of my own trail running routes in Southern California.

Requirements for the app are to be able to:

Import route data in the form of GPS tracks (.gpx files) and display them on a map
Integrate photographs I’ve taken along the routes via API requests to a hosted service like flickr
Show elevation profiles of the routes
Allow me to manually create custom data like points of interest or annotations, and display that data on the map

My approach will be to:

Create an ArcGIS Online web map
Add that map to one of the out of the box application templates and publish it
Identify any features that are missing and fill the gaps by creating a custom application based on either the template and/or relevant samples

Look Ma, No Code!

So far I’ve done the easy part (steps 1 & 2 above). Without writing a single line of code, I was able to create a web map, import some of my GPS tracks, set their symbols, add custom points of interest such as trailheads and parking lots.

What’s more, I was able to find an out of the box template that included one of my key functional requirements – showing elevation profiles of the routes. Again, without writing any code, I was able to share the map via a template and publish a fully functional application:

Pretty cool. You might be thinking “who needs developers?” However, revising the list of requirements above, I see there is still a one more feature to implement:

~~Import route data in the form of GPS tracks (.gpx files) and display them on a map~~

Integrate photographs I’ve taken along the routes via API requests to a hosted service like flickr

~~Show elevation profiles of the routes~~

~~Allow me to manually create custom data like points of interest or annotations, and display that data on the map~~

Also, the application derived from the out of the box template has a few features that I don’t want such as the dialog that pops up on page load with instructions.

The Next Steps

In my next post I’ll consider my options for how to customize this application to meet all of the requirements.

How to Build a 5 Ft Tall Web Map, and Why You’d Want to

Tom Wayson — Wed, 19 Oct 2011 22:39:47 +0000

Recently, the major electric utility that I work for installed a wall full of 50”displays in their power outage response control center, and they asked me to start generating content for it. The content would be real-time summary data of the power outages across the utility’s electric distribution network, and the centerpiece was to be a map showing the location of all the current power outages affecting their customers. This was an exciting challenge for me, since I’ve never created applications to be run on large screens with no human interface devices – keyboards, mice, etc. I was particularly excited about figuring out how to implement the map, since I typically develop mapping applications that are meant to be experienced inside of a web browser.

A Web Implementation Strategy

The entire display wall is powered by ActiVu software, which basically projects a very large Windows desktop across the array of screens. So, in theory, the content could come from any kind of application. Most of the content that we wanted to display already appeared on web pages on an intranet site, so the fastest way to get the content on the wall without creating new applications was to just open those pages via ActiVu’s browser and fit them into a mosaic across the wall. However, after getting content up in just a few clicks, it was soon obvious that those pages would need to be reformatted to work on the big screen. Again, the web turned out to be a nifty solution, because I was able to accomplish that by simply adding a new CSS style sheet that was invoked when requested from these screens.

With the rest of the wall’s content coming form web pages, why not try putting up our existing Bing Maps based power outage web map? While that worked, it wasn’t pretty. This map was originally designed to be displayed by our field crews running IE6 a 1024 x 768 laptop across a wireless connection. So, we were going to build a new map. While a desktop solution may have been possible (i.e. leaving a copy of ArcMap open on the display server), we chose to implement it as a web map using the ArcGIS JavaScript API for the following reasons.

A 5ft Tall JavaScript Map, Really?

While I considered using the ArcGIS Server REST API’s export option to generate fresh PNG images at the correct resolution every few minutes, I decided that an HTML5 web page with a small amount of JavaScript could do the job better. The HTML5/JavaScript implementation is ideal because after the initial request for base and static map layer tiles, the dynamic content could be implemented as a graphics layer that refreshed only as frequently as needed. Though the same could be achieved with Esri’s other web APIS (Flex, JavaScript), I chose HTML5 and JavaScript because I would need fine grained control over the layout, fonts, etc. I was also able to overlay my own custom inset map and the legend widget to make better use of the dead space around the edges of the map. The best part is that the same map can be displayed in a web browser on a user’s desktop at “normal” resolutions because I set the size dynamically in the JavaScript. Below is a screenshot taken at 1280 by 960 pixels:

What’s Next for the Big Web Map?

The initial feedback from the users has been very positive, but they had one main suggestion and that was to use color as well as size gradients for the outage symbols to differentiate the outages by the number of affected customers. That’s an easy fix. We also plan to add other operational data such as the locations of working crews as well as contextual information such as weather, earthquakes, etc. Fortunately, the contextual information is already exposed as public Esri map services from other agencies. The trick is going to be figuring out how to control the visibility of that data without any direct interaction from the user. One possibility is to create a simple administration interface where a senior dispatcher can control what content is available on the map at a given time. Another would be to cycle through a series of pre-defined “views” each with different kinds of contextual information behind the outages. Whatever we end up doing next, I’m really going to enjoy working on the solution!

Oracle: Get Month Start and End Dates for a Given Period (i.e. Year)

Tom Wayson — Fri, 10 Jun 2011 16:19:20 +0000

Took me a few minutes to think this one through, so I thought I’d share. In this example I show the start and end date for each month in the period that contains the fiscal year from 7/1/10 to 6/30/11.

select trunc(add_months('01-JUL-10', level-1), 'MM') start_date, last_day(add_months('01-JUL-10', level-1)) end_date from dual connect by level <= ceil(months_between('30-JUN-11', '01-JUL-10'))

START_DATE	END_DATE
7/1/2010	7/31/2010
8/1/2010	8/31/2010
9/1/2010	9/30/2010
10/1/2010	10/31/2010
11/1/2010	11/30/2010
12/1/2010	12/31/2010
1/1/2011	1/31/2011
2/1/2011	2/28/2011
3/1/2011	3/31/2011
4/1/2011	4/30/2011
5/1/2011	5/31/2011
6/1/2011	6/30/2011

It should work for periods of any length (i.e. one quarter, 6 months, 2 years, etc) by replacing the period start and end dates.

My First Ride on the Elysian Valley Section of the L.A. River Bike Path

Tom Wayson — Fri, 13 May 2011 16:49:00 +0000

A few happy days a year I have to take my car into the shop. On these days, I strap my bike onto my car rack and take the car into my old dealership in Glendale and get to ride the 9 miles from the shop to work. Along the way I retrace my old bike commute route from Glassell Park to downtown L.A. While most of that route is fortunate enough to have actual bike lanes or bike routes, there is one stretch of San Fernando between Glendale Blvd and Fletcher that is outright hostile to bike riders. I recently found out from my friends at Bikeside LA that the Elysian Valley section of the L.A. River bike path opened back in December of 2010, and looking at a map I realized that I could now completely circumvent that nasty bit of road by taking the L.A. River bike path from Glendale Blvd all the way down to the Riveside Drive bridge where I’d pick up my old commute route. See the map below:

This new stretch of river bike path is amazingly pleasant. There are a lot of trees that protect riders from the sun and wind. The path was getting a lot of use for a weekday, especially by dog walkers, but there didn’t seem to be any conflict between the pedestrian traffic and the roadies who, like me, were flying along at over 20mph.

There are nice mini-parks strewn along the path where people can stop and enjoy the shade or use outdoor exercise equipment. These parks and access points are adorned with the super cool sculptured fences that have become the hallmark of the L.A. River bike path.

However, the most amazing part was that at certain points, if you squinted, the L.A. River looked like, well, a river!

I have to say the only thing I didn’t like about the new stretch of bike path was the end. It drops riders off on Riverside Drive, just north of the bridge that crosses the river and train tracks. This forces southbound cyclists to cross where cars are speeding by uninhibited by cross streets or traffic signals and then climb up and over the broken glass and debris covered bridge. It’s not a big deal, but I hope that by the time the Arroyo bike path is extended to the Confluence Gateway the City will find a better way to link cyclists to the amenities in this area like the Metro station, Elysian Park, and even the Cornfield and Union Station.

Until then, I’ll be looking forward to the next time I get to take my car into the shop!

Running The ArcGIS JavaScript API in a SquareSpace Site

Tom Wayson — Thu, 14 Apr 2011 22:31:18 +0000

Just in case you are curious, SquareSpace does allow you to run ArcGIS Server JavaScript API code on their pages. Here’s a screen shot of a I map made by copying and pasting code from the simple map sample into a SquareSpace page.

The only trick was to move the script tags out of the section and into the , since I don’t think that you are able to modify the . Here’s the complete code listing:

   1:  <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">

   2:        <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;">

   3:       div>

   4:      div>

   5:      <script type="text/javascript">var djConfig = {parseOnLoad: true};script>

6:

7: