Community

Newbie need help- please!

813
4
05-10-2012 10:59 AM
maryandrews
by
New Contributor III
‎05-10-2012 10:59 AM
I have two of the samples working great!  One that customizes the popup and the other that has a nice layout with legend. 
I can't for the life of me seem to combine them to make one great website.

I think the problem has to do with the first one uses a feature map service and the second a dynamic map service?

When I combine the code I get no map. 

Any help would be greatly appreciated! 

The are both from ESRI samples
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/layout_MapCont...

and
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm

Below is the code I'm using.  I get no map, no legend and no pop-up.


<!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 http-equiv="X-UA-Compatible" content="IE=7" />
    <!--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>
    </title>
     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/esri/dijit/css/Popup.css"/>
     <style type="text/css">
      html, body {
        height: 100%; width: 100%; margin: 0;
      }
      body{
        background-color:white; overflow:hidden;
        font-family: "Trebuchet MS";
      }
      #header {
        background-image: url(images/banner.jpg); background-repeat: repeat-x;
        margin: 2px;
        border: solid 4px #224a54;
        color:white; font-size:18pt;
        text-align:left; font-weight:bold; height:66px;
      }
      #subheader {
        font-size:20pt;
        color:white;
        padding-left:2px;
      }
      #rightPane{
        background-color:white;
        color:#3f3f3f;
        border: solid 2px #224a54;
        width:20%;
      }
      #leftPane{
        margin: 1px;
        padding:2px;
        background-color:white;
        color:#3f3f3f;
        border: solid 2px #224a54;
        width:20%;
     }
      #map {
        margin: 5px;
        border:solid 4px #224a54;
        -moz-border-radius: 1px;
      }
      #footer {
        margin: 2px;
        border: solid 2px #224a54;
        background-color:#ecefe4;color:#3f3f3f;
       font-size:10pt; text-align:center; height:20px;
      }
      .dijitTabInnerDiv{
        background-color:#ecefe4;
      }
      #tabs{
        padding:5px;
      }
    </style>
    <script type="text/javascript">
      var djConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8">
    </script>
    <script type="text/javascript">
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("dijit.layout.TabContainer");
      dojo.require("esri.dijit.Legend");
   dojo.require("esri.dijit.InfoWindow");
   dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.dijit.Popup");
     
      var map;
      function init() {
   esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
        var initialExtent = new esri.geometry.Extent({"xmin":-13440283.392,"ymin":4195625.999,"xmax":-13424995.986,"ymax":4207091.553,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", {
          extent: initialExtent
        });
   //define custom popup options
        var popupOptions = {
          'markerSymbol': new esri.symbol.SimpleMarkerSymbol('circle', 32, null, new dojo.Color([0, 0, 0, 0.25])),
          'marginLeft': '20',
          'marginTop': '20'
        };
   //create a popup to replace the map's info window
        var popup = new esri.dijit.Popup(popupOptions, dojo.create("div"));
       
        map = new esri.Map("map", {
          extent: initExtent,
          infoWindow: popup
        });
        dojo.connect(map, 'onLoad', function(map) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
        var basemapUrl = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";
        var dynamicUrl = "http://mapserver/ArcGIS/rest/services/online/CIP/MapServer";
     
       
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl);
        var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer(dynamicUrl);
      
        //define a popup template
        var popupTemplate = new esri.dijit.PopupTemplate({
          title: "CIP Project Info",
          fieldInfos: [
          {fieldName: "JOBNAME", visible: true, label:"ID"},
          {fieldName: "DESC", visible:true, label:"Description"},
    {fieldName: "START", visible:true, label:"Start Date" ,format:{dateFormat:'shortDateShortTime'}}
          ],
          showAttachments:true
        });
   //create a feature layer based on the feature collection
        var featureLayer = new esri.layers.FeatureLayer("http://mapserver/ArcGIS/rest/services/online/CIP/MapServer/0", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          infoTemplate: popupTemplate,
          outFields: ['JOBNAME',"DESC","START",'TYPE']
        });
        featureLayer.setDefinitionExpression("TYPE != ''");
       
        dojo.connect(featureLayer,"onClick",function(evt){
           map.infoWindow.setFeatures([evt.graphic]);
        });
        dojo.connect(map,'onLayersAddResult',function(results){
         //add the legend
          var legend = new esri.dijit.Legend({
            map:map,
            layerInfos:[{layer:dynamicLayer,title:"Measure Y Hard at Work"}],
            arrangement:esri.dijit.Legend.ALIGN_RIGHT
          },"legendDiv");
          legend.startup();
        });
       
        map.addLayer(basemap);
        map.addLayers([dynamicLayer]);
  map.addLayer(featureLayer);
      }


      //show map on load
      dojo.addOnLoad(init);
    </script>
  </head>
 
  <body class="claro">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline"
    gutters="false" style="width:100%; height:100%;">
      <div id="header" dojotype="dijit.layout.ContentPane" region="top">
        City of San Luis Obispo
       <div id="subheader">Capital Improvement Projects</div>
      </div>
      <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left">
        <div dojotype="dijit.layout.TabContainer" >
          <div dojotype="dijit.layout.ContentPane" title = "Legend" selected="true">
            <div id="legendDiv"></div>
          </div>
         
        </div>
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region="center">
      </div>
      <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" >
        <b>Measure Y Hard at Work!</b> A significant number of improvement projects are made possible by the 1/2 Cent tax approved by city voters in 2006.  <a href="http://www.slocity.org/publicworks/construction/measurey.asp" target="_blank">Visit our Measure Y page</a>
      </div>
    </div>
  </body>

</html>
0 Kudos
4 Replies
JMcNeil
by
Occasional Contributor III
‎05-10-2012 03:20 PM
My I would like to help but I'm having a little trouble because there is a lot going on.

First this example link generic - http://help.arcgis.com/en/webapi/jav...ples_start.htm
2. You should wrap your code with the code tool or like so it is easier to read
3. Your url is not public http://mapserver/ArcGIS/rest/services/online/CIP/MapServer so that could be a problem.
4. If your url is internal it is kind of strange to have "online" after services and before your mapserver name "CIP" - I would check this address and the feature layer address
5. in the line of code  map.addLayers([dynamicLayer]); - I would try to drop the []

Jay
0 Kudos
derekswingley1
by
Frequent Contributor
‎05-10-2012 03:57 PM
The first thing to do is only create your map once. In other words, take out this code:

map = new esri.Map("map", {
extent: initExtent,
infoWindow: popup
});


Also, which layers do you want to show up in your legend? Please be specific.
0 Kudos
derekswingley1
by
Frequent Contributor
‎05-10-2012 03:58 PM

5. in the line of code  map.addLayers([dynamicLayer]); - I would try to drop the []
Jay


The brackets are necessary�?? addLayers takes an array of layers as the argument.
0 Kudos
maryandrews
by
New Contributor III
‎05-11-2012 07:21 AM
Thank you both so much for your suggestions. 

Derek-  I took the code out as suggested. 

map = new esri.Map("map", {
extent: initExtent,
infoWindow: popup
});



The map and legend are now showing up!!!  We are moving in the right direction!

However the pop-ups are not working. Any ideas?

Jay-
My service is not yet public, it's on a development server but I'll move it when I have everything working.  Thanks for the tip about wrapping code!  Sorry about the link, it's just the popup up example in the widgets area on the JavaScript samples area.


I have also tried another approach, which I'll post in separately.  I can get the legend to work or the pop-up but not both 😞
0 Kudos