Creating Mapping Applications with the ArcGIS API for JavaScript and Dojo Bootstrap

When the design team doesn’t do Dijit*

Recently, our design team delivered a functional HTML wireframe that was developed with Twitter Bootstrap. Ordinarily that would not be a problem, but the application we’re working on is based on the ArcGIS API for JavaScript and as such relies entirely on Dojo. The developers wanted to be able to leverage as much of the designers work as we could without having to include jQuery – a dependency of Bootstrap’s JavaScript components. A little digging around lead me to Kevin Andre’s Dojo Bootstrap project – a pure Dojo implementation of Twitter Bootstrap. We were able to successfully use Dojo Bootstrap in our ArcGIS API for JavaScript based mapping application. This enabled us to leverage the declarative mark up and styles already written by the designers without adding a jQuery dependency.

Just in time for the 2013 Esri International Developer Summit, I’ve created a simple application that demonstrates how to incorporate Dojo Bootstrap with the ArcGIS API for JavaScript:

Continue reading

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

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.

IMG_20111017_112021

Continue reading

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

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

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:

image

Continue reading

Running The ArcGIS JavaScript API in a SquareSpace Site

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.

image

The only trick was to move the script tags out of the <head> section and into the <body>, since I don’t think that you are able to modify the <head>.  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:      <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>
   7:      <script type="text/javascript">
   8:        dojo.require("dijit.layout.BorderContainer");
   9:        dojo.require("dijit.layout.ContentPane");
  10:        dojo.require("esri.map");
  11:   
  12:        
  13:        var map;
  14:        
  15:        function init() {
  16:          var initExtent = new esri.geometry.Extent({"xmin":-13632648,"ymin":4542594,"xmax":-13621699,"ymax":4546875,"spatialReference":{"wkid":102100}});
  17:          map = new esri.Map("map",{extent:initExtent});
  18:          //Add the topographic layer to the map.
  19:          var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
  20:          map.addLayer(basemap);
  21:          
  22:          //resize the map when the browser resizes 
  23:          dojo.connect(map, 'onLoad', function(theMap) { 
  24:            dojo.connect(dijit.byId('map'), 'resize', function() {  //resize the map if the div is resized
  25:              clearTimeout(resizeTimer);
  26:              console.log('resize');
  27:              resizeTimer = setTimeout( function() {
  28:                map.resize();
  29:                map.reposition();
  30:              }, 500);
  31:            });
  32:          });
  33:        }
  34:   
  35:        dojo.addOnLoad(init);
  36:      </script>

Why I Am Reviving My WordPress Blog in the Age of Twitter, Facebook, Del.ico.us, Google Reader, Tumblr…

I started this blog in 2005, and back then, it was pretty much either WordPress or Blogger.  WordPress seemed more customizable, especially since I had a hosting plan where I could host my own blog and dive in to the underlying PHP if I wanted to, so it seemed like the right platform for me at the time.

As the micro blogging platforms emerged, I realized that they were more appropriate for most of my posts (many were little more than a link with a short blurb on why I thought it was important).  Furthermore, I could reach different audiences via different channels: Facebook for friends and family, Twitter for quasi professional exchanges, Del.ico.us and Google Reader for sharing important articles, etc.  I’ve tried them all, and in the process have created a very fractured online identity.

It was starting to get out of hand, so I finally decided to take advantage of all the modern APIs and syndication formats to wrangle my content into a central repository, but where?  I could immediately rule out most of the services that I was such as Facebook, Twitter, Del.ico.us, and the Google services (Profiles, Buzz, Picasa)as they simply weren’t up to the task of incorporating all of my content.  Those services would be the source of content, but I would I need a real blogging platform to bring them all together under one branded site.  Below are all the options I considered along with some pros and cons of each.

Continue reading

City of Pasadena Interactive Map Enhancements

The enhancements that I’ve been making to the interactive map on The City of Pasadena’s web site went live yesterday!

About the Project

The Google Maps based interactive map was originally developed (by another consulting firm) to help residents identify what neighborhood and city council districts they lived in.  A user entered an address, and the page would display a marker on the map with an info window listing the location’s city and neighborhood council districts.  Below the map the page would show a street view panorama of the location.  The user also had the option of viewing the city council district boundaries on the the map as KML overlays.

The City wanted to enhance the page by also displaying nearby features (such as libraries, transit stations, etc.) on both the map and the list.

Screen shot of The City of Pasadena Interactive Map

Continue reading

VEMap.Find Returns Italian Location from US Addresses (Los Angeles)?

This one took me a couple of minutes to figure out, so I thought I’d pass it along. Recently I launched an update to an application (in beta) that used the VEMap.Find method to geocode addresses in Los Angeles, CA, but for some reason the results for a few of the addresses would show up somewhere in Italy. Eventually I noticed that this was only happening for avenues (as opposed to streets or boulevards). I realized that our street database used the abbreviation “AV” instead of “AVE” and deduced that there must be an Italian province (Avellino?) that used that abbreviation and the parsing engine behind VEMap.Find must pick that out before the zip code.

My solution was to replace the word “AV” with “AVE” in the address string before passing it to the VEMap.Find function with the following:

address.replace(/\bAV\b/,"AVE")

So far, so good. I wonder how may more calls to replace I’ll end up daisy chaining on to that before I’m through with this one…

myjoglog.net – Iteration 3: MVC Membership Provider-based Access Control

In my previous post in this series, I determined that I had to start looking into how MVC handles access control before moving forward. I came up with a list of functional specifications that I needed to write proof of concept code right away to learn how ASP.Net MVC helps (or hinders) me in implementing access control. In this post, I’ll look at the first 2 specifications:

  1. Authenticate individual users and mange their credentials (i.e. a MembershipProvider)
  2. Manage access to functionality based on membership (i.e. a MembershipProvider)

I know that in MVC, controlling access to controller actions (and thereby the associated views) is done via a specific type of ActionFilter called an AuthorizationFilter. Also, the ASP.Net MVC Web Application template includes code that shows how to use an ASP.Net membership provider to enable user registration and login. So, a quick test that will tell me if the built-in AuthorizationFilter will be able to meet the first 2 functional specifications above is to add an authorization filter to the Add action of the Workouts controller so that only users that have logged in will be able to add a workout.

I do this by changing the attribute for the Add method from:

AcceptVerbs(HttpVerbs.Get)

to:

AcceptVerbs(HttpVerbs.Get), Authorize()

Now when trying to add a workout, a user is redirected to the login page. After registering and logging in the user is now able to add workouts!

In the next installment I will try to convince myself that I can control access to actions based on user’s relationship to an entity (i.e. members can only delete their own workouts).

Stay tuned…