JavaScript example

Page Last modified 04 Nov 2011
2 min read
This sample displays a map from DiscoMap server. The map is cached, meaning it has a set of pre-rendered tiles that the server administrator has built to aid performance. For this reason the map is represented by ArcGISTiledMapServiceLayer.

If the map service does not have a cache available, use ArcGISDynamicMapServiceLayer. If you don't know whether a service has a cache available, you can use the Services Directory to find out. Notice EEA naming convention. When the map-service contains _Cach_ it means that this service has a tiling schema. _Dyna_ means that the service produces images on the fly. Most of the time both are available. It's obvious that a tiled service will perform better then a dynamic service.

To find more about ESRI API's go to http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm

The ESRI API's can be used freely when your website is not a commercial site.

Live example

Source code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>ArcGIS JavaScript API: Air/EPRTRDiffuseAir_Dyna_WGS84</title>
  <link href='/ArcGIS/rest/ESRI.ArcGIS.Rest.css' rel='stylesheet' type='text/css'>
<style type="text/css">
  @import "http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/tundra/tundra.css";
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      .tundra .dijitSplitContainer-dijitContentPane, .tundra .dijitBorderContainer-dijitContentPane#navtable { 
        PADDING-BOTTOM: 5px; MARGIN: 0px 0px 3px; PADDING-TOP: 0px; BORDER-BOTTOM: #000 1px solid; BORDER-TOP: #000 1px solid; BACKGROUND-COLOR: #E5EFF7;
      }
      .tundra .dijitSplitContainer-dijitContentPane, .tundra .dijitBorderContainer-dijitContentPane#map {
        overflow:hidden; border:solid 1px black; padding: 0;
      }
      #breadcrumbs {
        PADDING-RIGHT: 0px; PADDING-LEFT: 11px; FONT-SIZE: 0.8em; FONT-WEIGHT: bold; PADDING-BOTTOM: 5px; MARGIN: 0px 0px 3px; PADDING-TOP: 0px;
      }
      #help {
        PADDING-RIGHT: 11px; PADDING-LEFT: 0px; FONT-SIZE: 0.70em; PADDING-BOTTOM: 5px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; 
</style>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis?v=2.0"></script>
<script type="text/javascript">
  dojo.require("esri.map");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("dijit.layout.BorderContainer");
  var map;
  function Init() {
    dojo.style(dojo.byId("map"), { width: dojo.contentBox("map").w + "px", height: (esri.documentBox.h - dojo.contentBox("navTable").h - 40) + "px" });
    map = new esri.Map("map");
    var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://discomap.eea.europa.eu/ArcGIS/rest/services/Air/EPRTRDiffuseAir_Dyna_WGS84/MapServer");
    map.addLayer(layer);
var resizeTimer;
                            dojo.connect(map, 'onLoad', function(theMap) {
                              dojo.connect(dijit.byId('map'), 'resize', function() {
                                clearTimeout(resizeTimer);
                                resizeTimer = setTimeout(function() {
                                  map.resize();
                                  map.reposition();
                                 }, 500);
                               });
                             });
  }
  dojo.addOnLoad(Init);
</script>
</head>
<body class="tundra">
<table style="width:100%">
<tr>
<td>
<table id="navTable" width="100%">
<tbody>
<tr valign="top">
<td id="breadcrumbs">
ArcGIS JavaScript API: Air/EPRTRDiffuseAir_Dyna_WGS84
</td>
<td align="right" id="help">
Built using the  <a href="http://resources.esri.com/arcgisserver/apis/javascript/arcgis">ArcGIS JavaScript API</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<div id="map" style="margin:auto;width:97%;border:1px solid #000;"></div>
</body>
</html>
Example was created by Bilbomatica.
Document Actions
Help us build a better climate and energy portal

We are looking at ways to keep you informed about the most important data and developments about climate and energy in the EU.

Help us by taking this survey!

Subscriptions
Sign up to receive our reports (print and/or electronic) and quarterly e-newsletter.
Follow us
 
 
 
 
 
European Environment Agency (EEA)
Kongens Nytorv 6
1050 Copenhagen K
Denmark
Phone: +45 3336 7100