Embed map code into website

DeianMoore · ‎01-11-2011

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">
    
    <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>

KellyHutchins · ‎01-11-2011

ArcGIS.com makes it easy to build a map to embed in an existing web site, here's a link to a help topic with instructions:
http://help.arcgis.com/en/arcgisonline/help/index.html#//010q00000046000000.htm

DeianMoore · ‎01-11-2011

Hi Kelly,
Thanks... I'm not sure this is the same thing. I'm creating my map inside my own website, and currently have my webmap saved under my website directory. It wasn't built in ArcGIS.com. I've taken the snippet code from the Javascript API resource center to make the simple map. Do I need to re-create my map through ArcGIS.com instead, get the code, and then insert it?

KellyHutchins · ‎01-12-2011

No you don't have to use ArcGIS.com, its just a really easy way to build a map that you plan on embedding into an existing web page.

DeianMoore · ‎01-12-2011

I would like to stick with building the webmapping components in javascript, locally, and not an ArcGIS.com template. I need the ability to customize my maps which is why I'd like to learn how to take these maps and embed them into our existing website. From the code I pasted in my earliest post, are you able to help me take out the necessary code and paste this into a frame, or div, so the map funcitons inside my website? I also need to know how to set up the frame or div in my website, so it will funciton. Thanks!

timgogl · ‎01-13-2011

im not sure i understand what you're asking....

take all the javascript you have in the posted example... the code you supplied.

put a <div id='map'></div> anywhere on your existing web page.... that div, with the javascript should give you an embedded map on your web page.

DeianMoore · ‎01-17-2011

Specifically, if you take all the code I pasted into my original forum question, and put it into a div tag, located in an existing webpage, you get errors. Because the website is already formatted, linking to it's own css, etc., and has head information and body information, I am unabe to take the entire chunk of code and paste it into a div tag. I'm able to get the map to display if I paste all the "script" coding in the head section of the document. But, then the scale bar doesn't display properly, and my info windows don't pop up when clicked. If anyone knows which section/s of code to paste into the div tag, and which section of code to place in the head and body of my existing website code, that would be very helpful to know. Thanks in advance!

MartenLiebster · ‎01-17-2011

Specifically, if you take all the code I pasted into my original forum question, and put it into a div tag, located in an existing webpage, you get errors. Because the website is already formatted, linking to it's own css, etc., and has head information and body information, I am unabe to take the entire chunk of code and paste it into a div tag. I'm able to get the map to display if I paste all the "script" coding in the head section of the document. But, then the scale bar doesn't display properly, and my info windows don't pop up when clicked. If anyone knows which section/s of code to paste into the div tag, and which section of code to place in the head and body of my existing website code, that would be very helpful to know. Thanks in advance!

Just take the code you pasted, save it to a file on your webserver as a .html (or .htm) file. Have you tried that?

The only part that "needs" to be in a div is the one for your map. Here is the code:

<div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
</div>

The only links you need to ArcGIS.com is for the mapping javascript.

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1">
</script>

If you want to style it yourself, then build your own CSS and use that instead of the CSS that ESRI provides. (looks like your link for the css is not closed)

AxelSchaefer · ‎01-18-2011

It's easy to do and documented here: http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/intro_firstmap.htm (ArcGIS JavaScript API Help: Getting started: Create an application using the ArcGIS API for JavaScript).

You only need to follow this path to get a simple integration.

You can simply integrate that parts into an existing webpage. But you don't need to copy the whole example (like: http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/map_topo.html) into an existing web-page. Grab only the parts that you need.

Take a look into the Concepts part of the JS-API documentation. The whole documentation is worth reading.

HTH
Axel

DeianMoore · ‎01-18-2011

Just take the code you pasted, save it to a file on your webserver as a .html (or .htm) file. Have you tried that?

Yes, I have the webmap saved as a stand-alone htm file, and it runs fine. Are you suggesting that I can just link to this uploaded map file (or make a reference to this file) from within my div tag, so it will insert this map into my existing website? That would be nifty! I guess that is somewhat like inserting a google map into a div tag... you create the map, get the reference, and insert the reference into the tag.

The only part that "needs" to be in a div is the one for your map. Here is the code:
<div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
</div>
Thanks for this code.

The only links you need to ArcGIS.com is for the mapping javascript.
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1">
</script>
Does this code just get inserted into my HEAD section of my main website?

If you want to style it yourself, then build your own CSS and use that instead of the CSS that ESRI provides. (looks like your link for the css is not closed)

Thanks for the code checking!