MapForums

Adding VETileLayer

We have seen in the previous parts how we can add not only simple point-geographies but also polygons and lines to Virtual Earth. We did that using GeoRSS-feeds and we added some spatial-functions for further analysis. All these data were vector data, i.e. we had to consider individual points or arrays of points and the more points we have the more work is to do for the Virtual Earth MapControl. One of the tables in our database – the table TopographicLine - which contains LINESTRING-geographies for just a small area of 9 square-kilometers has already more than 200,000 objects with a total of almost 730,000 points. That is clearly too much to make up a good user experience in Virtual Earth.

However we have seen before that we can create a tile layer to overlay various type of image data on Virtual Earth. We have learned about the MapCruncher which is available for free download and which allows us to manually geo-reference images and cut them into pyramid-levels and each of the pyramid levels into tile-mosaics. The MapCruncher however requires always an image, i.e. raster data as input. In our example we have a table in SQL Server 2008 which holds our vector data.

Safe FME, the spatial ETL-tool which we heard about before as well, can assist us here to either create an image which we will later process with the MapCruncher or - in the latest beta version of FME 2008 – it can also cut the tiles directly for us. Below you see the workflow in the Safe FME Workbench:

• Retrieve the data from a SQL Server 2008 data source
• Use the Transformer “PenColorSetter” to define the colour for our geographies
• Use the Transformer “Rasterizer” to create raster data from vector data and set the “Background Value” to “0” to make sure that the background is transparent so that only our LINESTRING-objects are visible.
• Use the RasterCheckPointer for performance enhancements
• Use the Transformer “VirtualEarthTiler” to create the Virtual Tiles from the raster. You can define the minimum and maximum zoom-level you want to create as well.
• Use the PNG Image Writer to create the destination data as images of type PNG. Make sure you select _quadkey as Fanout-attribute so that the tiles will have the same name as the original Virtual Earth tiles since the name will be used to determine the geographic area which is covered by the tile.

Once we start the process FME will create the tile set. In our example this will be more than 4,600 square PNG-images with a side-length of 256 pixels. Now we copy the tiles into a virtual directory on your web server and start coding.

To add a tile layer to Virtual Earth we can use a method AddTileLayer. This method has one mandatory parameter which is the VETileSourceSpecification. The specification contains the name of the layer as well as the URL to the virtual directory on our web server in which we hold our tiles. Furthermore it contains a bounding rectangle which determines the region for which Virtual Earth should retrieve tiles. It also contains a minimum and maximum zoom-level at which we want to display the tile layer as well as a z-index and a percentage value for the opacity of this layer. The z-index is important if we add more than one tile layer and need to determine which one is on top. The opacity allows us to create a translucency effect so that we can see the Virtual Earth images or roads underneath our custom tile layer.

var bounds = [new VELatLongRectangle(new VELatLong(maxlat, maxlon),new VELatLong(minlat, minlon))];
 var tileSourceSpec = new VETileSourceSpecification(layer, url);

tileSourceSpec.Bounds = bounds;

tileSourceSpec.MinZoomLevel = minlvl;

tileSourceSpec.MaxZoomLevel = maxlvl;

tileSourceSpec.Opacity = opac;

tileSourceSpec.ZIndex = zindex;

map.AddTileLayer(tileSourceSpec);

To implement the function we want to keep it as generic as possible so that we can re-use it for different tile layers and only need to change the parameters when we call it. We use exactly the same syntax as mentioned above.

//Tile Layer
 function AddTileLayer(control, layer, maxlat, maxlon, minlat, minlon, url, minlvl, maxlvl, opac, zindex)

{
 if (document.getElementById(control).checked == false) {

        map.DeleteTileLayer(layer);

    }
 else {
 var bounds = [new VELatLongRectangle(new VELatLong(maxlat, maxlon),new VELatLong(minlat, minlon))];
 var tileSourceSpec = new VETileSourceSpecification(layer, url);

        tileSourceSpec.Bounds = bounds;

        tileSourceSpec.MinZoomLevel = minlvl;

        tileSourceSpec.MaxZoomLevel = maxlvl;

        tileSourceSpec.Opacity = opac;

        tileSourceSpec.ZIndex = zindex;

        map.AddTileLayer(tileSourceSpec);

    }

}

In the ASP.NET-part of the application we create a new accordion pane which hosts another HTML-element of type checkbox. Attached to the checkbox is an onclick-event which calls the above mentioned JavaScript-function with the necessary parameters.

<cc1:AccordionPane ID="paneTileLayer" runat="server">
 <Header>Tile LayerHeader>
 <Content>
 <input id="cbTopoLine" type="checkbox" onclick="AddTileLayer('cbTopoLine',
                                                                     'TopoLine',
                                                                     50.3927985499651,
                                                                     -4.160889782716,5
                                                                     0.3666136326637,
                                                                     -4.11751365661918,
                                                                     './Tiles/FME/%4.png',
                                                                     13,19,0.5,100)" />
 <a href='javascript:ShowLocation(50.38, -4.14, 15);'>OS MasterMap Topographic Line (13-19)a><br />
 Content>
 cc1:AccordionPane>

That’s it let’s see the result:

(to be continued)