Using Virtual Earth with OpenLayers

Subscribe

Magazine

Front Cover
What's New
Articles
News
Sample Data
Gallery
Advertise
About

Features

MapPoint 2013
Press Releases
MapPoint Forums
Companies
Link to MP2Kmag
Wish List
MapPoint Trial
Authors

Earlier Content

Past News Items
Past What's New Announcements

Sponsors

Order

MapPoint 2013

Programming MapPoint in .NET

MapPoint Book

Spatial Community

SVG Tutorials
MapPoint


	ARTICLES

This article by Richard Marsden shows you how to create a Virtual Earth base layer in an OpenLayers application. OpenLayers is an open source Javascript project which receives the layer map data from one or many different sources including WFS, Yahoo, WorldWind, Google, TileCache, TMS, and GML.

This article shows you how to use Virtual Earth with OpenLayers. Our example is based on the maps used by the EcoMap Costa Rica project ( http://www.ecomapcostarica.com ), and will overlay external data on a Virtual Earth base map. Of course Virtual Earth has the ability to display a variety of formats on a base map. However OpenLayers adds many more options. For example, our overlay will be a shapefile that is supplied by MapServer as a series of WMS tiles. OpenLayers also allows us to use different base maps as appropriate. For the EcoMap Costa Rica project, Virtual Earth does an excellent job of visualizing Costa Rica and Central America, but does not currently have the detail required for the main area of study which is less than 1km in extent. By using OpenLayers we can easily re-arrange the layers to meet our specific needs.

OpenLayers is an open source Javascript project that can provide the client side of a web map application. OpenLayers handles the map-keeping operations such as zoom, pan, enable/disable layers, pop-up windows, etc. It receives the layer map data from one or many different sources. Even before we started to use different data sources, we found that OpenLayers's AJAX capabilities greatly enhanced the user experience of a MapServer map application.

The maps at EcoMap Costa Rica use data served by Virtual Earth and MapServer, plus KML files. It is also possible to draw directly in a map using Javascript. We use this feature to draw a grid for field data acquisition. OpenLayers also supports WFS, Yahoo, WorldWind, Google, TileCache, TMS, and GML. Further information, downloads, and examples can be found on the OpenLayers web site at http://www.openlayers.org.

MapServer is an open source environment for 'building spatially-enabled internet applications' - i.e. web sites. It was originally developed by the University of Minnesota, but it is now managed by the Open Source Geospatial Foundation. The MapServer website is at http://mapserver.gis.umn.edu.

MapServer can run on a wide range of different systems. Although the project uses it in a FreeBSD / Apache environment, I have successfully managed to install it on a Windows XP system in order to use some of the offline data tools. MapServer can be controlled in a variety of ways including: as a CGI script that inserts images into web pages; scripted with PHP/Python/PERL; and as a WMS server. We shall be using it as a WMS server.

Installing MapServer is beyond the scope of this article, but I shall show you how to use it as a WMS server. For installation instructions, it is recommended that you read the tutorials on the MapServer website.

Let's start coding! First, download OpenLayers and install it on your web server. The following HTML page assumes that OpenLayers.js is in your local directory, and the other production elements (eg. themes and styles) are in sub-directories. This is slightly non-standard: OpenLayers.js is usually shipped in the build sub-directory.

Here is the HTML. The comments should make it self explanatory.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Sample: Virtual Earth and OpenLayers</title>

<!-- Standard OpenLayers default style -->
    <link rel="stylesheet" href="./theme/default/style.css" type="text/css" />

<!?Style for the HTML map DIV -->
    <style type="text/css">
        #map {
            width: 800px;
            height: 475px;
            border: 1px solid black;
        }
    </style>

<!-- Virtual Earth. Note only v3 and v4 supported as of May 2008 -->
    <script src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js"></script>

<!?OpenLayers. Change the path if necessary. -->
    <script src="./OpenLayers.js"></script>

<!-- Our Javascript implementation -->
    <script type="text/javascript">

// Default start location
        var lon = -84;
        var lat = 10;
        var zoom = 7;

// Map and layer objects
        var map;
        var stream_layer, velayer;


// Initialisation function - this is called when the HTML body initialises
        function init(){

// Create a new OpenLayers map
            map = new OpenLayers.Map( 'map',
                   { controls:[new OpenLayers.Control.MouseDefaults()]} );

// Create the Virtual Earth base layer, and add it to the map
// We set the layer to use aerial photograph, and set the zoom limits.
            velayer = new OpenLayers.Layer.VirtualEarth(
                   "Virtual Earth Base Layer",
                   { minZoomLevel: 4, maxZoomLevel: 8,
                     'type': VEMapStyle.Aerial } );
            map.addLayer(velayer);

// Create the MapServer WMS overlay layer, and add it
// You will need to change the MapServer URL to your own implementation
// stream.map is the name of the MapServer .map (MapScript) file
// 'estreams' is the name of the layer that we wish MapServer to send
// We want the layer to be transparent so that we can see Virtual Earth underneath
// The gutter parameter avoids tile-edge effects from MapServer.
            stream_layer = new OpenLayers.Layer.MapServer( "Synthetic Streams",
                    "http://www.your-domain.com/mapserv.cgi?map=stream.map",
                    {layers: 'streams', transparent:'true', gutter: 15});
            map.addLayer(stream_layer);

// Zoom/pan the map to the required location
            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

// Set the default controls: Zoom, Pan, and Layer selection
            map.addControl( new OpenLayers.Control.LayerSwitcher() );
	    map.addControl( new OpenLayers.Control.PanZoomBar() );

// Initialisation completed
        }

    </script>

  </head>

<!?Here is our HTML body entity. This calls init (above) when it is created.
  <body onload="init()">
<h3>Sample: Virtual Earth and OpenLayers</h3>
    <div id="map"></div>
    <div id="docs">
 
    </div>

  </body>
</html>

A working example can be found at http://www.ecomapcostarica.com/map/map_ve.html.

Virtual Earth supplies the aerial base map. The MapServer-supplied data appears as a cyan river overlay.

Next we need to configure MapServer. It is assumed that you have a compiled and installed MapServer, and have a working mapserv.cgi. This is configured using a MapScript (.MAP) file. These files are used by MapServer to describe the maps that are produced. They define map properties such as data sources, projection, colors, and visibility.

Our data source is a set of 'Synthetic Stream' data for Costa Rica, available from the Inter American Biodiversity Information Network here. This river data is derived from digital elevation (DEM) data, so it indicates the theoretical locations of rivers and creeks. This works well in mountainous and steep areas, but the stream locations tend to be poor in flat plains. You will note that streams are plotted as straight lines across reservoirs and lakes. This data is a standard ESRI shape (SHP) file.

First check that your mapserv.cgi supports WMS. On the command line, type 'mapserv -v' (or './mapserv -v' on a Unix system) to check this. You should see a "SUPPORTS=WMS_SERVER" in the list of supported capabilities. If not, you will need to recompile MapServer.

Here is our MapScript file ('streams.map' in the above example):

# Synthetic Stream example MapScript file
NAME "Stream"
UNITS DD
EXTENT -180.00 0.00 -60.00 90.00
SIZE 640 480
IMAGECOLOR 189 202 222
TRANSPARENT on
IMAGETYPE png
# Change this path to the local SHP data path on your server
SHAPEPATH "/your/shape/directory/"
# We do not use fonts in this example: change this path, if you do
FONTSET "/your/config/directory/fonts/fontset.txt"
# You may need to change this path if you are on a shared system or if proj
# is installed in a non-standard place
CONFIG "PROJ_LIB" "/local/share/proj/"
STATUS ON

#####################################
# Symbol for drawing thick lines
# To draw thick lines, we have to draw the line using a symbol
# We shall use this at high zoom levels
SYMBOL
     NAME "BigLine"
     TYPE ELLIPSE
     POINTS 1 1 END
END

#####################################
# Web object
# This is where we configure MapServer to use WMS
#
WEB
# not used. Should point to a tmp directory on your webserver
     IMAGEPATH "/your/web/directory/tmp/"
# not used ? the URL directory equivalent of IMAGEPATH
     IMAGEURL "/map/tmp/"
# WMS MetaDATA ? important!
     METADATA
# Name of the WMS Server
       "wms_title"     "WMS Demo Server"
# Full URL to this WMS resource
# This is the same URL that is passed to OpenLayers in the above HTML
       "wms_onlineresource" " http://www.your-domain.com/mapserv.cgi?map=stream.map "
# This specifies the project and geoid to use. EPSG:4326 corresponds to WGS-84
# We use WGS-84 throughout these examples. It is handy and Virtual Earth uses it.
# MapServer could re-project the data, if necessary
       "wms_srs"       "EPSG:4326"
     END
END

# This the projection that this map file uses
PROJECTION
  "init=epsg:4326"
END

#####################################
# We have two layers. Both are called 'estreams'f but have limited zoom ranges.
# This is the 'ethin polylines'f version which appears when zoomed out
# Note that the stream data is quite complex, so we hide the streams completely when
# zoomed out too far (greater than 1:400000)
LAYER
     NAME "streams"
# Layer name for WMS
     METADATA
       "wms_title"   "Streams"
     END
# This is our data source. It is a shape file (cr_synth_stream.shp) in the
# shape path that is defined above.
# The data is already in the WGS-84 (EPSG:4326) geoid & projection.
     DATA "cr_synth_stream"
     PROJECTION
        "init=epsg:4326"
     END
     STATUS default
     TYPE line
     LABELCACHE off
# Scale Range
     MAXSCALE 400000
     MINSCALE 25000
# Draw the layer as a blue-cyan line
     CLASS
          STYLE
               SIZE 1
               COLOR 0 192 255
          END
     END
END


#####################################
# This layer is as above, but draws a thick polyline and
# only appears when zoomed in more than 1:25000
LAYER
     NAME "streams"
     METADATA
       "wms_title"   "Streams"
     END
     DATA "cr_synth_stream"
     PROJECTION
        "init=epsg:4326"
     END
     STATUS default
     TYPE line
     LABELCACHE off
# Only define max scale where the 'ethin'f version takes over
     MAXSCALE 25000
# Draw the layer as a thick blue-cyan line using the BigLine symbol (defined above)
     CLASS
          STYLE
               SIZE 2
               COLOR 0 192 255
               SYMBOL "BigLine"
          END
     END
END

# end of this map file
END

That is all that is required. Here are the results:

OpenLayers is easy to use. At the moment the biggest limitation is that it only works with Virtual Earth v3 and v4. A ticket has been filed for support for Virtual Earth v6.1, so there is a good chance that the next version will include support for v6.1 before v4 is retired later this year.

MapServer is also easy to use after it has been installed, but building it can be a challenge on some systems. Luckily there are a lot of how-to articles available on the MapServer website.

Useful Websites and Books

MapServer
http://mapserver.gis.umn.edu

MapServer How-To: WMS Server
http://mapserver.gis.umn.edu/docs/howto/wms_server

OpenLayers
http://www.openlayers.org

Inter American Biodiversity Information Network's Digital Elevation (DEM) derived data files
http://geospatial.iabin.net/index.php?option=com_content&task=view&id=13&Itemid=62

Production Examples of OpenLayers, MapServer and Virtual Earth in use together
http://www.ecomapcostarica.com/map/index.shtml
http://www.ecomapcostarica.com/map/index_ve.shtml

"Beginning MapServer Open Source GIS Development", by Bill Kropla; published by Apress 2005.

Discuss this story in the forum.

Author: Richard Marsden
Email: enquiries(AT)winwaed.com
URL: http://www.winwaed.com
Richard Marsden is the proprietor of Winwaed Software Technology, LLC which provides software consulting and development services, specializing in both MapPoint and online mapping applications. He operates the Mapping-Tools.com Website for MapPoint Tools and Utilities, and recently launched the GeoWeb Guru a community website for developers of the geospatial web. In 2008, Richard was awarded Virtual Earth MVP status by Microsoft.

Prior to Winwaed, Richard worked as a software developer working on seismic processing algorithms for the oil exploration industry. He holds geology and geophysics degrees from the University of Cambridge (Churchill College), and the University of Durham; and an interdisciplinary MBA from the University of Dallas.

Recent Discussion

Resources

Browse GIS books and periodicals
Find a MapPoint Partner or Consultant
Real Estate Thornbrook Subdivision

Want Your Site To Appear Here?

© 1999-2012 MP2K. Questions and comments to: website@mp2kmag.com
Microsoft and MapPoint 2002/2004/2006/2009/2010/2011/2013 are either trademarks or registered trademarks of Microsoft.