can u check the code and tell me what is actually wrong in this ......when run it is not shown in the browser

2455
1
04-27-2015 09:58 PM
aneeshasatya
New Contributor

<!DOCTYPEhtml>

  <html>

  <head>

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

    <metaname="viewport"content="initial-scale=1, maximum-scale=1,user-scalable=no">

<title>Nalgonda point data popup</title>

        <linkrel="stylesheet"href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">

        <linkrel="stylesheet"href="http://js.arcgis.com/3.13/esri/css/esri.css">

<style>

            html, body,

            #map

            .map.container {

            padding: 0;

            margin: 0;

            height:50%;

                          }

      #info {

         top: 2px;

         color: #444;

         height: auto;

         font-family: arial;

         font-weight: bold;

         left: 69px;

         margin: 5px;

         padding: 10px;

         position: absolute;

         width: 260px;

         z-index: 40;

         border: solid 1px #003300;

         border-radius: 4px;

         background-color: Green;

      }

        /* Change color of icons to match bar chart and selection symbol */

            .esriPopup.darkdiv.titleButton,

            .esriPopup.darkdiv.titlePane.title,

            .esriPopup.darkdiv.actionsPane.action {

            color: #A4CE67;

      }

        /* Additional customizations */

            .esriPopup.dark.esriPopupWrapper {

            border: none;

      }

            .esriPopup.contentPane {

            text-align: center;

      }

            .esriViewPopup.gallery {

            margin:0auto;

      }

</style>

        <script src="http://js.arcgis.com/3.13/"></script>

<script>

    var map;

    require([

        "esri/map",

        "esri/dijit/Popup", "esri/dijit/PopupTemplate",

        "esri/layers/FeatureLayer",

        "esri/symbols/SimpleFillSymbol", "esri/Color",

        "dojo/dom-class", "dojo/dom-construct", "dojo/on",

        "dojox/charting/Chart", "dojox/charting/themes/Dollar", "dojo/parser",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",

        "dojo/domReady!"

             ], function (

        Map,

        Popup, PopupTemplate,

        FeatureLayer, SimpleFillSymbol, Color, BasemapGallery, arcgisUtils,

        domClass, domConstruct, on,

       Chart, Dollar, parser) {

          parser.parse();

          map = new Map("map", {

              basemap: "topo",

              center: [78.8718, 21.7679],

              zoom: 4

          });

          //        ) {

          //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps

          var basemapGallery = new BasemapGallery({

              showArcGISBasemaps: true,

              map: map

          }, "basemapGallery");

          basemapGallery.startup();

          basemapGallery.on("error", function (msg) {

              console.log("basemap gallery error:  ", msg);

          });

          //      ) {

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

          //and providing our own selection symbol for polygons.

          var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));

          var popup = new Popup({

              fillSymbol: fill,

              titleInBody: false

          }, domConstruct.create("div"));

          //Add the dark theme which is customized further in the <style> tag at the top of this page

          domClass.add(popup.domNode, "dark");

          map.infoWindow = popup;

          //          map = new Map("map", {

          //              basemap: "gray",

          //              center: [78.8718, 21.7679],

          //              zoom: 4,

          //              infoWindow: popup

          //          });

          var template = new PopupTemplate({

              title: "munugode subdivision",

              description: "{village}:  {population} are affected",

              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: "",

                  type: "barchart",

                  value: {

                      theme: "Dollar",

                      fields: ["Number_Ent", "Number_Sta", "Number_Fin"]

                  }

              }]

          });

          var featureLayer = new FeatureLayer("http://3092-ggngis:6080/arcgis/rest/services/BSESWithoutOwnership/FeatureServer/0", {

              mode: FeatureLayer.MODE_ONDEMAND,

              outFields: ["*"],

              infoTemplate: template

          });

          map.addLayer(featureLayer);

      });

</script>

</head>

<body  class="claro">

            <div data-dojo-type="dijit/layout/BorderContainer"

            data-dojo-props="design:'headline', gutters:false"

            style="width:75%;height:75%;margin:0;">

    <div id="map"

            data-dojo-type="dijit/layout/ContentPane"

            data-dojo-props="region:'center'"

            style="padding:0;">

    <div style="position:absolute; right:20px; top:10px; z-Index:999;">

    <div data-dojo-type="dijit/TitlePane"

            data-dojo-props="title:'Switch Basemap', closable:false, open:false">

            <div data-dojo-type="dijit/layout/ContentPane"style="width:100; height:100px; overflow:auto;">

            <divid="basemapGallery"></div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

0 Kudos
1 Reply
RobertScheitlin__GISP
MVP Emeritus

Aneesha,

  There were a couple of problems in your code.

  1. Properties of your html elements need to have a space between them
  2. Your Requires need to match your vars list (you were missing the require for ("esri/dijit/BasemapGallery", "esri/arcgis/utils",)

<!DOCTYPEhtml>
<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>Nalgonda point data popup</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
  <style>
    html,
    body,
    #map .map.container {
      padding: 0;
      margin: 0;
      height: 100%;
    }

    #info {
      top: 2px;
      color: #444;
      height: auto;
      font-family: arial;
      font-weight: bold;
      left: 69px;
      margin: 5px;
      padding: 10px;
      position: absolute;
      width: 260px;
      z-index: 40;
      border: solid 1px #003300;
      border-radius: 4px;
      background-color: Green;
    }
    /* Change color of icons to match bar chart and selection symbol */

    .esriPopup.darkdiv.titleButton,
    .esriPopup.darkdiv.titlePane.title,
    .esriPopup.darkdiv.actionsPane.action {
      color: #A4CE67;
    }

    /* Additional customizations */
    .esriPopup.dark.esriPopupWrapper {
      border: none;
    }

    .esriPopup.contentPane {
      text-align: center;
    }

    .esriViewPopup.gallery {
      margin: 0auto;
    }
  </style>


  <script src="http://js.arcgis.com/3.13/"></script>

  <script>
    var map;
    require([
        "esri/map",
        "esri/dijit/Popup", "esri/dijit/PopupTemplate",
        "esri/layers/FeatureLayer",
        "esri/symbols/SimpleFillSymbol", "esri/Color", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
        "dojo/dom-class", "dojo/dom-construct", "dojo/on",
        "dojox/charting/Chart", "dojox/charting/themes/Dollar", "dojo/parser",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
        "dojo/domReady!"
             ], function (
      Map,
      Popup, PopupTemplate,
      FeatureLayer, SimpleFillSymbol, Color, BasemapGallery, arcgisUtils,
      domClass, domConstruct, on,
      Chart, Dollar, parser) {
      //parser.parse();

      map = new Map("map", {
        basemap: "topo",
        center: [78.8718, 21.7679],
        zoom: 4
      });

      //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();

      basemapGallery.on("error", function (msg) {
        console.log("basemap gallery error:  ", msg);
      });

      //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
      //and providing our own selection symbol for polygons.
      var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));
      var popup = new Popup({
        fillSymbol: fill,
        titleInBody: false
      }, domConstruct.create("div"));

      //Add the dark theme which is customized further in the <style> tag at the top of this page
      domClass.add(popup.domNode, "dark");
      map.infoWindow = popup;

      var template = new PopupTemplate({
        title: "munugode subdivision",
        description: "{village}:  {population} are affected",
        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: "",
          type: "barchart",
          value: {
            theme: "Dollar",
            fields: ["Number_Ent", "Number_Sta", "Number_Fin"]
          }
        }]
      });

      var featureLayer = new FeatureLayer("http://3092-ggngis:6080/arcgis/rest/services/BSESWithoutOwnership/FeatureServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields: ["*"],
        infoTemplate: template
      });

      map.addLayer(featureLayer);
    });
  </script>

</head>

<body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:75%;height:75%;margin:0;">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0;">
      <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Switch Basemap', closable:false, open:false">
          <div data-dojo-type="dijit/layout/ContentPane" style="width:100; height:100px; overflow:auto;">
            <div id="basemapGallery"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>