openlayers/examples/arcims-thematic.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>ArcIMS Thematic 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     <script src="../lib/OpenLayers.js"></script>
   7     <script type="text/javascript">
   8         var lon = 0;
   9         var lat = 0;
  10         var zoom = 1;
  11         var map, layer;
  12         var query, renderer;
  13
  14         function init() {
  15             OpenLayers.ProxyHost = "proxy.cgi?url=";
  16
  17             map = new OpenLayers.Map('map');
  18
  19             query = {where: "FIPS_ID>100 AND FIPS_ID<200"};
  20
  21             renderer = {
  22                 type: 'valuemap',
  23                 lookupfield: 'FIPS_ID',
  24                 ranges: [
  25                     { lower: 100, upper: 120, symbol: { type: 'simplepolygon', fillcolor: '255,0,0' } },
  26                     { lower: 120, upper: 140, symbol: { type: 'simplepolygon', fillcolor: '255,255,0' } },
  27                     { lower: 140, upper: 160, symbol: { type: 'simplepolygon', fillcolor: '0,255,0' } },
  28                     { lower: 160, upper: 180, symbol: { type: 'simplepolygon', fillcolor: '0,255,255' } },
  29                     { lower: 180, upper: 200, symbol: { type: 'simplepolygon', fillcolor: '0,0,255' } }
  30                 ]
  31             };
  32
  33             var options = {
  34                 layers: [{
  35                     id: "1",
  36                     visible: true,
  37                     query: query,
  38                     renderer: renderer
  39                 }],
  40                 serviceName: "OpenLayers_Sample",
  41                 singleTile: true,
  42                 async: true
  43             };
  44
  45             layer = new OpenLayers.Layer.ArcIMS(
  46                 "Global Sample Map",
  47                 "http://sample.avencia.com/servlet/com.esri.esrimap.Esrimap",
  48                 options
  49             );
  50             map.addLayer(layer);
  51
  52             map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
  53             map.addControl(new OpenLayers.Control.LayerSwitcher());
  54         }
  55     </script>
  56   </head>
  57   <body onload="init()">
  58     <h1 id="title">ArcIMS Thematic Example</h1>
  59
  60     <div id="tags">
  61     </div>
  62     <p id="shortdesc">
  63         Shows the advanced use of OpenLayers using a thematic ArcIMS layer
  64     </p>
  65
  66     <div id="map" class="smallmap"></div>
  67
  68     <div id="docs">
  69         <p>This is an example of how to add an ArcIMS layer to an OpenLayers map.</p>
  70
  71         <p>Following the ArcXML convention to create a thematic (or chloropleth) map,
  72         a layer definition is created with a query and a renderer to select portions
  73         of the map data, and change their representation in the generated map tiles.</p>
  74     </div>
  75
  76   </body>
  77 </html>