GoogleMercator Projection

There are a large number of services for backgrounds for your web-based maps. These are constructed as "pyramids" of "tiles" that you have seen in GoogleMaps and OpenStreetMap. These tiles are in a custom projectiion that I refer to as "GoogleMercator". To be compatible with tile layers from OpenStreetMap and other vectors, we need to be using the exact spatial reference that was created with GoogleMaps. This is not a great projection for maps but there are many tile sets out there and we'll be using them in future tutorials (some of them are really cool). For this reason, you'll need to project your data into the GoogleMaps projection. BlueSpray supports this with a custom projection engine and I don't know of another GIS application that does.

First, start with one of the tutorials that already uses GoogleMercator (or "WebMercator") as the projection for the map. Then, project your own data to GoogleMercator to add to your map.

Projecting Data Sets to GoogleMercator

For this tutorial, convert several vector layers to GoogleMercator and add them to the resizable map example.

To convert a layer to GoogleMercator in BlueSpray:

• Obtain a shapefile (or other supported format) with polygons or linestrings (polylines) in the spatial reference WGS84, Geographic.
• Load the file into BlueSpray
• Right-click on the "Scene" and select "Transforms -> Change SRS".
• Click on "Explore"
• Select "GoogleMaps" from the "Projector" menu
• Uncheck all the options under "Clipping "Settings"
• Click "Update".
• Click "OK"
• Click "OK" and your data should be projected to the GoogleMaps projection.
• Right click on the layer and select "Export to File..."
• Save the file with a ".js" extension. This will save it as a GeoJSON formatted file.
• Move the file to where your web page can access it.

Projecting Coordinates to GoogleMaps Projection

If we are going to have the coordinate display be in latitude and longitude, we need to provide CanvasMap with a projection engine or "Projector" to convert from GoogleMercator projection back to Geographic.

The code below will add the "GoogleMaps" projector which matches the GoogleMaps projection and the OpenTileFormat. This will allow you to show coordinates in degrees with a map that is in the GoogleMaps projection. It's not cricital where this code is inserted in the "OnLoad()" function.

var TheProjector=new CMProjectorWebMercator();

TheMainContainer.SetProjector(TheProjector);