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?

StephenLead · ‎02-10-2012

I don't fully understand what you mean with regards to SQL Server, but assuming that you're able to retrieve the point information (perhaps in JSON format) you could create a Feature Layer, which would allow you to specify the popup using setInfoTemplate. See documentation here.

kunalshah · ‎02-11-2012

I don't fully understand what you mean with regards to SQL Server, but assuming that you're able to retrieve the point information (perhaps in JSON format) you could create a Feature Layer, which would allow you to specify the popup using setInfoTemplate. See documentation here.

Thanks for the reply. I am quite new to ArcGIS. What I meant was, I have created the ArcGIS map service using SQL Server data to plot the data points(X,Y) on the map. (http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer?f=jsapi). The database contains other information as well which I want to display to the user when one clicks on the data point. So, I thought I will use JavaScript Framework to create the mapping app and display information on the popup.

StephenLead · ‎02-12-2012

Hi Kunal,

Thanks for the additional information. The link you sent shows that you have access to ArcGIS Server, so a suggestion is to start with the Feature Layer samples from the Samples page, for example the Popup or On Demand Mode samples, both of which contain examples of popups containing information.

Steve

kunalshah · ‎02-20-2012

Hi Kunal,

Thanks for the additional information. The link you sent shows that you have access to ArcGIS Server, so a suggestion is to start with the Feature Layer samples from the Samples page, for example the Popup or On Demand Mode samples, both of which contain examples of popups containing information.

Steve

I understand that I have to use the feature layers. But my question is how in order to display the required data on the popup, do I need to create a new arcgis service or the current service will work and I just need to write some server side logic so that the API can interact with the database and get the results on the popup.

EdSaunders · ‎02-20-2012

Hi Kunal,

First, define the content of the popup like below:

        var content = "<b>Type</b>: ${ftype}" +
                      "<br /><b>Code</b>: ${fcode}";
        var infoTemplate = new esri.InfoTemplate("Rivers", content);

Then, add the feature layer to your app, defining the infoTemplate you set above:

        var featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/1",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          infoTemplate: infoTemplate
        });

In the example above (from Feature Layer -> On demand samples), all values are available in the output fields of the feature layer but only ftype and fcode will actually display in the pop because they are the only fields set up in the content. You don't need any extra coding.

Hope that helps.

Ed

kunalshah · ‎02-21-2012

Hi Kunal,

First, define the content of the popup like below:
        var content = "Type: ${ftype}" +
                      " Code: ${fcode}";
        var infoTemplate = new esri.InfoTemplate("Rivers", content);
Then, add the feature layer to your app, defining the infoTemplate you set above:
        var featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/1",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          infoTemplate: infoTemplate
        });
In the example above (from Feature Layer -> On demand samples), all values are available in the output fields of the feature layer but only ftype and fcode will actually display in the pop because they are the only fields set up in the content. You don't need any extra coding.

Hope that helps.

Ed

Perfect! This is what I was looking for. When you look at my service http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer, do you think I need to modify this service so that I accomodate all my data in the service itself.

I am asking this because when I created this service, I didn't know how to do it. I created this service using Add XY data in ArcGIS 10, where X and Y are latitude and longitude fields in my table. I don't have anything related to spatial data besides latitude and longitude fields. I have other fields like Genus, Family etc. in my other table which I need to display on the popup. Do you think ArcGIS can display data by using table relationships?

Also, if I need to create a new service to use this idea, how do I do it, if not add xy data? (too many questions )

EdSaunders · ‎02-21-2012

Kunal,

In your map service you have four layers, each with the same schema:

FID (Type: esriFieldTypeOID, Alias: FID)
Shape (Type: esriFieldTypeGeometry, Alias: Shape)
StationKey (Type: esriFieldTypeDouble, Alias: StationKey)
StationID (Type: esriFieldTypeString, Alias: StationID, Length: 50 )
Latitude (Type: esriFieldTypeDouble, Alias: Latitude)
Longitude (Type: esriFieldTypeDouble, Alias: Longitude)
Location (Type: esriFieldTypeString, Alias: Location, Length: 254 )
Location_2 (Type: esriFieldTypeString, Alias: Location_2, Length: 254 )
County (Type: esriFieldTypeString, Alias: County, Length: 254 )
State (Type: esriFieldTypeString, Alias: State, Length: 254 )

If you want to display related information then you need to use the queryRelatedFeatures method on your feature layer. First, set up a relationship between your lat/long feature class and your external table in your service project. Restart the service, refresh the REST cache if necessary. At the REST endpoint you should see values in the 'Relationships' section at the bottom of the page, similar to http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/0. This means the related data can be used by the API.

After that you need to add some code to your app that will find the related records. There's a sample which shows you how to do this here http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/fl_query_relat.... The part that actually queries the related records is here:

      function findRelatedRecords(features) {
        var relatedTopsQuery = new esri.tasks.RelationshipQuery();
        relatedTopsQuery.outFields = ["*"];
        relatedTopsQuery.relationshipId = 3;
        relatedTopsQuery.objectIds = [features[0].attributes.OBJECTID];
        wellFeatureLayer.queryRelatedFeatures(relatedTopsQuery, function(relatedRecords) {
          var fset = relatedRecords[features[0].attributes.OBJECTID];
          var items = dojo.map(fset.features, function(feature) {
            return feature.attributes;
          });
          //Create data object to be used in store
          var data = {
            identifier: "OBJECTID",  //This field needs to have unique values
            label: "OBJECTID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
            items: items
          };
 
          //Create data store and bind to grid.
          store = new dojo.data.ItemFileReadStore({ data:data });
          grid.setStore(store);
          grid.setQuery({ OBJECTID: '*' });
        });
      }

Note the relationshipId in the code above needs to be the same as the id of the relationship in the REST endpoint of your service.

Good luck!

kunalshah · ‎02-26-2012

Kunal,

In your map service you have four layers, each with the same schema:

FID (Type: esriFieldTypeOID, Alias: FID)
Shape (Type: esriFieldTypeGeometry, Alias: Shape)
StationKey (Type: esriFieldTypeDouble, Alias: StationKey)
StationID (Type: esriFieldTypeString, Alias: StationID, Length: 50 )
Latitude (Type: esriFieldTypeDouble, Alias: Latitude)
Longitude (Type: esriFieldTypeDouble, Alias: Longitude)
Location (Type: esriFieldTypeString, Alias: Location, Length: 254 )
Location_2 (Type: esriFieldTypeString, Alias: Location_2, Length: 254 )
County (Type: esriFieldTypeString, Alias: County, Length: 254 )
State (Type: esriFieldTypeString, Alias: State, Length: 254 )

If you want to display related information then you need to use the queryRelatedFeatures method on your feature layer. First, set up a relationship between your lat/long feature class and your external table in your service project. Restart the service, refresh the REST cache if necessary. At the REST endpoint you should see values in the 'Relationships' section at the bottom of the page, similar to http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/0. This means the related data can be used by the API.

After that you need to add some code to your app that will find the related records. There's a sample which shows you how to do this here http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/fl_query_relat.... The part that actually queries the related records is here:
      function findRelatedRecords(features) {
        var relatedTopsQuery = new esri.tasks.RelationshipQuery();
        relatedTopsQuery.outFields = ["*"];
        relatedTopsQuery.relationshipId = 3;
        relatedTopsQuery.objectIds = [features[0].attributes.OBJECTID];
        wellFeatureLayer.queryRelatedFeatures(relatedTopsQuery, function(relatedRecords) {
          var fset = relatedRecords[features[0].attributes.OBJECTID];
          var items = dojo.map(fset.features, function(feature) {
            return feature.attributes;
          });
          //Create data object to be used in store
          var data = {
            identifier: "OBJECTID",  //This field needs to have unique values
            label: "OBJECTID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
            items: items
          };
 
          //Create data store and bind to grid.
          store = new dojo.data.ItemFileReadStore({ data:data });
          grid.setStore(store);
          grid.setQuery({ OBJECTID: '*' });
        });
      }
Note the relationshipId in the code above needs to be the same as the id of the relationship in the REST endpoint of your service.

Good luck!

Please have a look at this html:
http://geoapps.rc.rit.edu/eInvertebrates/map2.html (Please unzoom until you see PA state)

I am trying to use http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/widget_extendi....

here is the code I use to display data:

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/layers",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });
        
        map.addLayer(featureLayer);

    
        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.StationKey;
        
        return  attr + "<br>" + graphic.attributes.Latitude   + "<br/> Planted on " + graphic.attributes.Longitude;
        
      }

I am trying to display the Latitude, Longitude info on the popup. I am not sure what if I am doing it right, the popup just says "No Information available" when clicked anywhere on the map or the data points. Am I using the code right ?

EdSaunders · ‎02-26-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.