openlayers/examples/mapguide.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>OpenLayers MapGuide Layer Example</title>
   4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5     <link rel="stylesheet" href="style.css" type="text/css" />
   6     <style type="text/css">
   7         #map {
   8             width: 400px;
   9             height: 400px;
  10             border: 1px solid black;
  11             float:left;
  12         }
  13         #map2 {
  14             width: 400px;
  15             height: 400px;
  16             border: 1px solid black;
  17             float:left;
  18         }
  19     </style>
  20     <script src="../lib/OpenLayers.js"></script>
  21     <script type="text/javascript">
  22
  23         var map, layer;
  24         var url = "http://data.mapguide.com/mapguide/mapagent/mapagent.fcgi?USERNAME=Anonymous&";
  25         //you can use this URL when MapGuide OS is installed locally
  26         //var url = "/mapguide/mapagent/mapagent.fcgi?USERNAME=Anonymous&";
  27
  28         //Adjust the scale assumptions for MapGuide layers
  29         //Tiled layers MUST use a DPI value of 96, untiled layers can use a
  30         //different DPI value which will be passed to the server as a parameter.
  31         //Tiled and untiled layers must adjust the OL INCHES_PER_UNIT values
  32         //for any degree-based projections.
  33         var metersPerUnit = 111319.4908;  //value returned from mapguide
  34         var inPerUnit = OpenLayers.INCHES_PER_UNIT.m * metersPerUnit;
  35         OpenLayers.INCHES_PER_UNIT["dd"] = inPerUnit;
  36         OpenLayers.INCHES_PER_UNIT["degrees"] = inPerUnit;
  37         OpenLayers.DOTS_PER_INCH = 96;
  38
  39         //tiled version
  40         function initTiled(){
  41
  42             var extent = new OpenLayers.Bounds(-87.764987,43.691398,-87.695522,43.797520);
  43             var tempScales = [100000,51794.74679,26826.95795,13894.95494,7196.85673,3727.59372,1930.69773,1000];
  44             var mapOptions = {
  45                 maxExtent: extent,
  46                 scales: tempScales
  47             };
  48             map = new OpenLayers.Map( 'map', mapOptions );
  49
  50             var params = {
  51               mapdefinition: 'Library://Samples/Sheboygan/MapsTiled/Sheboygan.MapDefinition',
  52               basemaplayergroupname: "Base Layer Group"
  53             }
  54             var options = {
  55               singleTile: false
  56             }
  57             var layer = new OpenLayers.Layer.MapGuide( "MapGuide OS tiled layer", url, params, options );
  58             map.addLayer(layer);
  59
  60             /**
  61             The following example shows how to access an MG tile cache directly
  62             through HTTP bypassing the MG mapagent.  This depends on having a
  63             pre-populated tile cache
  64             */
  65             /*
  66             options.useHttpTile = true;
  67             var cacheUrl = "http://localhost:8008/sheboygan";
  68             var httpLayer = new OpenLayers.Layer.MapGuide( "MapGuide HTTP cache tiled layer", cacheUrl, params, options );
  69             map.addLayer(httpLayer);
  70             */
  71
  72             map.zoomToMaxExtent();
  73         }
  74
  75         //un-tiled version
  76         function initUntiled() {
  77
  78           var extent = new OpenLayers.Bounds(-87.865114442365922,43.665065564837931,-87.595394059497067,43.823852564430069);
  79           var mapOptions = {
  80                 maxExtent: extent,
  81                 maxResolution: 'auto'
  82           };
  83           map = new OpenLayers.Map( 'map2', mapOptions );
  84
  85           var options = {
  86               isBaseLayer: true,
  87               buffer: 1,
  88               useOverlay: false,
  89               useAsyncOverlay: false,
  90               singleTile: true
  91           };
  92
  93           var params = {
  94               mapdefinition: 'Library://Samples/Sheboygan/Maps/Sheboygan.MapDefinition'
  95           };
  96           /*
  97           The MapGuide layer can also be created using mapname and session as follows provided there
  98           is some wrapper code to obtain a valid session id and mapname */
  99           /*
 100           var params = {
 101               mapname: 'Sheboygan49ad9e20e7171',
 102               session: '7405c17a-0000-1000-8000-0017a4e6ff5d_en_7F0000010AFC0AFB0AFA'
 103           };
 104           */
 105
 106           var layer = new OpenLayers.Layer.MapGuide( "MapGuide OS untiled baselayer", url, params, options );
 107           map.addLayer(layer);
 108
 109           //this is how to set up the layer for transparent overlays.  Requires a valid session ID
 110           //and mapName stored in that session.
 111           /*
 112             var options = {
 113               isBaseLayer: false,
 114               useOverlay: true,
 115               useAsyncOverlay: false,
 116               buffer: 1,
 117               singleTile: true
 118             };
 119             var params = {
 120               mapName: 'Sheboygan49aeaa04487af',
 121               session: '208fd92c-0000-1000-8000-0017a4e6ff5d_en_7F0000010AFC0AFB0AFA',
 122               selectioncolor: '0xFF000000',
 123               behavior: 7
 124             };
 125             layer = new OpenLayers.Layer.MapGuide( "MapGuide OS Overlay layer", url, params, options );
 126             map.addLayer(layer);
 127             */
 128             map.addControl(new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')}));
 129             map.zoomToMaxExtent();
 130     }
 131     </script>
 132   </head>
 133   <body onload="initUntiled(); initTiled()">
 134     <h1 id="title">MapGuide Layer Example</h1>
 135
 136     <div id="tags">
 137     </div>
 138
 139     <p id="shortdesc">
 140         Demonstrates how to create MapGuide tiled and untiled layers.
 141     </p>
 142
 143     <p>If prompted for a password, username is Anonymous and an empty password</p>
 144
 145     <div id="map" class="smallmap"></div>
 146     <div id="map2">
 147       <div id="layerswitcher"></div>
 148     </div>
 149   </body>
 150 </html>