conditionally show pop-up onclick but not via infotemplate.

vinayb · ‎08-24-2013

Hi All,

I want to show pop-up , the samples so far i have seen for pop all of them make use of infoTemplate which is associated with FeatureLayer .So when we click on map the pop automatically shows up based on the definition of pop we give in infotemplate.Even the data to the Pop-Up come from the rest service , let me know if i am wrong on this one.But in my case i want to show pop-up conditionally and data for my pop will not come from rest service, i want to provide data to pop-up.So lets say when i click on country if i want to show pop that i built by me or lets say even using inforTemplate but i dont want to asscoiate that with featureLayer.So basically i dont want to show pop up on click on every country or state clicked i want to decide to show or not and data should not come from rest.

I am trying to modify this example so that on click of state i will place pop myself instead of featurelayer service do it to me.But i dont know how do that onclick i just get event object .SO lets i click on california and i want to display a custom pop on that how do that .Below is the code i tried but i am struck .Plz help

<!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>

PaulAngelino · ‎11-18-2013

Check this thread: http://forums.esri.com/Thread.asp?c=158&f=2396&t=267461

You can just connect your own event handler to something like the onClick event of the map. I hope this helps.

- Paul