Live Google maps in SAS -- multiple markers

In my prior post, Spice up SAS output with live Google maps, I discussed the idea of delivering live Google map through SAS output and demonstrated the feasibility of doing so in SAS Information Delivery portal. Similarly, it can be done for any SAS HTML output.  You would just need to replace file _webout for SAS portal with any file reference pointing to an HTML file.

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

Since the first post was well received by the SAS community and generated numerous questions, I have decided to expand on it and show some additional functionality that can be incorporated into SAS output in regards to the Google maps.

In this post, I will demonstrate how to use SAS to generate Google map with multiple points (or markers, using Google terminology) and incorporate it into SAS HTML output.

Using SAS data sets as input

In the first post I used SAS macro variables to pass the data into SAS-generated Javascript that embeds Google map into SAS output. It was adequate for proving the concept; however, here I will use SAS dataset as a natural source of the data.

Let’s assume that we have the following data table with three observations, each corresponding to a single point on the Google map:

Figure 1. SAS data set with variables for three location markers.

Figure 2. Information displayed with each marker.

Although for showing three points on map as markers, we only need the latitude and longitude (lat and lng variables in our table), the remaining variables will be used to display an information window when user clicks on a marker, as shown in Figure 2:

Writing the code

Displaying multiple live Google map markers in your SAS output can be accomplished in six fairly easy steps.  You can view and download the full sample SAS code.  Here are explanations and clarifications for each 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 more self-contained, I generate the SAS table in Figure 1 within the code itself.  In reality, you would prepare your data table by pulling or combining data from a database or other data storage.

3. Determine the map center. For a single marker implementation, a trivial solution would be to assign map center to the same location as the marker.  When there are multiple markers, some map center considerations have to be made. In the latter case, you would want Google map center to be somewhere between the multiple markers. A geometrical way of handling this problem is to let the midpoint of the latitude and longitude range determine the center coordinates. Here is the formula to calculate the center coordinates:

C(lat, lng) = {min(lat) + [max(lat)-min(lat)]/2, min(lng) + [max(lng)-min(lng)]/2}

In this implementation, I chose a less geometrical, but a simpler and viable approach using averages and used the MEANS procedure in the sample code to implement it:

C(lat, lng) = ( avg(lat),  avg(lng) )

4. Initialize the map. This code portion uses a DATA _NULL_ step to generate a non-repeatable section of the code, and it mostly coincides with the code from a previous post with an exception.  In this example, I use the map center coordinate variables that were calculated in the previous step instead of macro variables. To simplify, I also use a constant zoom level (zoom: 12) to control the Google map scale. Obviously, if needed, you can determine the scale dynamically based on your data.

5. Add multiple markers. 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 the source data, thus generating as many markers. Here are other notes about this section:

To append to the output HTML files, I use the mod option:

file fout mod;

I use inline styling to modify the default width of the Google map information window. Similarly, you may apply other CSS styles here or in an external CSS using class= or id= selectors.

'var info' i "= '" ' ' oname " " addr1 " " addr2 " Phone: " phone " " "';"

I use the following statement to generate the Javascript variable suffix corresponding to each observation in the source SAS data set:

i = strip(_n_);

6. Wrap up the HTML file. Again, I use a single-iteration DATA _NULL_ step to wrap up the Javascript and HTML. The bottom portion of the code contains information about the styling of the final embedded Google map:

data _null_;
file fout mod;
put
'}'
'google.maps.event.addDomListener(window, "load", initialize);' /
' ' /
' ' /
' Sample of Google map in SAS output with multiple points/markers ' /
' ' /
' '
;
run;

Using the final map

Running the above code sample produces the gmapoutput_mm.html file which, when opened in a web browser, produces the following Google map containing all three points of interest represented by markers shown in Figure 3.

Figure 3. Final Google map showing three location markers and an information window.

Click for an interactive version of the map.

This map is interactive: you can move it around, zoom in and zoom out, and you can click on markers to display detail information about that location in a popped information window.

The code that produced this map is completely data-driven in the sense that all the information comes from a data table. I'm hoping that, by now, you can see how relatively easy it is to incorporate Google maps into SAS-generated output and that you will start using this technique for your benefit.

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

Live Google maps in SAS -- multiple markers was published on SAS Users.