topic can u check the code and tell me what is actually wrong in this ......when run it is not shown in the browser in ArcGIS JavaScript Maps SDK Questions

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

aneeshasatya — Tue, 28 Apr 2015 04:58:58 GMT

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

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>

<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 data-dojo-type="dijit/TitlePane"

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

<divid="basemapGallery"></div>

</div>

</body>

</html>

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

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:19:22 GMT

Aneesha,

There were a couple of problems in your code.

Properties of your html elements need to have a space between them
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>