<!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>
Aneesha,
There were a couple of problems in your code.
<!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>