Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I'm trying to display an AttributeInspector when I click on an object from a layer. I'm following this sample, but I cannot get it to work.

Here is my sample code:

dojo.require("esri.map");
dojo.require("esri.dijit.Scalebar");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.dijit.AttributeInspector-all");

var map;
var earthquakes, earthquakesFeatureLayer;
var visible;
var updateFeature;

function init() {
    esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";

    var initExtent = new esri.geometry.Extent({
        "xmin":-1089520.5238523486,
        "ymin":4205238.517449941,
        "xmax":5392339.474728875,
        "ymax":7037689.037584678,
        "spatialReference": {
            "wkid":102100
        }
    });
    map = new esri.Map("map", { extent: initExtent });

    dojo.connect(map, "onLayersAddResult", initSelectToolbar);

    // National Geographic World Map
    var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer");
    map.addLayer(basemap);

   // set the image parameters to toggle layer visibility
    var imageParameters = new esri.layers.ImageParameters();
    imageParameters.layerIds = [1];
    imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;

    // Earthquakes From Last Seven Days
    earthquakes = new esri.layers.ArcGISDynamicMapServiceLayer(
            "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer",
            {"imageParameters": imageParameters});
    earthquakes.setDisableClientCaching(true);
    map.addLayer(earthquakes);

    earthquakesFeatureLayer = new esri.layers.FeatureLayer(
            "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer/0",
            {
                mode: esri.layers.FeatureLayer.MODE_SELECTION,
                            outFields: ["objectid", "datetime", "depth", "magnitude", "region"]
            });
    var selectionSymbol = new esri.symbol.SimpleFillSymbol(); 
    earthquakesFeatureLayer.setSelectionSymbol(selectionSymbol);

    dojo.connect(earthquakesFeatureLayer, "onEditsComplete", function() {
        earthquakes.refresh();
    });

    map.addLayer(earthquakesFeatureLayer);

    // add a scalebar to the map
    dojo.connect(map, 'onLoad', function(map) {
        var scalebar = new esri.dijit.Scalebar({
            map: map,
            scalebarUnit: 'english'
        });
    });
}

function initSelectToolbar(results) {
    var earthquakesFL = results[2].layer;
    var selectQuery = new esri.tasks.Query();
    console.log(results[2].success);

    dojo.connect(map, "onClick", function(evt) {
        selectQuery.geometry = evt.mapPoint;
        earthquakesFL.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW, function(features) {
            if (features.length > 0) {
                //store the current feature
                updateFeature = features[0];
                map.infoWindow.setTitle(features[0].getLayer().name);
                map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
            } else {
                map.infoWindow.hide();
            }
        });
    });

    dojo.connect(map.infoWindow, "onHide", function() {
        earthquakesFL.clearSelection();
    });

    var layerInfos = [{'featureLayer': earthquakesFL,
        'showAttachments':false,
        'isEditable': true,
        'fieldInfos': [
        {'fieldName': 'datetime', 'isEditable':true, 'label':'Earthquake Date:'},
        {'fieldName': 'depth', 'isEditable':true, 'label':'Depth:'},
        {'fieldName': 'magnitude', 'isEditable':false,'label':'Magnitude:'},
        {'fieldName': 'region', 'isEditable':false, 'label':'Region:'}
        ]}];

        var attInspector = new esri.dijit.AttributeInspector({
            layerInfos: layerInfos
        },
        dojo.create("div")
        );

        //add a save button next to the delete button
    var saveButton = new dijit.form.Button({label: "Save", "class": "saveButton"});
    dojo.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");

    dojo.connect(saveButton, "onClick", function() {
        updateFeature.getLayer().applyEdits(null, [updateFeature], null);
    });

    dojo.connect(attInspector, "onAttributeChange", function(feature, fieldName, newFieldValue) {
        //store the updates to apply when the save button is clicked 
        updateFeature.attributes[fieldName] = newFieldValue;
    });    

    dojo.connect(attInspector,"onNext", function(feature) {
        updateFeature = feature;
        console.log("Next " + updateFeature.attributes.objectid);
    });

    dojo.connect(attInspector, "onDelete", function(feature) {
        feature.getLayer().applyEdits(null, null, [feature]);
        map.infoWindow.hide();
    });

    map.infoWindow.setContent(attInspector.domNode);
    map.infoWindow.resize(325,210);
}

function updateLayerVisibility() {
    var inputs = dojo.query(".layer");
    visible = [];
    var inputsCount = inputs.length;
    for (var i = 0; i < inputsCount; i++) {
        if (inputs[i].checked) {
            visible.push(inputs[i].id);
        }
    }

    if (visible.length === 0) {
        visible.push(-1);
    }

    earthquakes.setVisibleLayers(visible);
}

dojo.addOnLoad(init);

The sample says I have to use a proxy to implement the example, but I'm not sure how to do it. Is it just a proxy issue that is getting in my way? Do you see any other problems in my code?

EDIT:

And here is the HTML:

<html>
  <head>
    <script type="text/javascript">var dojoConfig = {parseOnLoad: true};</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7" type="text/javascript"></script>
    <link href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" text="text/css">
    <link href="styles.css" rel="stylesheet" text="text/css">
    <script src="sample.js" type="text/javascript"></script>
    <title>ArcGIS Project</title>
  </head>

  <body>
    <p>The following project is a HTML/JavaScript-based application, which uses the ESRI ArcGIS API for JavaScript v2.7</p>
    Layers List: 
    <span id="layers">
      <input type="checkbox" class="layer" id="0" value="0" onclick="updateLayerVisibility();"/> Earthquakes
    </span>
    <div id="map"></div>
  </body>

EDIT: It seems that the onLayersAddResult event never fires, therefor the initSelectToolbar function never gets called. Why is this happening? What am I doing wrong?

share|improve this question
add comment

1 Answer

it seems that you are using "map.addLayer(earthquakesFeatureLayer);" not the map.addLayers method.

Note that the you are listening to the onLayersAddResult this is only fired when the map.addLayers method is called not map.addLayer.

hope this helps

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.