Spatial Reference Systems and OpenStreetMap Tiles

As the size and complexity of your data increases, your maps will begin to slow down. The solution for this is to load the map as "tiles". The tiles are arranged in "steps" from a few top tiles which represent the entire area of the layer at low resolution to a bottom step that can include thousands of tiles representing the highest resolution for the data.

Projecting Data Sets to GoogleMercator

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.

Convert several vector layers to GoogleMercator and add them to the resizable map.

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.

Open Pyramids

Many publically available data sets use the OpenFormat that is compatible with OpenStreetMap. If you check the "resizable" map code, you'll see that a number of layers are added from publically available data sets. You can also add them to the "Layers" tab as the code below does:

	var Layer_World=new CMLayerPyramidOpenFormat();
	Layer_World.SetName("Stamen");
	
	TheCanvasMap.AddLayer(Layer_World);
	
	Layer_World.SetURL("http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.png",TheView);

There are a large number of these layers available and a large list is available at the Leafleft web site. There is some variety in the format of the URL for these data sets but CanvasMap should support all of them. You will need to replace "{s}" with a server identifiier, typically a letter (e.g. "a","b", "c").

Projecting Coordinates to GoogleMaps Projection

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.

var TheProjector=new CMProjectorGoogleMaps();
TheProjector.SetZoomLevel(18);
TheCanvasMap.SetProjector(TheProjector);