Adding Data to Your Web Map

By Rudy Stricklan, RLS, GISP

In the last installment of this series (in the June issue), we covered some web mapping fundamentals:
  • HTML: HyperText Markup Language, the formatting language that internet browsers interpret to structure web pages,
  • CSS: Cascading Style Sheets, the formatting code that defines web page content appearance, and
  • JavaScript: the scripting language that provides programming functionality within HTML—it makes web pages interactive. It is not related to or derived from the Java coding language.
Another way to understand these fundamentals is to consider that HTML is analogous to an AutoCAD Drawing eXchange File (DXF), CSS is similar in functionality to AutoCAD .lin files, and JavaScript corresponds to the AutoLISP programming language. Unlike DXF, however, CSS and Javascript commands can be directly incorporated into HTML code. Good programming practice separates out frequently reused CSS and Javascript routines into library modules, much as AutoCAD does with acad.lin and acad.lsp files, respectively.

The current version of HTML is referred to as HTML5 and is the trinity of the latest releases of HTML, CSS (called CSS3), and JavaScript.

In this article, we develop a more functional web map based on Google Maps and add data to it via Google’s Fusion Tables functionality. All coding referenced in this article is available as a zipped folder at http://bit.ly/MiK31X.
 

In Web Mapping the World Is Round


Web maps as provided by Google and Bing (among others) are rendered in a projection called Web Mercator. It’s not a term you bring up casually at a gathering of geodesists. Many of them would sooner forgive a slight on their mothers’ names than permit any advocacy of Web Mercator.

Web Mercator isn’t a conspiracy or yet another example of GIS people misunderstanding survey principles. It is a Mercator projection based on the World Geodetic System (WGS) 1984 geographic datum, but computationally it treats the world as spherical rather than ellipsoidal. Spherical geometry calculations are inherently less complex than ellipsoidal ones and therefore are computationally faster. The time savings for hundreds of millions of map requests on a daily basis is significant, and the tradeoffs in accuracy are really quite reasonable.

Articles in the reference documents in my zipped folder better explain the Web Mercator projection, but we don’t need that level of detail for our web mapping exercises. Some web mapping services can handle any projection, but our choice of web mapping, the Google Maps API (Application Programming Interface), does not. It’s free, though, so a spherical world is what we’ll work with. 
 

A Foundation Base Map


Let’s start off with a modified version of the web map HTML code that was presented last time. We’re going to call this “Web Mapper V1.html” and progressively build on it over time. Here is its code:
 
<!doctype html>
<html>
    <head>
       <style>
           #map_canvas { width: 100%;height: 600px; }
       </style>
       <script type=”text/javascript”src=”http://maps.google.com/maps/api/js?sensor=false”>
       </script>
       <script type=”text/javascript”>
           function initialize() {
              var myLatLng = new google.maps.LatLng (34.572406,-111.856263);
               var myOptions = {
                  zoom: 19,
                  center: myLatLng,
                  mapTypeId: google.maps.MapTypeId.SATELLITE
           }
           var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
           }
       </script>
    </head>
    <body onload=”initialize();”>
       <div id=”map_canvas”></div>
    </body>
</html>
 

A detailed explanation of this HTML code is in this article’s “Map Mapper V1 Anatomy” reference document. Basically, we’re:

  1. setting up a browser display area that will be 100% of the screen width and 450 screen pixels of height;
  2. defining two scripts (both in JavaScript notation): the first references the Google Maps JavaScript API and the second defines a function named “initialize” that sets up a map view centered on a specific latitude and a longitude at a defined zoom level (0 = entire world, 20± = maximum zoomin), initially displaying aerial imagery as a background; and
  3. executing the initialize script in the body portion of the HTML (this is the HTML section where things actually happen on your screen).
Save this code to a file with an .html extension and then double-click on it, and you should see a display in your browser that looks like the figure at the very top of this page.

It’s interesting, but without context data it’s not especially informative. We can switch between Map (streetmap) and Satellite (aerial imagery) versions as well as drag the little Streetview ‘pegman’ and display a horizon view, which would produce the bottom image in Figure 1.

Data Is Where It’s At


What makes this particular map view significant is that it is centered near the geographic centroid of Arizona, recently commemorated and monumented as NGS Station CURMUDGEON. It is named in honor of Arizona’s recently-retired National Geodetic Survey Advisor, David Minkel.

Again, it’s cool and all, but what would make this map a lot more useful is a data point symbolized at the location of station CURMUDGEON. (Figure 2)

There are numerous ways to go about putting your own data onto the Map Viewer V1 canvas. The choice this time around will be to use another Google web mapping service called Fusion Tables. Google Fusion Tables are basically web-accessible/sharable spreadsheets, with some significant differences. For one thing, they can contain and display map data. They also are in theory infinitely scalable, although the free version has some practical limitations: 250MB maximum for any one table (although you can merge individual tables), and only the first 100,000 rows of data are returned in any single map request. If this sounds like something that you can live with, read on.
 

Google Fusion Tables


To use Google Fusion Tables, you need to have a Google account. It’s free, available at https://accounts.google.com/NewAccount. Once you have an account, access Fusion Tables through this link: www.google.com/fusiontables. Click on the “See My Tables” link, and once you’ve logged in with your Google account credentials, you’ll be on what is currently known as the Google Docs page. It’s transitioning to an all-encompassing service called Google Drive (https://drive.google.com), which allows file storage on the Google cloud. It’s free up to 5GB, then charges approximately 10¢ per month per each gigabyte stored over 5GB.

(Another similarly priced cloud file-sharing service is Amazon’s S3 offering, which we’ll explore in a future article. And, by the time you read this, Esri will have introduced hosted mapping services into its ArcGIS Online cloud.)

Input to Google Fusion Tables can be Excel spreadsheets, delimited text files (.csv, .tsv or .txt types), or Keyhole Markup Language (KML) files. For this example, let’s assume we have the spreadsheet data for station CURMUDGEON. (Figure 3)

Minimal, yes. Although you don’t necessarily have to name your coordinate columns “latitude” and “longitude,” your life will be easier for it. To be as accurate as possible, the values should be on the Web Mercator projection, but WGS84 coordinates will get you in the ballpark, as well. We’re not doing survey-grade mapping here.

Notice also that the last column, “Picture,” has a web address (http://bit.ly/MNr5QQ) that contains a close-up picture of the monument. For now, just copy and paste the example link or use the referenced spreadsheet “Input Point.xlsx.” If you’re already itching to try out that Google account you’ve just created, you could upload your own image and create a hyperlink to it by following the detailed directions in another of the reference documents for this article.
 

Importing Your Spreadsheet into a Google Fusion Table


To save some space, the detail for this process is contained in reference document “Importing Spreadsheet Data Into a Google Fusion Table.” In summary:
  1. Go to Google Docs and sign in with your Google account.
  2. Click the Create button and select More  > Table. (Figure 4)
  3. Choose the file to upload from your computer (“Input Point.xlsx”) and click Next.
  4. Preview the columns being imported. Click Next.
  5. Edit the table’s name, attribution (i.e., table metadata), and description as needed. You can change these values later by using Edit > Modify table info.
  6. Click Finish.
 
To check that your coordinate data landed in the right place, click on Visualize > Map, and you should see something like Figure 5. The NGS datasheet and the monument picture are both clickable hyperlinks, as we want.

Although this basic map viewer could work in a pinch (it’s accessible entirely from the web), what we want to do is insert the Fusion Table data we’ve just created as a layer into our Web Mapper HTML code. To do this we need to share the Fusion Table to enable access across the web to anyone who has the table’s link.

  1. Click the Share button in the Fusion Tables window. (Figure 6)
  2. You’ll see a list of who has access to the table. Find “Private” and click Change.
  3. Select the “Anyone with the link” radio button under Visibility options.
  4. Click Save. The change is effective immediately.
  5. Click Done.
Now retrieve the Fusion Table unique ID number by clicking on the File button (make sure you’re clicking on the File button within the Fusion Table window, not the File menu option for the browser itself), and selecting the About option (Figure 7). The table’s ID is listed as the “Numeric ID,” in this case 4258120.
 
Now we add the two lines from Figure 8 to our Web Mapper V1 HTML file. If you haven’t noticed already, placement of things like “}” code section delimiters is critical.

The resulting file is saved as “Web Mapper V2.html” and renders a map nearly identical to Figure 5. Fusion Table markers can be changed, and in fact selections can be made on Fusion Table rows to filter out subsets of desired data. It’s very handy. You can add up to five Fusion Tables in any one map created by the Google Maps API.

You now have a very basic HTML5 map viewer with a Fusion Table data layer. One small detail is that the HTML code is still sitting locally on your local computer. To be fully immersed in the web mapping paradigm, the HTML needs to be stored on the web as well. Although I’ll cover that and more in future articles, here’s a quick how-to for the folks who can’t wait:

  1. Use a free website creation tool, in this case, Weebly.com.
  2. Drag in an HTML element and paste the Web Mapper V2. html code in it (see Figure 9).
  3. Publish your website and check it out!

Rudy Stricklan, RLS, GISP is a member of the editorial board of this magazine and principal consultant with Mapping Automation, LLC.
 

» Back to our August 2012 Issue

Website design and hosting provided by 270net Technologies in Frederick, Maryland.