Using JavaScript framework to create a mapping app

kunalshah · ‎02-10-2012

Hi All,
I wanted to create a web mapping application using ArcGIS JavaScript framework. I have created my own ArcGIS service using SQL Server to list the data points. Now, I want that when the user clicks on these points, the data should be populated in a small pop up window like demonstrated in JavaScript framework. How can I customize it use it with SQL server?

kunalshah · ‎02-26-2012

Awesome! Thank you so much.. this forum rocks 🙂

kunalshah · ‎02-27-2012

Kunal,

The issue is that your feature layer is not being added to the map. You need to add the layer id to the following lines of code:

        var featureLayer = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/layers",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });

Try this instead:

        var featureLayer = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/3",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });

This will add the layer Export_Output to your app as a feature layer.

Check out the fiddle here.

Hope this helps.

Is there a way that I can add all the four feature layers to the map as what happens now is, as we are just adding layer 3, when we click on other data points, it just says No Information Available. I tried to add other layers 0,1,2 using

var featureLayer = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/2",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });
        
        map.addLayer(featureLayer);

with different variable names etc. But it is not helping the cause!

kunalshah · ‎02-28-2012

You can see the result here:
http://geoapps.rc.rit.edu/eInvertebrates/map2.html

kunalshah · ‎03-04-2012

Someone please help me to solve this problem..

EdSaunders · ‎03-04-2012

Kunal, sorry, been busy. You need to add the other layers as feature layers as well. The code below adds them all in order:

var featureLayer0 = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/0",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });
        
        map.addLayer(featureLayer0);

var featureLayer1 = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/1",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });
        
        map.addLayer(featureLayer1);

var featureLayer2 = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/2",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });
        
        map.addLayer(featureLayer2);

var featureLayer3 = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/3",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });
        
        map.addLayer(featureLayer3);

Now, when you click on each point it will show a popup. If there are coincident points, the API will choose the point that sits on the top and show the information for that. If you just want to show information for anywhere a user clicks then you should use a query task. This does not rely on feature layers.

Let me know how you go.

kunalshah · ‎03-06-2012

It is still giving the same result. I have added the four layers to the map, but only few points gives the proper information. Rest of them says "No information available". You can see the result here.
http://geoapps.rc.rit.edu/eInvertebrates/map2.html

[HTML]<!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, IE=9" />
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Popup</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/esri/dijit/css/Popup.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      .esriScalebar{
        padding: 20px 20px;
      }
      #map{
        padding:0;
      }
      .esriPopup.myTheme .titlePane,
      .dj_ie7 .esriPopup.myTheme .titlePane .title {
        background-color: #899752;
        color: #333333;
        font-weight: bold;
      }
      .esriPopup.myTheme .titlePane {
        border-bottom: 1px solid #121310;
      }
      .esriPopup.myTheme a {
        color: #d6e68a;
      }
      .esriPopup.myTheme .titleButton,
      .esriPopup.myTheme .pointer,
      .esriPopup.myTheme .outerPointer,
      .esriPopup.myTheme .esriViewPopup .gallery .mediaHandle,
      .esriPopup.myTheme .esriViewPopup .gallery .mediaIcon {
          background-image: url(../images/popup.png);
      }
      .esriPopup.myTheme .contentPane,
      .esriPopup.myTheme .actionsPane {
        border-color: 1px solid #121310;
        background-color: #424242;
        color:#ffffff;
     }

    </style>
    <script type="text/javascript">var dojoConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7"></script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Popup");
      dojo.require("esri.layers.FeatureLayer");

      var map;

      function pageReady() {
        var popup = new esri.dijit.Popup({
          fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))
        }, dojo.create("div"));


        var initExtent = new esri.geometry.Extent({"xmin":-10006637,"ymin":2050020,"xmax":-10000728,"ymax":4051042,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{
          extent:initExtent,
          infoWindow:popup,
          outFields: ["*"]
        });

        dojo.addClass(map.infoWindow.domNode, "myTheme");

        dojo.connect(map,"onClick",function(evt){
          var query = new esri.tasks.Query();
          query.geometry = pointToExtent(map,evt.mapPoint,10);

          var deferred = featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW);

           map.infoWindow.setFeatures([deferred]);
           map.infoWindow.show(evt.mapPoint);

        });

        //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);

        var incidentLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer");
        map.addLayer(incidentLayer);


        var template = new esri.InfoTemplate();
template.setTitle("<b>${StationKey}</b>");
        template.setContent(getTextContent);

        var featureLayer = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/0",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });

        map.addLayer(featureLayer);

var featureLayer0 = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/1",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });

        map.addLayer(featureLayer0);

var featureLayer1 = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/2",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });

        map.addLayer(featureLayer1);

var featureLayer2 = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/3",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });

        map.addLayer(featureLayer2);

        dojo.connect(map, 'onLoad', function(theMap) {
         //resize the map when the browser resizes
         dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
      }

     function getTextContent(graphic) {
        var attr = graphic.attributes.StationID;

        return "<br>Station ID: " + attr + "<br>Latitude: " + graphic.attributes.Latitude   + "<br/>Longitude: " + graphic.attributes.Longitude + "<br/>Location: " + graphic.attributes.County + graphic.attributes.State ;

      }
      function formatDate(value){
        var inputDate = new Date(value);
        return dojo.date.locale.format(inputDate, {
          selector: 'date',
          datePattern: 'MMMM d, y'
        });
      }

     function pointToExtent(map, point, toleranceInPixel) {
       var pixelWidth = map.extent.getWidth() / map.width;
       var toleraceInMapCoords = toleranceInPixel * pixelWidth;
       return new esri.geometry.Extent( point.x - toleraceInMapCoords,
                    point.y - toleraceInMapCoords,
                    point.x + toleraceInMapCoords,
                    point.y + toleraceInMapCoords,
                    map.spatialReference );
      }

      dojo.addOnLoad(pageReady);
    </script>
</head>

<body class="claro">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width: 100%; height: 100%; margin: 0;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="border:1px solid #000;padding:0;">
     </div>
    </div>
</body>

</html>[/HTML]

EdSaunders · ‎03-07-2012

Yeah I forgot you were using a selectquery. Personally I would use an identify task. Check out this fiddle.

kunalshah · ‎03-07-2012

Yeah I forgot you were using a selectquery. Personally I would use an identify task. Check out this fiddle.

Thanks a lot that worked! 🙂

kunalshah · ‎03-27-2012

Can you please tell me one last thing as to how to display a legend for my service. I read about the legends in the ArcGIS JavaScript Samples but I am unable to see any legend info when I use the code.

1. I added dojo.require("esri.dijit.Legend");
2. I use this

//create a legend
         var layerInfo = dojo.map(layers, function(layer,index){
          return {layer:layer.layerObject,title:layer.title};
        });
        if(layerInfo.length > 0){
          var legendDijit = new esri.dijit.Legend({
            map:map,
            layerInfos:layerInfo
          },"legend");

          legendDijit.startup();
        }

3. Use these divs to display the legend:

[HTML]<div id="paneHeader" class="roundedCorners">
          Legend
        </div>
        <div style="padding:10px;" id="legend"></div>[/HTML]