conditionally show pop-up onclick but not via infotemplate.

vinayb · ‎08-24-2013

HI All,

I am trying to show pop up conditionally from the sample whatever i have seen they include infoTemplate when creating a feature layer.So when we click on a region it automatically shows the pop-up that we defined in infotemplate.I have few questions here
I want to show a custom pop the data for this pop-up will not come from the rest service i will provide it,So lets say when i click on map i want to show popup on some country or state which i clicked on how do place the pop-up in that area.Please let me know if this is possible , if yes it would be extremely helpful if you could tell me how this could be archived.

I am trying to modify this http://developers.arcgis.com/en/javascript/samples/popup_chart/ example by adding on click event of my own but i dont know who do it below is the code that i modified.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!--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>Popup</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css"/>
    <style>
      html,body,#map{
        padding:0;
        margin:0;
        height:100%;
      }

      .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 src="http://js.arcgis.com/3.6/"></script>
    <script>
      require([
        "esri/map",
        "esri/dijit/Popup",
        "esri/dijit/PopupTemplate",
        "esri/layers/FeatureLayer",
        "dojo/dom-class",
        "dojo/dom-construct",
        "dojo/on",
        "dojox/charting/Chart",
        "dojox/charting/themes/Dollar",
        "dojo/domReady!"
      ], function(
        Map,
        Popup,
        PopupTemplate,
        FeatureLayer,
        domClass,
        domConstruct,
        on,
        Chart,
        theme
      ){

        //The popup is the default info window so you only need to create the popup and 
        //assign it to the map if you want to change default properties. Here we are 
        //noting that the specified title content should display in the header bar
        var popup = Popup({
            titleInBody: false
        },domConstruct.create("div"));

        var map = new Map("map", {
          basemap: "gray",
          center: [-98.57, 39.82],
          zoom: 4
          
        });

        //apply custom theme to popup. The custom popup theme was defined using css
        //to specify new colors, fonts etc for the popup
        //We've also modified the default popup image used for the popup pointers to 
        //match the new color scheme. 
        domClass.add(map.infoWindow.domNode, "myTheme");        

        //define the popup content using a popup template
        //a custom chart theme (dollar) is specified. Note that you'll have to load 
        //then theme first 
        var template = new PopupTemplate({
          title: "Boston Marathon 2013",
          description: "{Percent_Fi} of starters from {STATE_NAME} finished",
          fieldInfos: [{ //define field infos so we can specify an alias
            fieldName: "Number_Ent",
            label: "Entrants"
          },{
            fieldName: "Number_Sta",
            label: "Starters"
          },{
            fieldName: "Number_Fin",
            label: "Finishers"
          }],
          mediaInfos:[{ //define the bar chart
            caption: "Details",
            type:"barchart",
            value:{
              theme: "Dollar",
              fields:["Number_Ent","Number_Sta","Number_Fin"]
            }

          }]
        });

        var featureLayer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Boston_Marathon/FeatureServer/0",{
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]

        });
  
  require(["dojo/on", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/_base/Color", "esri/graphic"], function(on, SimpleFillSymbol, SimpleLineSymbol, Color, Graphic) {
                    on(fl, "click", function(evt) {
                        
                        // clears current selection
                       alert("ojho"):
                    });
            });
        
        map.addLayer(featureLayer);

      });

 
    </script>
  </head>
  
  <body class="claro">
    <div id="map"></div>
  </body>

</html>