How to add Infowindow for non FeatureLayer

AndrewSmith9 · ‎01-12-2012

I have created a simple Dynamic map layer and adding custom graphics by looping through Jason with custom infotemplate.

I want to show popup or infowindow with custom info when user clicks on a custom graphics. How to achieve this, I have tried several ways but not able to make it work.

My latest code looks like this and it doesn't work. I can see all my custom graphics but nothing is happening when I click on a graphics.

<script type="text/javascript">
      var djConfig = {
          parseOnLoad: true
      };
    </script>
<script type="text/javascript">
    dojo.require("esri.map");
    dojo.require("esri.layers.agstiled");
    dojo.require("esri.toolbars.draw");
    dojo.require("esri.SnappingManager");
    dojo.require("esri.toolbars.edit");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.Menu");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.require("esri.dijit.InfoWindowLite");

    dojo.addOnLoad(init);

    var map, tb;

    function init() {


        map = new esri.Map("map");

        dojo.connect(map, "onLoad", initToolbar);

        map.infoWindow.resize(200, 75);

        map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("****/ArcGIS/rest/services/Continents/MapServer"));

        var infoTemplate = new esri.InfoTemplate();
        infoTemplate.setTitle("${NAME}");
        infoTemplate.setContent("<b>URL Is: </b><a href='https://community.esri.com/test/'>${URL}</a><br/>");

createDynamicGraphicsFromLocation(JasonObj);

    }

    function createDynamicGraphicsFromLocation(JasonObj) {

        var geoValues = JasonObj

        dojo.forEach(geoValues.split('$'), function (pt, i) {
            var symbol;
            var geometryObj;

            if (pt.split('£')[0] == 'point') {

                symbol = tb.markerSymbol;
                geometryObj = new esri.geometry.Point(dojo.fromJson(pt.split('£')[1]));
                var graphic = new esri.Graphic(geometryObj, symbol);
                graphic.setAttributes({ "URL": "URLTest" });
                graphic.setAttributes({ "Name": "TestName" });

                var infoTemplate = new esri.InfoTemplate();
                infoTemplate.setTitle("${NAME}");
                infoTemplate.setContent("<b>URL Is: </b><a href='https://community.esri.com/test/'>${URL}</a><br/>");
                graphic.setInfoTemplate(infoTemplate);
                map.graphics.add(graphic);

            }
});
}

KellyHutchins · ‎01-12-2012

There's a sample in the help that shows how to associate info windows with graphics that might help:

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/map_topo_graph...

Do you see any errors in the debug console (Firebug or Chrome Developer Tools) when you run your application and click the graphic to display the info window?

I have created a simple Dynamic map layer and adding custom graphics by looping through Jason with custom infotemplate.

I want to show popup or infowindow with custom info when user clicks on a custom graphics. How to achieve this, I have tried several ways but not able to make it work.

My latest code looks like this and it doesn't work. I can see all my custom graphics but nothing is happening when I click on a graphics.

<script type="text/javascript">
      var djConfig = {
          parseOnLoad: true
      };
    </script>
<script type="text/javascript">
    dojo.require("esri.map");
    dojo.require("esri.layers.agstiled");
    dojo.require("esri.toolbars.draw");
    dojo.require("esri.SnappingManager");
    dojo.require("esri.toolbars.edit");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.Menu");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.require("esri.dijit.InfoWindowLite");

    dojo.addOnLoad(init);

    var map, tb;

    function init() {


        map = new esri.Map("map");

        dojo.connect(map, "onLoad", initToolbar);

        map.infoWindow.resize(200, 75);

        map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("****/ArcGIS/rest/services/Continents/MapServer"));

        var infoTemplate = new esri.InfoTemplate();
        infoTemplate.setTitle("${NAME}");

infoTemplate.setContent("<b>URL Is: </b><a href='https://community.esri.com/test/'>${URL}</a><br/>");
createDynamicGraphicsFromLocation(JasonObj);

    }

    function createDynamicGraphicsFromLocation(JasonObj) {

        var geoValues = JasonObj

        dojo.forEach(geoValues.split('$'), function (pt, i) {
            var symbol;
            var geometryObj;

            if (pt.split('£')[0] == 'point') {

                symbol = tb.markerSymbol;
                geometryObj = new esri.geometry.Point(dojo.fromJson(pt.split('£')[1]));
                var graphic = new esri.Graphic(geometryObj, symbol);
                graphic.setAttributes({ "URL": "URLTest" });
                graphic.setAttributes({ "Name": "TestName" });

                var infoTemplate = new esri.InfoTemplate();
                infoTemplate.setTitle("${NAME}");
                infoTemplate.setContent("<b>URL Is: </b><a href='https://community.esri.com/test/'>${URL}</a><br/>");
                graphic.setInfoTemplate(infoTemplate);
                map.graphics.add(graphic);

            }
});
}

KellyHutchins · ‎01-12-2012

Also when you assign attributes to your graphics you are calling setAttributes multiple times which will overwrite the attributes each time so the graphic will only contain the last set of attributes. You can assign multiple attribute values using setAttributes, see below:


        park1.setAttributes({"Name":"Prospect Park","Facilities":"Yes","Water":"Yes","Phone":"No"});