Twitter: raymondcamden


Address: Lafayette, LA, USA

Proof of Concept 911 Viewer

01-19-2010 6,979 views jQuery, ColdFusion 16 Comments

About two weeks ago a fellow techie in town clued me in a web page run by my local government that posted the latest 911 information. This is filtered to just traffic information but still it was pretty fascinating to watch. I contacted them to see if they had a non-HTML version but, of course, I never heard back. (Is it just me or do most sites just freaking ignore contacts??) I decided to see if I could play with this data a bit and get a 'clean' view of the data. Here is what I came up with.

First I needed a way to parse the data on the page. It seemed to follow a pretty standard format. The table always had four columns and the data seemed to be published in a consistent manner. For the heck of it I decided to create a Yahoo Pipe to parse the HTML. This was completely unnecessary, but it was fun, and that's all that matters. Unfortunately I seem to have lost the pipe online, but the URL still works. You can view it in your browser here. The only interesting part really is the YQL:

view plain print about
1select * from html where (url="http://67.32.159.27/webcad/webcad.asp" and xpath='//table[@border="0"]/tr[@bgcolor="#FFFF99"]') or (url="http://67.32.159.27/webcad/webcad.asp" and xpath='//table[@border="0"]/tr[@bgcolor="#99FF99"]'

As you can see, I use the core URL for the page and then grab the table rows. Since the table rows alternate colors I check for both. Again, this is a bit silly. ColdFusion can easily XPath too. But I figured, what the heck?

The next step was to loop over the JSON result and parse out the data. For the most part this was trivial - I just had to account for - and remove - a few weird high ASCII characters that got in there somehow. Once that was done, I checked my database to see if a report with the same time, address, and type already existed. If not, I did an insert. As all of this is pretty rudimentary I assume folks don't want to see the code. Let me know if otherwise. I set that up as a scheduled task to run every 5 minutes. I also wrote a quick CFM that made use of my Google Geolocator CFC. This parses addresses with no longitude/latitude information, looks it up, and updates the database.

So I let this run for a week or so and then created my first report using CFMAP. My first report simply got all the data and mapped it:

As you would expect, everything occurs over a street, and occur over streets I can promise you are pretty busy. The code for this is rather simple - get all the data (with a mild bit of cleanup) and select a custom icon based on the 911 incident type:

view plain print about
1<cfquery name="getdata">
2select    longitude, latitude, type, incidenttime
3from data
4where
5    (longitude !='' and latitude != '')
6    <!--- fixes one bad row --->
7    and longitude < -88
8    and incidenttime is not null
9</cfquery>
10
11<cfoutput>#getdata.recordcount# items.</cfoutput>
12
13<cfmap centeraddress="Lafayette, LA" width="900" height="900" zoomlevel="12" showcentermarker="false">
14
15    <cfloop query="getdata">
16        <cfif findNoCase("vehicle accident", type)
17        or
18             findNoCase("stalled vehicle", type)>

19            <cfset icon = "icons/car.png">
20        <cfelseif findNoCase("traffic control", type)
21        or
22                 findNoCase("traffic signal", type)>

23            <cfset icon = "icons/stop.png">
24        <cfelseif findNoCase("fire", type)>
25            <cfset icon = "icons/fire.png">
26        <cfelseif findNoCase("hazard", type)>
27            <cfset icon = "icons/hazard.png">
28        <cfelse>
29            <cfset icon ="">
30        </cfif>
31
32        <cfmapitem latitude="#latitude#" longitude="#longitude#" markerwindowcontent="#type#<br/>#dateFormat(incidenttime)# #timeFormat(incidenttime)#" markericon="#icon#">
33    </cfloop>
34
35</cfmap>

So this was kinda neat... but I wanted to see something else. I thought - what if we could take this data, and plot it over time. I took a look at the Google Map API and reviewed how to add, and remove, markers. I then whipped up jQuery and ColdFusion code to "group" my reports into hours. I then set it up so that it would run a block of data every second or two. The result? A "movie" of 911 activity:

http://www.coldfusionjedi.com/demos/traffic.swf (warning, large Flash movie)

I stopped the Jing recording after a few days, but obviously it goes on to today. You can see, sometimes, some obvious upswings at rush hour. Not surprising, of course, but fun as heck to watch. Unfortunately I've run out of time so I'll post the code to this demo tomorrow.

Related Blog Entries

16 Comments

  • Commented on 01-19-2010 at 5:15 PM
    This is awesome...great job! Especially the ability to view the events over time. Thanks for sharing this. I'm looking forward to viewing the sample code.
  • Commented on 01-19-2010 at 5:24 PM
    Nice job Ray. Looks like you'll be getting some tweetage.
  • t0nic #
    Commented on 01-19-2010 at 7:24 PM
    I can image the discussion at the police department: "Hey, we can do this? Why don't we have this in the station?!"
  • Commented on 01-19-2010 at 7:34 PM
    Google maps. The modern day graph.
  • teaman #
    Commented on 01-19-2010 at 7:43 PM
    This is great Ray! This should have application to lots of scenarios. I would also love to see what your Google Geolocator CFC does. Any chance of posting that code, too?
  • Commented on 01-19-2010 at 9:24 PM
    Glad yall liked it.

    @teaman: Here is the CFC: http://googlegeocode.riaforge.org/
  • Commented on 01-20-2010 at 3:48 AM
    Hey Ray pretty cool idea. I can image it's much easier to digest the data in the form of a map than in a simple color coded table.

    Its a pitty that the 911 folks simply ignore inquiries..
  • Lola LB #
    Commented on 01-20-2010 at 6:02 AM
    Wow . . . this is cool! This could be very useful in disaster situations, as an aid for decision makers to decide where best to allocate their resources.
  • Commented on 01-20-2010 at 9:06 AM
    Awesome job Ray, can't wait to learn from your code.
  • Commented on 01-20-2010 at 10:24 AM
    I wonder if any other areas have similiar data available. This looks like something pretty fun to play with :)
  • Don Blaire #
    Commented on 01-20-2010 at 11:08 AM
    Enjoyed this post. Sure would like to learn more from your code. Could you share the full code for this?
  • Commented on 01-20-2010 at 11:10 AM
    Planning on it. Have a small blog post around noon, and will do the code post later in the afternoon. I'm also considering a basic AIR application.
  • Commented on 01-20-2010 at 5:27 PM
    Da code:

    http://www.coldfusionjedi.com/index.cfm/2010/1/20/...
  • Tim #
    Commented on 05-12-2010 at 11:38 AM
    Working on a similar project, but would like to default a specific mapped item to "showmarkerwindow". Setting this attribute to "true" doesn't seem to do much of anything. Clicking the marker brings up the markerwindowcontent, but I want this to display onLoad.

    Any thoughts? CF or google issue?
  • Commented on 05-12-2010 at 8:30 PM
    I'd probably look at the Google Maps API to see if you can force it on.
  • Bernhard #
    Commented on 10-02-2012 at 12:51 PM
    Hi there,
    I ran into the same issue. Set showmarkerwindow to true but it doesn't show the marker window onLoad. Any news on that? It would be nice if it'd be possible to set some certain markers to show the window content onLoad.

    Thank u very much and have a nice time
    Bernhard

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty