eands

Embed map code into website

Discussion created by eands on Jan 11, 2011
Latest reply on Jan 18, 2011 by eands
I would like to embed a simple api webmap into my website but haven't found how to do this.  I'm not sure which section of the javascript api webmap code I need to insert into my website.  I know I need to place the code into a "div" tag or frame of sorts, but I'm not sure how to set this up.  Can someone help with setting up the additional code for embedding the following map into a website?  Thanks! Here is my basic map code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior
    of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
    <title>
      E&S Environmental Chemistry Watershed Assessments
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      .esriScalebar{padding: 20px 20px; }
      #map{ padding:0; }
    </style>
    <script type="text/javascript">
      var djConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1">
    </script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Scalebar");
      dojo.require("esri.layers.FeatureLayer");
      var map;

      function init() {
        var initExtent = new esri.geometry.Extent({
          "xmin": -14033000,
          "ymin": 5079000,
          "xmax": -12467000,
          "ymax": 5872000,
          "spatialReference": {
            "wkid": 102100
          }
        });
        map = new esri.Map("map", {
          extent: initExtent
        });

        //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service   
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        //add the assessments to the map
        var featureLayer = new esri.layers.FeatureLayer("http://184.73.191.150/ArcGIS/rest/services/WS_Assessment/MapServer/1",  {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });


        dojo.connect(featureLayer, 'onClick', function(evt) {
    var g = evt.graphic
   
          //populate the info window
          map.infoWindow.setTitle(g.attributes.Name);
    map.infoWindow.setContent("</b><br /><a target='_blank' href=http://www.esenvironmental.com/" + (g.attributes.ReportNew1) + ">Download Report</a>");
          map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
        });



        map.infoWindow.resize(200, 100);
        map.addLayer(featureLayer);
        //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in
        //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm
        var resizeTimer;
        dojo.connect(map, 'onLoad', function(theMap) {
          var scalebar = new esri.dijit.Scalebar({
            map: map,
            attachTo: "top-right"
          });
          dojo.connect(dijit.byId('map'), 'resize', function() { //resize the map if the div is resized
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
              map.resize();
              map.reposition();
            }, 500);
          });
        });
      }

      dojo.addOnLoad(init);
    </script>
  </head>
 
  <body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
    style="width: 100%; height: 100%; margin: 0;">
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
      </div>
    </div>
  </body>

</html>

Outcomes