Archive for May, 2011

Using the Google Maps Elevation Service

Posted on May 31, 2011. Filed under: GeoSpatial Training Services, Google Maps |

The Google Elevation Service provides elevation data for points on the surface of the Earth as well as sampled elevation data along paths.  The ElevationService object is used to communicate with the service.

The process of obtaining elevation data about a location or path is similar to that of the geocoding process.  A request object which can be either a LocationElevationRequest or PathElevationRequest object is created and passed to the ElevationService object.

Results are returned in the form of an ElevationResult object.  The Elevation Service is asynchronous so you must provide a callback function to process the results that are returned.  There is also an ElevationStatus object that you can query to determine the results of the request before further processing.

In this exercise you will learn how to use the Google Elevation Service to display the elevation profile of a polyline drawn across a map.  In addition to the Google Maps API this exercise also uses the Google Visualization service to handle plotting the elevation profile in a chart.  In addition to charting the elevation profile you’ll also write code to place Markers for each map click and also draw a polyline connecting the Markers.

Step 1: Open the Exercise File

  • The exercise file can be downloaded here.  Save the file to your computer.
  • Open the file in your favorite HTML or text editor.
  • So that you can focus on the sections of code related to the Elevation Service we have already written some of the code for this exercise.  You can view the final result of this exercise here.  Left click each point in the path and then right click to enter the final point.

Step 2: Create a new Instance of the Elevation Service

  • Inside the initialize( ) function I want you to create a new instance of the ElevationService class using the line of code that you see below.

Step 3: Add Event Listeners
For this exercise you’ll need to create two event listeners; one for a map click ( and the other for a right mouse click (Map.rightclick) on the map.  The intent of the event is to create a Marker object each time the user clicks the map and to add the LatLng objects of each click to an array which will later be used as input to the Elevation Service.  The Map.rightclick event will signal that the user has finished placing points.  In addition to creating the final Marker for the polyline this event handler will create a Polyline from the array of LatLng objects that were created and it will make a call to the ElevationService object to get the elevation along a path.

  • Add the code that you see below to create the event handlers.

The first event listener ( calls the JavaScript function ‘plotPoints()’ while the second (Map.rightclick) calls the ‘plottingComplete()’ function.  We haven’t created either of these functions yet so you won’t see them in your exercise file.

Step 4: Create plotPoints() JavaScript Function
In this step you will write the ‘plotPoints()’ JavaScript function that adds a Marker to the map each time it is clicked.  This function also adds the LatLng of the map click to an array which will be used as input to the ElevationService.

First, create the ‘path’ variable which is the array that will be populated by LatLng objects.

  • Create the plotPoints() function as seen below.

Here we use the ‘push’ method which is a JavaScript array method.  This places each LatLng into the ‘path’ array.  Next, we create a new Marker at the LatLng position.

Step 5: Creating the plottingComplete() Function
The ‘plottingComplete()’ function is triggered when the user right clicks the map display.  Just as with the ‘plotPoints()’ function this function will also create a Marker where the map was clicked and push the LatLng object into the ‘path’ array.  In addition, this function also create a Polyline connecting the Markers, creates the elevation service request, and calls the ElevationService.getElevationAlongPath() method.

  • Create the function, push the LatLng coordinate into the array, and create the Marker.
  • Create the Polyline.  A Polyline object in Google Maps accepts a PolylineOptions object in its constructor.  This PolylineOptions object is used to define the path of the Polyline, the line color, transparency, and the map with which it is associated.  Notice that the ‘path’ parameter is set to our ‘path’ variable.
  • Create the request that will be submitted to the ElevationService.  The request has two parameters: path and samples.  The ‘path’ parameter defines the path for which the elevation profile should be generated and the ‘samples’ parameter indicates the number of sample points that should be taken.
  • Finally, call the ElevationService.getElevationAlongPath() method as seen below.  The request object (pathRequest) and a callback function (plotElevation) are passed as parameters to the method.

    Step 6: Examine the ElevationService Return
    The second parameter passed into the ElevationService.getElevationAlongPath() method (plotElevation) is the callback function that will process the results returned by the Elevation Service.  The results are contained within an ElevationResult object.  Since we’re determining the elevation along a path there will be multiple ElevationResult objects each of which contain elevation and location objects.  We are interested in populating our Google Visualization Chart with the elevation for each point.  The ‘plotElevations’ chart has already been written for you but it is helpful to examine this code to understand what is being accomplished.

    If the ElevationStatus returned a message of ‘OK’ then we assign the ElevationResults to the ‘elevations’ variable.  We then create a DataTable from the Visualization library that will serve as the data source for the chart.  Inside this DataTable we add rows corresponding to the sample locations and elevations for each location.  Notice in the highlighted line of code that we are pulling out the ‘elevation’ property from the ElevationResult.  Finally, we draw the Google Visualization chart using the DataTable.

Step 7: View the Results

  • Save your work and open in a web browser.  Click anywhere on the map to deifne the first point.  Add additional points.  To add the final point in our elevation path you can right click the map display.  That will trigger the creation of the polyline and the Elevation profile as seen below.

    Want to learn more about programming the Google Maps API?  The first session of our instructor guided, web based course, Introduction to Programming the Google Maps API begins June 20th and runs through July 1st.  Course cost is $249.00.  The first 10 students receive a free pass to our follow-up course Advanced Google Maps API Programming which runs from July 11th-July 22nd.  Both courses are taught by Eric Pimpler, Qualified Google Maps API Developer.

Read Full Post | Make a Comment ( None so far )

Introduction to Programming the Google Maps API (v3)

Posted on May 19, 2011. Filed under: GeoSpatial Training Services, Google Fusion Tables, Google Maps |

GeoSpatial Training Services is pleased to announce the release of our newest instructor guided, Internet based course, Introduction to Programming the Google Maps API.  This is for version 3 of the API.

The first session of this course runs from June 20th – July 1st

This course will be taught by Eric Pimpler, Qualified Google Maps Developer.

The first 10 students to register will receive free entry to our follow-up course, Advanced Google Maps API Programming which runs from July 11th – July 22nd.

This is our entry level programming course for the Google Maps API (version 3), and is designed to enable you to build Google Maps applications for the web.  We will cover a lot of ground in this course.  By the end of our time together you will understand all the basic concepts you need to create dynamic web mapping applications with the Google Maps API.  We’ll start with some basic information about programming the Maps API and then we’ll dive into the longest section of our course: Basic Concepts of the Google Maps API.  In this module you’ll learn how to add and remove map controls for panning, zooming, setting map types, overview map, and the scale bar.  You’ll then learn how to add your own data to the map display using markers, polylines, and polygons.  One of the more creative functions provided with the Google Maps API is the ability to drape images across the map.  For instance, you might want to display wildlife habitats on top of Google Maps.  This is done through the use of Ground Overlays.  Ground Overlays allow you to drape historical map images and specific purpose maps on top of a Google  base map.  Building on this concept you will then learn how to add KML, GeoRSS, and FusionTables layers on top of the map.  In module 3 you will learn how to handle events.  Events are actions that take place in your application such as map clicks or drags.  Normally they are initiated by the end user but they can also be internally generated events such as the re-setting of the map center.  In module 4 you will learn how to convert addresses into geographic coordinates that can be displayed as Marker locations on the map.  You’ll also learn how to take a point of interest and find the nearest address to the point.  This is known as reverse geocoding.  Finally, we’ll wrap up the course with a module on the Google Elevation Service.  In this module you’ll learn how to obtain elevation data for a point or an elevation profiles for points along a line.

Module 1: Introduction to Programming the Google Maps API
Module 2: Basic Concepts of the Google Maps API
– Adding Controls to the Map (Zoom, Pan, Map Types, Overview Map, Scale Bar, Street View)
–  Creating Overlays (Markers, Polylines, Polygons)
–  Display Images with Ground Overlays
–  Creating Layers (KML, GeoRSS, FusionTables)
Module 3: Handling Events
Module 4: Geocoding with the Google Maps API
– Geocoding
– Reverse Geocoding
Module 5: The Google Elevation Service

Course Exercises
Create Your First Google Map
Working with Map Options
Adding and Removing Map Controls
Adding Markers to the Map
Creating and Displaying Info Windows
Adding Ground Overlays to the Map
Display KML Files on the Map
Adding Fusion Tables to the Map
Responding to Map and Marker Events
Geocoding Addresses
Using Reverse Geocoding to Find an Address for a Location
Obtaining Elevation for Points and Paths

Register Now: $249
Add to Cart

Read Full Post | Make a Comment ( None so far )

Adding a Fusion Table to Google Maps

Posted on May 19, 2011. Filed under: Google Fusion Tables, Google Maps, Uncategorized |

Google Fusion Tables, still in the experimental stages of development, is a Google product that allows you to upload and share data in multiple tables.  These tables can be joined together to create derived tables and provide a way of visualizing and sharing data.  With the Fusion Tables API you can upload, query, download, and sync your datasets.  The Google Maps API provides a new FusionTablesLayer object that connects to these Fusion Tables and can automatically render the location data in a Fusion Table as well as display additional information about each feature through a clickable overlay.

 In this exercise you will learn how to display the Geo-tagged Wikipedia Articles Fusion Table in Google Maps. 

Step 1: Open the Exercise File

Step 2: Fusion Tables Basics

  • Note: Before continuing with this exercise you will want to make sure that you have a Google account which is necessary to access Fusion Tables.
  • Login to Fusion Tables
  • Once you’ve logged into Fusion Tables use the Search text box to enter the words “Geo-tagged Wikipedia”
  • This should return a relatively short list of available tables as seen in the figure below.  Your results may vary though.
  • Select the table that I’ve highlighted in the figure above.  There should be roughly 424,000 records in this table. 
  • When this table is open you will notice a ‘Location’ field that contains the latitude, longitude coordinates for each record.  This field needs to be present in a Fusion Table for it to be capable of being viewed in Google Maps. 
  • You can view the contents of this table in a Google Map by selecting Visualize –> Map.

    You can also use the Google Maps API to programmatically add a Fusion Table to your application.  In the next step you’ll learn how to do this.  However, before doing so you will need to obtain unique identifier for the table.
  • Select File –> About from the Fusion Table interface.  This will display a dialog box containing information about the table as seen in the figure below.  Please note the ID that I have highlighted below.  You will use this ID when programmatically adding this Fusion Table to a Google Map.

Step 3: Adding a Fusion Table with the Google Maps API
The FusionTablesLayer class in the Google Maps API is used to add Fusion Tables to your custom Google Maps applications.  The constructor for this object takes a FusionTablesLayerOptions object which can contain properties such as map, query, heatmap, styles, and others.  In this step we’ll focus on using the ‘query’ property to define the Fusion Table to add to the map.

  • Add the following code block and then we’ll discuss.

    The ‘query’ property of the FusionTablesLayerOptions object is essentially a SQL query.  The ‘select’ statement queries the ‘location’ field from table ‘423292’ which as you’ll remember from the previous step is the unique id for the Geo-tagged Wikipedia Fusion Table. 
  • Save your work and open in a web browser to display the data from the Fusion Table.
    You can also add a ‘where’ clause to your query to filter the results.  This particular Fusion Table doesn’t include additional fields that you can use to filter the results, but you can imagine that if there were a field named ‘Country’ you could restrict the results through the addition of a ‘where’ clause that might look something like this:

Step 4: Fusion Tables Heatmaps
Fusion Tables also provide limited support for heat maps, where the density of matched locations is depicted using a palette of colors. Current heatmaps use a red (dense) to green (sparse) gradient to indicate the relative prevalence of associated locations. You enable a heatmap by setting the layer’s FusionTablesLayerOptionsheatmap’ parameter to ‘enabled: true’.

  • Add the following code block to your exercise file to enable the heatmap for the Wikipedia Fusion Table.
  • Save your work and open in a web browser to display the data as a heatmap.  Pretty cool!

 Want to learn more about programming the Google Maps API?  The first session of our instructor guided, web based course, Introduction to Programming the Google Maps API begins June 20th and runs through July 1st.  Course cost is $249.00.  The first 10 students receive a free pass to our follow-up course Advanced Google Maps API Programming which runs from July 11th-July 22nd.  Both courses are taught by Eric Pimpler, Qualified Google Maps API Developer.

Read Full Post | Make a Comment ( None so far )

Open Source GIS Bootcamp Registration!

Posted on May 16, 2011. Filed under: GeoServer, GeoSpatial Training Services, Open Source GIS, OpenLayers, PostGIS |

 Have you ever wanted to learn how to use open source GIS software to develop web based GIS applications? Here is your opportunity! The first session of our Open Source GIS Bootcamp begins July 18th and runs through August 22nd.

This is an instructor guided, web based course. It is self-paced so there is no particular time when you have to be available during the course session. You have access to the course materials for a year so you can review as necessary or finish up the materials if you run beyond the 4 week session.

The course uses PostGIS, GeoServer, and OpenLayers. See our website  for more details.

You can view the syllabus here:

Our early enrollment period lasts through May 31st. Course fees through that date are $567. The regular course price is $715. Course fees include bound hard copies of the lecture notes which are mailed to you.

Register Now ($567)
Add to Cart

Read Full Post | Make a Comment ( 1 so far )

GIS Programming 101 for ArcGIS 10 at King County GIS Center in Seattle

Posted on May 2, 2011. Filed under: Uncategorized |

GeoSpatial Training Services will be teaching an instructor led version of our GIS Programming 101 for ArcGIS 10: Mastering Python course at the King County GIS Center in Seattle, WA on May 23rd – May 25th.

This course is designed to teach the fundamental programming constructs of the Python language and how it can be integrated with ArcGIS Desktop to automate geoprocessing tasks.  Course participants will be led through a series of 13 modules described below.

Module 1: Getting Started with Python in ArcGIS
Module 2: Basic Python Language Features
Module 3: Introduction to ArcPy
Module 4: Environment Settings
Module 5: Accessing Geoprocessing Tools and Functions
Module 6: Tool Results, Messaging, and Error Handling
Module 7: Using the ArcPy Mapping Automation Module
Module 8: Creating Lists of GIS Data
Module 9: Getting Descriptive Information about GIS Data
Module 10: Using Cursors to Select, Edit, and Add Records to Tables and Feature Classes
Module 11: Miscellaneous ArcPy Classes
Module 12: Licensing and Extensions
Module 13: Geoprocessing History

Course fee: $1,350
Add to Cart

Read Full Post | Make a Comment ( None so far )

6th Anniversary Sale on GIS E-Learning Courses! Save 15%

Posted on May 2, 2011. Filed under: Uncategorized |

It’s time again for our annual anniversary sale!  During the month of May you can save 15% on all training courses as we celebrate our 6th year in business!

Simply enter the code ‘anniversary‘ when you checkout online or write the code on the registration form that you can email or fax back to us.

Please see our website for details.

Upcoming Schedule of Instructor Guided Courses on the Web

Read Full Post | Make a Comment ( None so far )

Liked it here?
Why not try sites on the blogroll...