Company Blog

SCIENCE - TECHNOLOGY - SOLUTIONS

GISA 2014: Making Maps with JavaScript

Presentation delivered this afternoon at the GISA conference by John Sercel of SICS. 



Google Maps API
 
 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
   html, body, #map-canvas { height: 100%; margin: 0; padding: 0 } 
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
   function initialize() {
       var map = new google.maps.Map(document.getElementById("map-canvas"), {
           mapTypeId: google.maps.MapTypeId.ROADMAP,
           center: new google.maps.LatLng(30.272184, -87.691470),
           zoom: 16
       });
   }
</script>
</head>
<body onload="initialize()">
   <div id="map-canvas"></div>
</body>
</html>
OpenLayers API 
 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
   html, body, #map-canvas { height: 100%; margin: 0; padding: 0 } 
</style>
<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css" type="text/css" />
<script src="http://ol3js.org/en/master/build/ol.js" type="text/javascript"></script>
<script type="text/javascript">
   function initialize(){
       var map = new ol.Map({
           target: 'map-canvas',
           layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
           view: new ol.View2D({
               center: ol.proj.transform([-87.691470, 30.272184], 'EPSG:4326', 'EPSG:3857'),
               zoom: 16
           })
       });
   }
</script>
</head>
<body onload="initialize()">
   <div id="map-canvas"></div>
</body>
</html>
ArcGIS API 
 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
   html, body, #map-canvas { height: 100%; margin: 0; padding: 0 } 
</style>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.9/"></script>
<script>
   require(["esri/map", "dojo/domReady!"], function(Map) {
       var map = new Map("map-canvas", {
           basemap: "streets",
           center: [-87.691470, 30.272184],
           zoom: 16
       });
   });
</script>
</head>
<body>
   <div id="map-canvas"></div>
</body>
</html>

Google Maps Engine: Python Basics - Part 2

A few weeks ago I posted regarding the basics of terminology and authentication for Google Maps Engine (GME) via the Python API.  In this post we will cover the installation of the API, including verification of dependencies.  This is one lesson that I learned the hard way, so hopefully I can make it a little easier on you.

To begin let's look at the API architecture and try to understand the core dependencies.  This will help us out in debugging our installation and use.  The PyDoc documentation of the API is a good place to start (http://google-api-python-client.googlecode.com/hg/docs/epy/frames.html).  As documented in the previous link, here are some of the dependencies to be aware of.

  1. Python 2.7 or higher is suggested
  2. pyOpenSSL is required
    1. Subdependencies include libcffi in order to be able to install Cryptography
  3. pyCrypto is required

Depending on your operating system there are different ways to install the API.  For Linux and Mac, make sure you have a current installation of Setuptools or pip.  Then execute the following;

easy_install --upgrade google-api-python-client

OR

pip install --upgrade google-api-python-client

For Microsoft Windows;
  1. Download the API from here.
  2. Unzip the package to a location where you have rights
  3. Open a command prompt and navigate to the new directory
  4. Execute python setup.py install
To test your installation, open a Python prompt and execute the following;
from oauth2client.client import SignedJwtAssertionCredentials

If this returns an error, you most likely have a problem with your pyOpenSSL configuration.  Go here to start to debug problems with the pyOpenSSL installation.

Otherwise you have successfully installed the API and are now ready to proceed with setup your code.

In part 3, we will cover the actual code and the required elements to interface with GME.

Google Earth Enterprise Server: Exporting a Structured Layers List

In the Virtual Alabama program for the State of Alabama, the majority of users employ the Google Earth Enterprise Desktop Client to connect to and use the Virtual Alabama system. But a number of users required access directly via web browser, either because the desktop client was not locally installed or to enable access to Virtual Alabama at remote locations.

So we wrote a javascript web viewer for Virtual Alabama, using the Google Earth Plug-in, rendering the entire Virtual Alabama data library in a web browser, with no desktop client installation required.

The challenge, then, became how to maintain a duplicate copy of the layers database for display in our javascript viewer, for searching, and for integration with layers from other sources. While the geographic data is stored on the enterprise servers and rendered by the plug-in, we needed a copy of the layer tree's structure to import into our databases to create a tree menu in the javascript viewer similar to what is displayed in Google Earth, allowing users to find layers and turn layers on and off. A further complication is that this duplicate layers structure had to be updated frequently, whenever new data was published or reorganized within the Virtual Alabama system.

The key was in files named dbroot.v5.postamble.DEFAULT on the enterprise servers, newly created with each database publish. 

This is an example of one row from one of those files:

<etNestedLayer> [More Imagery]
	{
		118 	"0b14797e-a3b3-11e2-9e11-b8ff64cb455c" 	"More Imagery" 	"" 	true 	true 	true 	false 	true 	"All Layers" 	24 	"icons/More_Imagery.png" 	"" 	"" 	"" 	"" 	true 	"" 	"" 	"" 	"" 	"" 	"" 	-1 	-1 
	}

Contained within is a list of all published layers, including the layer name, in this example, More Imagery, the Google Earth ID, just before the name, which is used to enable the layer via javascript and the plug-in, the parent layer name, to determine where the layer belongs in the tree's hierarchy, in this example, just below All Layers, and the path to the layer's icon. This provided all the information we need for our system to build a complete layer tree.

Next, we created a service to automatically retrieve this file as need, process the data to create a list of layers, organize them hierarchically, associate appropriate icons, enable layer searching and integration, and update our web-based javascript Google Earth client to reflect new or updated layers.

Now, with the press of a button, our Desktop and Web clients are automatically in sync with the current state of the Virtual Alabama Google Earth Enterprise Servers.

Google Maps Engine: Python Basics - Part 1

In case you haven't heard of it, Google has been working on a project for a little over a year or so call Google Maps Engine (GME).  GME is a really powerful cloud-based mapping system that is maturing at a really nice pace.  One of the nice features about it is its accessibility via multiple API's.  One of those API's is Python.  There are some pretty good tutorials (https://developers.google.com/maps-engine/documentation/tutorial) and documentation including an API reference with some examples (https://developers.google.com/maps-engine/documentation/reference/v1/).

However, one thing that is a little lacking is documentation on how the OAuth2 authentication protocol is leveraged in Python.  I have to admit that I struggled some here until I was aided by my friend at Google, Sean Wohltman.  So Sean, much thanks for all your help and guidance.

Before we begin, there is one thing that you must understand to make sure we are consistent in our references, that is the terminology (https://developers.google.com/maps-engine/documentation/definitions).



So with this as the foundation of the discussion, we can loosely refer to these as the accessible objects through the API.

The approach to for the purposes of this article are relatively simple.  We will authenticate and then we will retrieve a collection of each of the objects.  This will demonstrate the core functionality that we have through the Python API.

To start the process of authentication, let's first refer to some of the basics in documentation.



Now that we have a basic understanding of the OAuth2 protocol, you can get the API downloaded and installed.  The Google APIs Client Library for Python is located at (https://code.google.com/p/google-api-python-client/downloads/list).

In Part 2 of this series we will cover the set up and use of the API in Python.

Safe Schools: Indoor Google StreetView

With the Virtual Alabama School Safety Systems (VAS3), there are multiple projects going simultaneously.  One of these projects is the "Indoor Google StreetView" project.  This project includes the creation of "walk throughs" of rooms and hallways through the building.

The process begins with the collection of photos using a very specific device.  This camera system allows for the remote triggering via wifi and download of captured photographs to a user's cell phone or tablet.  The transferred files are automatically stitched together to produce a high quality panoramic image.  Here is a sample of the raw output from our camera system.


Source Image Post Stitching

The next step include the mapping of the positions of where each set of images were captured.  This is done using a mapping interface designed and developed by my team we call the Floor Plan Annotation Tool (FPAT).


Floor Plan Annotation Tool (FPAT)

In the FPAT we are able to actually generate the tiles needed for ingestion into Google StreetView using the "360 View Manager" module by selecting the panoramic image and queue it for tiling.  The tiled Google StreetView dataset is then associated to each point on the map, therefore completing the process.

The following is an example of a final product from the process.