Web Mapping: Changing How We Work with Maps

This is the first in a series on the phenomenon of web mapping and its relevance for surveyors. We’ll start by learning about HTML5 in this article, followed by using HTML5 to create a simple web map viewer on your computer, then making that viewer and your data accessible on any device that has internet connectivity. For those of you still with us, we’ll finish by coding up a control surveying website application that can be customized to your preferences.

All you need is internet access and your inherent surveying curiosity. If you’re comfortable with using spreadsheet and text editor software, plus being able to use an internet browser such as Microsoft’s Internet Explorer, then you’re ready to dive in.

By Rudy Stricklan, RLS, GISP

Sometimes technologies change in a significant way, and we’re not even aware of the changes because their outward appearances are pretty much the same. Take color televisions as an example. Although they’ve become bigger and have better resolution, their presentation content is still the same: colored moving pictures with sound. We’ve come through a similar evolution with computerized maps: ever since the big transition from hardcopy to digital, they look pretty much the same: colored pictures now on a computer screen (albeit with no sound).

But underneath the hood, there have been some major changes in digital mapping (as well as televisions). In addition to the inevitable optimization of hardware/software technologies, the delivery of map visualizations on computing devices has undergone a remarkable transformation in just the last several years. As revolutionized by Google, interaction with cool maps no longer requires expensive hardware and software—just a free internet web browser on our desktop computers, tablets, smartphones, or any other devices that have internet access. The availability of data in web-services format over the internet has indeed changed forever the way we work with maps (and every other form of information content).

Background: HTML, CSS, Javascript

There is a definite distinction between the terms “internet” and the “web.” The internet is the physical network of hardware and supporting infrastructure that enables global inter-computer communications. The World Wide Web, or web for short, is the software that runs on the internet to send and receive HTML pages (explained at right). The web’s HTML content is viewed using free software called web browsers (like Internet Explorer, Google Chrome, Mozilla Firefox, etc.). Popularly we call the internet the web, and vice versa. It’s sort of the same thing as when we as surveyors hear people equating the terms “accuracy” and “precision.” Quibbling over specific definitions will not be a focus here—the goal is to understand some key technicalities in order to quickly start using web mapping.

HTML: Occurring roughly at the same time as the birth of the commercial internet, a concept known as Standard Generalized Markup Language (SGML) was adopted as a standard by the International Organization for Standardization (ISO) in 1985. SGML’s format is pretty simple: non-printing codes are embedded in an otherwise open-text document, giving instructions on how to interpret and present portions of the document.

Old-timers who have used word processing software like WordStar are familiar with keystroke sequences such as Ctrl-P-B to render subsequent text in bold type. In contrast, modern word processing packages use one-click buttons for such formatting, which immediately display the formatting results. However, the resulting data document containing non-printing instructions and printable content hasn’t changed appreciably over the years.

In the early 1990s, the internet pioneer Tim Berners-Lee developed the HyperText Markup Language (HTML), a specific form of SGML. HTML is what web browsers use to interpret and render text, images, and other multimedia material as readable pages. In other words, HTML documents = web pages. HTML is somewhat of a throwback to WordStar in that HTML documents contain tags enclosed in angle brackets to provide formatting and other instructions to render the actual presentation content.

Let’s say you have created a plain text file called “tryme.html” that contains the following:
  <!DOCTYPE html>
  <b>Professional Surveyors Rock!</b>

Double-clicking on this file’s icon in a Windows Explorer frame (the “.html” extension instructs Windows to open such files with a web browser) or opening this file directly in an open browser window (CTRL+O in current versions of Internet Explorer, Chrome, or Firefox) produces the output in Figure 1.

The <!DOCTYPE html> initial tag tells the browser that this document is in HTML5 format, and the <b>Professional Surveyors Rock!
</b> line renders the text “Professional Surveyors Rock!” in bold print, as directed by the beginning <b> and the ending </b> tags.

In general, instructions in HTML files are contained in angle brackets and are paired to define their scope, like the <b> opening tag and the </b> closing tag in the example. The full scope of HTML syntax is of course considerably more complex, and purists would take issue with even the simplistic example (and its explanation) presented here.

If you really wanted to make HTML purists squirm, you could roughly liken HTML to DXF files, the open-text representation of AutoCAD drawing files. If enough beers were at stake, you could construct a map using DXF alone (manually entering the locations for all the polylines, points, text, etc.). Now just how macho would that be?

CSS: In a simpler world, HTML alone would be the be-all and end-all language to render web pages. Nothing in this life is ever so simple, though. Which brings us to the second major component of internet web page construction: Cascading Style Sheets, or CSS. Expanding on our analogy of HTML ≈ DXF, think of CSS in the same way that you use AutoCAD linetypes (aka line styles in MicroStation). You could construct railroad lines in AutoCAD as polylines with perpendicular line hashes, but it’s much easier and cartographically prettier to use the AutoCAD TRACKS linetype instead. Although you can use Cascading Style Sheets for styling lines in a web page, their use is much deeper than that.

What’s up with the “cascading” term, you ask? It refers to the fact that styling rules can be set up in a hierarchy where broader rules, like those applicable to the whole page, are defined at the top of the hierarchy, and more narrow rules, like those for specific elements on a page, are defined lower in the hierarchy. Rules defined at the top of the hierarchy are inherited by rules defined lower in the hierarchy in a cascading fashion. The most current version of Cascading Style Sheets is referred to as CSS3 (with CSS4 in the works).

Javascript: The final component used in constructing modern web pages is the Javascript coding language. Around since 1995, it has nothing at all to do with the Java programming language. Using Javascript in HTML documents is roughly akin to calling LISP or Visual Basic routines from AutoCAD— it allows the user to insert customized code that is then read by the browser and performs specific functions as the page loads.

In summary:

HTML = web page coding language.
CSS3 = formatting library for ultra-cool web page “look and feel.”
Javascript = a coding language to add custom functionality to web page displays.

Until very recently, it was necessary to download “plug-ins” like Adobe Flex or Microsoft Silverlight on top of browsers to make them act more like desktop software applications with quicker response times and custom functionality like geolocation. Forget all that—the new standard of HTML is called HTML5, and it is more than powerful enough (with the contributions of CSS3 and Javascript) to do web mapping that rivals that of plugin-assisted web pages.

Let’s Code

To wrap up this introductory session, let’s move past definitions as well as any formal instruction. We’re going to jump into real web map programming the good old American way: by taking somebody else’s code and hacking it.

To begin with, you’re going to need a text editor that is HTML-aware. Open your browser and navigate to this page: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic. The TryIt HTML editor that comes up displays HTML code in the left-side frame, and the results of executing the HTML code appear on the right side.

If we enter the “Professional Surveyors Rock!” HTML code into the editor side of TryIt and then click on the “Edit and Click Me” button, we get Figure 2. You can experiment with changing the second line and see the results.

But what we want is a real live web map, so here’s some HTML5 code (Figure 3) that uses Javascript to access Google Maps for the basemap background (the code has been typed the bottom of this article).

The line numbers along the left side are for reference only—they are not part of the code itself. The indentation is not strictly necessary, although any self-respecting programmer will tell you that it helps to improve the code’s “readability.”

Going back to the TryIt editor, delete the previous HTML code and insert this new code module. When you press the “Edit and Click Me” button, an aerial view of the immortal King of Rock and Roll’s Graceland Mansion in Memphis, Tennessee, is displayed (Figure 4).

If you can’t see anything in the view window, then welcome to the world of browser incompatibilities. Certain versions of Internet Explorer aren’t yet “tuned” to the latest version of HTML5, and we’ll cover those peculiarities in future articles. For now, shake it off and copy the HTML code to a plain text file and then open that file in your browser—it should display the map view now because it’s not going through the additional inner workings of the TryIt editor.

Or you could update your browser to something more modern like Google Chrome or Mozilla Firefox. That would definitely impress your kids (or grandkids).

We won’t get bogged down in analyzing all the HTML code just yet, but some key parameters for you to experiment with are in lines 16 through 18:

  • Line 16 specifies the zoom level for the map. Level 0 is an overview of the entire world; level 20 zooms in to the maximum view scale.
  • Line 17 centers the map display on the specified latitude and longitude coordinates (Google and most other web map servers use a round-earth version of the World Geodetic System of 1984 [WGS84] datum).
  • Line 18 specifies the map type. Values for this parameter are:

        ROADMAP, the traditional street map view of Google Maps,
        SATELLITE, showing satellite imagery for the background,
        HYBRID, a mix of satellite imagery and labeled features (roads, city names, etc.),
        TERRAIN, displaying physical relief.

The Road Ahead

Next time we’ll dig a little deeper into customizing a basic web map viewer and show how to “drag and drop” a spreadsheet of survey points into our viewer. Stay tuned!


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

Figure 3 in type:

<!DOCTYPE html>
    <title>Google Maps API Example</title>
    <meta name="viewport" content= "width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <style type="text/css">
       html, body, #map_canvas {margin: 0; padding: 0; height: 100%;}
    <script type="text/javascript"
    <script type="text/javascript">
        var map;
        function initialize()  {
        var myOptions = {
            zoom: 18,
            center: new google.maps.LatLng(35.043266,-90.012774),
            mapTypeId: google.maps.MapTypeId.SATELLITE};
        map = new google.maps.Map (document.getElementById('map_canvas'),myOptions);}
        google.maps.event.addDomListener (window, 'load', initialize);
            <div id="map_canvas"></div>

» Back to our June 2012 Issue