Drawing overlays on SAS-generated Google maps

In this post, I am going to expand on my prior posts, Spice up SAS output with live Google maps and Live Google maps in SAS -- multiple markers to explore some new functionality.

Handpicked Related Content: The power of SAS-generated InfoWindows in Google maps

Using similar techniques, I'll demonstrate how to draw a closed geometric shape, in particular, a polygon, on a Google map. Well, let’s make it more than one polygons – two for simplicity. Overlaying polygons on a Google map is a great visualization for geographical and administrative regions, such as countries, states, counties, school districts, areas of services, etc. Besides, practically any shape can be approximated by a polygon with a large enough number of vertices. Here's an example what we are going to get:

The map is rendered with semi-transparent colors as fill colors for the polygon areas and a one-pixel solid color (stroke color) for the polygon borders. Actually, border lines are not necessary if adjacent areas are of different colors.

I have also included a technique for creating an information window object that displays information pertinent to each polygon region.  The code has an event listener that shows the corresponding information in the information window when a user clicks in the area of a polygon.

How it's done

You can view and download the full sample SAS code. Here are explanations and clarifications for each code section in this example:

1. Specify the HTML output file location.  Use the FILENAME statement to assign a fileref to the physical location of the HTML file you are going to generate.

2. Prepare the data. To make this example self-contained, I generated the source SAS table within the code itself.  In reality, you would prepare your data table by pulling or combining data from a database or other data storage. The source data has one observation per each vertex of each polygon. The data set variables include a region identifier (region), region color (aclor), region area in square miles (area), population, and latitude (lat) and longitude (lng) as shown here:

3. Determine the map center. Center your Google map based on the geometrical center between minimum and maximum latitudes and longitudes of all polygons’ vertices:

proc means data=regions noprint;
var lat lng;
output out=dataspan (keep=minlat maxlat minlng maxlng) min(lat)=minlat
max(lat)=maxlat min(lng)=minlng max(lng)= maxlng;
run;

data centerdata;
set dataspan;
clat = minlat + (maxlat - minlat)/2;
clng = minlng + (maxlng - minlng)/2;
run;

4. Initialize the map. This section is not different from our prior implementations of the Google map with markers and info windows and uses a DATA _NULL_ step to generate a non-repeatable section of the code.

5. Add multiple regions. This portion of the code also uses a DATA _NULL_ step, but here the DATA step loops through the source data as many times as there are observations in it.

First, latitude-longitude pairs of all the vertices of each polygon are written into a Javascript array (called border), and then each polygon is created and overlaid on the Google map (google.maps.Polygon({paths: border, … ).

In this code section, for each polygon (mypoly1, mypoly2), we also create contents of the info window (info1, info2) and define event listeners (google.maps.event.addListener).

6. Wrap up the HTML file.  Again, this section is not different from our prior implementations of the Google map with markers and info windows and uses a DATA _NULL_ step to generate a non-repeatable section of the code to wrap up the Javascript and HTML.

Using the final Google map

Running the above code sample generatess the gmapoutput_poly.html file, which, when opened in a web browser, produces the following Google map containing two polygon areas:

Click for an interactive version of the map.  You can move it around, zoom in and zoom out, and you can click on any colored polygon to display detail information about that area in a popped information window as shown in Figure 1. The info window is opened at the point clicked by the user, but displays information about the whole polygon area. You can also switch between the Map and Satellite views.

If you are interested in Google map visualizations in SAS applications, please send me your ideas and desired functionality by commenting on this blog post.

Handpicked Related Content: The power of SAS-generated InfoWindows in Google maps

Drawing overlays on SAS-generated Google maps was published on SAS Users.