JavaScript example

Page Last modified 18 Jul 2023

2 min read

This page was archived on 18 Jul 2023 with reason: Content is outdated

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.

Code and APIs for developers

Menu

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.