Embed GIS Cloud Projects Into Google Maps (Custom Raster and Vector Map Overlay)

In the last GIS Cloud update we implemented a feature that enables embedding GIS Cloud projects into Google Maps. This feature provides an easy way to publish your own geospatial content with Google Maps API. There is support for Google Maps Javascript and Flash APIs. This is an easy and simple way to upload and style map data that can be used in your Google Maps API with few simple lines of code. So you can enrich Google Maps with your own data in an effortless way.

In the Google Maps Javascript API it is possible to render GIS Cloud raster map tiles and in the Google Maps Flash API it is possible to render both raster and vector map tiles. GIS Cloud Mapping Engine is unique because it can produce vector map tiles. In case of Adobe Flash those tiles are in SWF vector format. Vector rendering engine is much faster than raster based. According to our benchmarks, it is faster around 3 times.

For the purpose of this tutorial we have created simple map in GIS Cloud that is made of US Census data and that displays population growth trends.

GIS Cloud on Google Maps Javascript API


 

 

GIS Cloud on Google Maps Flash API (Vector Tiles – SWF)


 

 

GIS Cloud Vector Mapping Engine Javascript API


 

 

In this tutorial we will cover following steps:

  • upload data to GIS Cloud
  • style it
  • publish it on Google Maps

Upload data to GIS Cloud

For the purpose of this tutorial we will overlay part of US Census data and render it according to parameters like population trends etc. We got this data in ESRI Shapefile format. We can upload it through GIS Cloud file manager.

 

After the data is uploaded to GIS Cloud we can add it in our map.

2

Stying

Bellow the map we can see some of the attributes that are associated with every object on the map. We will now make a simple coloring that will compare population growth trend from 2000 to 2003. We will color regions in green if there is population growth and in red if there is decline. This can be easily done by configuring layer properties:

 

3

Now the map looks like this:

4

We can see how polygons have been colored according to expressions that we entered in the layer properties.

Publishing

Now we will publish this map on Google Maps. To make an easy embed we can use Publish wizards in GIS Cloud.

5

Embed with GIS Cloud Javascript API


6

Embed with Google Maps Javascript API

 

7

Embed with Google Maps Flash API