|
POST
|
What are the different types of built-in Popup themes other than dark and light? var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67")); var popup = new Popup({ fillSymbol: fill, titleInBody: false }, domConstruct.create("div")); domClass.add(popup.domNode, "dark");
... View more
01-10-2017
09:27 AM
|
0
|
2
|
1923
|
|
POST
|
I have created an InfoTemplate Pop up Window. The popup has a tab container that contains 3 tabs. I want to place a Field Name just next to the Zoom To link in popup info template at the bottom of the popup window.. Could someone please suggest me how to do that? My code snippets: var template = new InfoTemplate();
template.setTitle("<b>${Name}</b>");
template.setContent(getWindowContent); var cp3 = new ContentPane({
title: "Site Info",
content: "<b>Name:</b>" + graphic.attributes.Name
... View more
01-06-2017
02:34 PM
|
0
|
1
|
1861
|
|
POST
|
I am trying to create a Hyperlink next to the Zoom In link in the Pop up Window. The hyperlink should reference to a field called "Comments" in arcsde. What I am trying to achieve here is: When the hyperlink is clicked, I want the "Comments" section to be displayed and be able to edit and save. How can I create this kind of hyperlink and relate it to the attribute of that field? Thanks,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<style>
html, body{
height: 100%;
width: 100%;
margin-top: 10px;
overflow: hidden;
padding-bottom: 0;
margin-bottom: 0;
margin-left: 0;
padding-left: 0;
}
#map {
padding-top: 0;
width: 100%;
height: 100%;
padding-bottom: 6px;
margin-bottom: 0;
margin-left: 0;
padding-left: 0;
margin-top: 0;
}
.claro .dijitTooltipContainer {
background-image: none;
border: 1px solid #444444;
background-color: #444444;
color: #FFFFFF;
}
.claro .dijitTooltipConnector {
background-image: none;
}
.esriPopup .titleButton.maximize {
display: none;
}
</style>
<script src="https://js.arcgis.com/3.18/"></script>
<script>
var map, navToolbar;
var theme = "Shrooms";
require([
"esri/map",
"esri/dijit/Scalebar",
"esri/geometry/webMercatorUtils",
"esri/toolbars/navigation",
"esri/dijit/Search",
"esri/layers/FeatureLayer",
"esri/InfoTemplate",
"esri/dijit/BasemapGallery",
"esri/dijit/Legend",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters",
"esri/Color",
"esri/dijit/Popup",
"esri/dijit/PopupTemplate",
"esri/dijit/InfoWindow",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/on",
"dojo/dom",
"dojo/parser",
"dojo/dom-construct",
"dojo/dom-class",
"dojo/query",
"dojo/number",
"dijit/registry",
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dojox/charting/Chart2D",
"dojox/charting/plot2d/Pie",
"dojox/charting/action2d/Highlight",
"dojox/charting/action2d/MoveSlice",
"dojox/charting/action2d/Tooltip",
"dojox/charting/themes/" + theme,
"dijit/Toolbar",
"dijit/form/Button",
"dijit/TitlePane",
"dijit/layout/AccordionContainer",
"dijit/layout/BorderContainer",
"dojo/domReady!"
],
function (Map, Scalebar, webMercatorUtils, Navigation,Search, FeatureLayer, InfoTemplate, BasemapGallery, Legend, ArcGISDynamicMapServiceLayer,
ImageParametrs, Color, Popup, PopupTemplate, InfoWindow, SimpleFillSymbol, SimpleLineSymbol, on, dom, parser, domConstruct,
domClass, query, number, registry, ContentPane, TabContainer, Chart2D, Pie, Highlight, MoveSlice, Tooltip, dojoxTheme) {
parser.parse();
// var navToolbar;
var legendLayers = [];
/*
var sls = new SimpleLineSymbol("solid", new Color("#444444"), 3);
var sfs = new SimpleFillSymbol("solid", sls, new Color([68, 68, 68, 0.25]));
var popupOptions = {
fillSymbol: sfs,
marginLeft: "70",
marginTop: "100"
};
//create a popup to replace the map's info window
// var popup = new Popup(popupOptions, domConstruct.create("div"));
*/
map = new Map("map", {
basemap: "topo",
center: [-100.405, 37.991],
zoom: 5
//infoWindow: template
});
var scalebar = new Scalebar({
map:map,
scalebarUnit: "dual"
});
map.infoWindow.on("selection-change", function(e){
query(".dijitTabContainer", this.domNode).forEach(function(node){
var tc = registry.getEnclosingWidget(node);
if(tc){
tc.selectChild(tc.getChildren()[0]);
tc.resize();
}
});
});
var template = new esri.InfoTemplate();
template.setTitle("<b>${Name}</b>");
template.setContent(getWindowContent);
var featureLayer = new FeatureLayer("EndPointsURL/FeatureServer/0", {
mode: FeatureLayer.MODE_ONEDEMAND,
infoTemplate: template,
opacity:0,
outFields: ["*"]
});
map.addLayer(featureLayer);
var imageParameters = new ImageParametrs();
imageParameters.format = "jpeg";
var dynamicLayer = new ArcGISDynamicMapServiceLayer("EndPointsURL/MapServer", {
id: 'Names',
"imageParameters": imageParameters,
mode: FeatureLayer.MODE_ONEDEMAND,
infoTemplate: template,
outFields: ["*"]
});
map.on('layers-add-result', function () {
var legend = new Legend({
map: map,
layerInfos: legendLayers
}, "legendDiv");
legend.startup();
});
legendLayers.push({ layer: dynamicLayer, title: "Name" });
map.addLayers([dynamicLayer]);
function getWindowContent(graphic) {
// Make a tab container.
var tc = new TabContainer({
style: "overflow-y:hidden;",
doLayout: false
}, domConstruct.create("div"));
tc.startup();
// Display attribute information.
var cp1 = new ContentPane({
title: "Collection"
});
// tc.addChild(cp1);
var c1 = domConstruct.create("div",{
id: "Collection"
}, domConstruct.create("div"));
var chart1 = new Chart2D(c1);
domClass.add(chart1, "chart1");
chart1.setTheme(dojoxTheme);
chart1.addPlot("default", {
type: "Pie",
radius: 70,
htmlLabels: true,
labelOffset: 31
});
tc.watch("selectedChildWidget", function(name, oldVal, newVal) {
if (newVal.title === "Collection") {
chart1.resize(210, 150);
}
});
// Calculate percent complete/ incomplete.
var total1 = 100;
var complete_collection = number.round(graphic.attributes.Data_Collection);
var incomplete_collection = total1 - complete_collection;
chart1.addSeries("% Complete", [{
y: incomplete_collection,
tooltip: incomplete_collection,
text: "% Incomplete"
// color: "red"
}, {
y: complete_collection,
tooltip: complete_collection,
text: "% Complete"
//color: "green"
}]);
//highlight the chart and display tooltips when you mouse over a slice.
new Highlight(chart1, "default");
new Tooltip(chart1, "default");
new MoveSlice(chart1, "default");
cp1.set("content", chart1.node);
var cp3 = new ContentPane({
title: "Info",
content: "<b>Name:</b>" + graphic.attributes.Name +
"</br></br><b>Code:</b>" + graphic.attributes.Code +
"</br></br><b>Account:</b>" + graphic.attributes.Account +
"</br></br><b>Account Sub:</b>" + graphic.attributes.Account_Sub +
"</br></br><b>Comments:</b>" + graphic.attributes.Add_Notes
});
tc.addChild(cp1);
tc.addChild(cp3);
tc.selectChild(cp1);
return tc.domNode;
}
});
</script>
</head>
<body class="claro" >
<div id="content" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:true"
style="width: 100%; height: 98%; margin: 0;">
<div id="rightPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'right'">
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
data-dojo-props="title:'Legend', selected:true">
<div id="legendDiv"></div>
</div>
<span>Loading...</span>
</div>
</div>
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="overflow:hidden;">
<span id="info" style="position:absolute; right:15px; bottom:50px; color:#000; z-index:50;"></span>
</div>
</div>
</body>
</html>
... View more
01-03-2017
12:01 PM
|
0
|
1
|
2841
|
|
POST
|
By default, the content area for an info window is 250 pixels wide and 100 pixels high. If you have the required modules and objects to call InfoWindow Popup, the default size will be displayed. Or Use map.infoWindow.resize(250, 100);
... View more
12-27-2016
11:28 AM
|
1
|
0
|
777
|
|
POST
|
Create a new field called "id" and make it a unique key and assign the same values as that of OBJECTID. Replace OBJECTID with id in your codes.
... View more
12-16-2016
11:18 AM
|
1
|
0
|
1927
|
|
POST
|
The infowindow popup of the feature layer is not being displayed on my map. I couldn't figure out how to have all Search, BasemapGallery, Legend, Navigation toolbar, and attribute inspector working on a map. The code is shown below: <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<style>
html, body{
height: 100%;
width: 100%;
margin-top: 10px;
overflow: hidden;
padding-bottom: 0;
margin-left: 0;
padding-left: 0;
}
#map {
padding-top: 8px;
width: 100%;
height: 100%;
padding-bottom: 20px;
margin-left: 0;
padding-left: 0;
}
#navToolbar {
border: 2px solid lightgray;
width: 14%;
border-radius: 10px;
}
.zoominIcon {
background-image: url(Images/zoom-in.png);
width: 16px;
height: 16px;
}
.zoomoutIcon {
background-image: url(Images/zoom-out.png);
width: 16px;
height: 16px;
}
.zoomfullextIcon {
background-image: url(Images/zoom-full.png);
width: 16px;
height: 16px;
}
.zoomprevIcon {
background-image: url(Images/zoom-previous.png);
width: 16px;
height: 16px;
}
.zoomnextIcon {
background-image: url(Images/zoom-next.png);
width: 16px;
height: 16px;
}
.panIcon {
background-image: url(Images/pan.png);
width: 16px;
height: 16px;
}
.deactivateIcon {
background-image: url(Images/deactivate.png);
width: 16px;
height: 16px;
}
#search {
display: block;
position: absolute;
z-index: 2;
top:53px;
left: 90px;
}
#rightPane {
width: 8%;
padding-bottom: 7.1%;
}
</style>
<script src="https://js.arcgis.com/3.18/"></script>
<script>
var map, navToolbar;
require([
"esri/map",
"esri/toolbars/navigation",
"esri/dijit/Search",
"esri/layers/FeatureLayer",
"esri/InfoTemplate",
"esri/dijit/BasemapGallery",
"esri/dijit/Legend",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters",
"esri/Color",
"esri/config",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/on",
"dojo/dom",
"dojo/parser",
"dojo/dom-construct",
"dijit/registry",
"dijit/Toolbar",
"dijit/form/Button",
"dijit/TitlePane",
"dijit/layout/ContentPane",
"dijit/layout/AccordionContainer",
"dijit/layout/BorderContainer",
"dojo/domReady!"
],
function (Map, Navigation,Search, FeatureLayer, InfoTemplate, BasemapGallery, Legend, ArcGISDynamicMapServiceLayer,
ImageParametrs, Color, esriConfig, SimpleFillSymbol, SimpleLineSymbol,
on, dom, parser, domConstruct, registry) {
parser.parse();
esriConfig.defaults.io.proxyUrl="/proxy/";
esri.config.defaults.geometryService = new esri.tasks.GeometryService("https://PATH/Geometry/GeometryServer/");
var legendLayers = [];
map = new Map("map", {
basemap: "topo",
center: [-88.55, 43.12],
zoom: 9,
slider: false
});
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function (msg) {
console.log("basemap gallery error: ", msg);
});
var pointsOfInterest = new esri.layers.FeatureLayer("https://RESTUrl/Endpoints/FeatureServer/1", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ['*'],
opacity:0
});
map.addLayer(pointsOfInterest);
var imageParameters = new ImageParametrs();
imageParameters.format = "jpeg";
var dynamicLayer = new ArcGISDynamicMapServiceLayer("https://RESTUrl/Endpoints/MapServer", {
id: 'Preferred Plan',
"imageParameters": imageParameters
});
legendLayers.push({ layer: dynamicLayer, title: 'Preferred Plan' });
map.on('layers-add-result', function () {
var legend = new Legend({
map: map,
layerInfos: legendLayers
}, "legendDiv");
legend.startup();
});
map.addLayers([dynamicLayer]);
dojo.connect(map, "OnLayersAddResult", initEditor);
function initEditor(results) {
//only one layer
var featureLayer = results[0].layer;
var layerInfos = [{
'featureLayer':featureLayer,
'showAttachments':false,
'showDeleteButton':false,
'fieldInfos':[
{'fieldName':'Name', 'isEditable':false, 'label':'<b> Name:</b>'},
{'fieldName': 'Code', 'isEditable':false, 'label':'<b>Code:</b>'},
{'fieldName': 'Type', 'isEditable':true, 'label':'<b>Type:</b>'},
]
}];
//define the editor settings
var settings = {
map: map,
// templatePicker:templatePicker,
layerInfos:layerInfos
};
var params = {settings: settings};
//Create the editor widget
var editorWidget = new esri.dijit.editing.Editor(params);
editorWidget.startup();
//resize the info window (attribute inspector)
map.infoWindow.resize(495,495);
}
navToolbar = new Navigation(map);
on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
registry.byId("zoomin").on("click", function () {
navToolbar.activate(Navigation.ZOOM_IN);
});
registry.byId("zoomout").on("click", function () {
navToolbar.activate(Navigation.ZOOM_OUT);
});
registry.byId("zoomfullext").on("click", function () {
navToolbar.zoomToFullExtent();
});
registry.byId("zoomprev").on("click", function () {
navToolbar.zoomToPrevExtent();
});
registry.byId("zoomnext").on("click", function () {
navToolbar.zoomToNextExtent();
});
registry.byId("pan").on("click", function () {
navToolbar.activate(Navigation.PAN);
});
registry.byId("deactivate").on("click", function () {
navToolbar.deactivate();
});
function extentHistoryChangeHandler () {
registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
}
var search = new Search({
sources: [{
featureLayer: new FeatureLayer("https://RESTUrl/FeatureServer/5", {
outFields: ["*"],
opacity:0,
infoTemplate: new InfoTemplate("Region", "Region: ${Region}")
}),
outFields: ["Region"],
displayField: "Region",
suggestionTemplate: "Region:${Region}",
name: "Metroplex",
placeholder: "Enter a Region",
enableSuggestions: true
}],
map: map
}, "search");
search.startup();
});
</script>
</head>
<body class="claro" >
<div id="content" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:true"
style="width: 100%; height: 95%; margin: 0;">
<div id="rightPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'right'">
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
data-dojo-props="title:'Legend', selected:true">
<div id="legendDiv"></div>
</div>
</div>
</div>
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="overflow:hidden;">
</div>
</div>
<div id="navToolbar" data-dojo-type="dijit/Toolbar" style="position:absolute; right:200px; top:52px; z-Index:1000;">
<div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'"></div>
<div data-dojo-type="dijit/form/Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon'"></div>
<div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'"></div>
<div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'"></div>
<div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'"></div>
<div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'"></div>
<div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'"></div>
</div>
<div id="search"></div>
<div style="position:absolute; right:200px; top:93px; z-Index:1;">
<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:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
</div>
</div>
</body>
</html>
... View more
12-15-2016
01:03 PM
|
0
|
1
|
2252
|
|
POST
|
Have a look at Format Popup Content | Guide | ArcGIS API for JavaScript 3.18 . If your question is answered, please mark the right answer as Correct Answer.
... View more
12-12-2016
02:59 PM
|
1
|
2
|
1859
|
|
POST
|
The issue should be: The geoprocessing tool/ service is not compatible with the ArcGIS version you are using. It is because the service is not supported in that particular ArcGIS desktop. Try upgrading your ArcGIS version, it should work. Good luck.
... View more
12-12-2016
01:22 PM
|
0
|
1
|
7041
|
|
POST
|
If I am understanding you right, you want to disable the attributes editing on maps. Try something similar to this: function initEditor(results) {
//only one layer
var featureLayer = results[0].layer;
/*
var templatePicker = new esri.dijit.editing.TemplatePicker({
featureLayers: [featureLayer],
rows: 'auto',
groupingEnabled:false,
columns: 1
},'editorDiv');
templatePicker.startup();
*/
var layerInfos = [{
'featureLayer':featureLayer,
'showAttachments':false,
'showDeleteButton':false,
'fieldInfos':[
{'fieldName':'Name', 'isEditable':false, 'label':'<b> Name:</b>'},
{'fieldName': 'Facility_Type', 'isEditable':true, 'label':'<b>Facility Type:</b>'}
]
}];
//define the editor settings
var settings = {
map: map,
/* templatePicker:templatePicker, */
layerInfos:layerInfos
};
var params = {settings: settings};
//Create the editor widget
var editorWidget = new esri.dijit.editing.Editor(params);
editorWidget.startup();
//resize the info window (attribute inspector)
map.infoWindow.resize(495,495);
}
... View more
12-12-2016
01:10 PM
|
1
|
4
|
1859
|
|
POST
|
I have created a couple pie charts in a Tab Container based on the sample ArcGIS API for JavaScript Sandbox. In this sample, if you click on the "Pie Chart " tab, you will see a vertical scroll bar. How can I get rid of this bar? Also, I would like to display the percentage inside the pie chart sectors when hovered. Any suggestions are greatly appreciated. Thanks
... View more
12-08-2016
01:03 PM
|
0
|
2
|
1586
|
|
POST
|
Thanks Asrujit. I deleted the new records and readded them. Looks like it's working now.
... View more
12-02-2016
01:43 PM
|
0
|
0
|
873
|
|
POST
|
I had a SQL Server database table in ArcGIS desktop. I loaded additional data into the table. When I open the attribute table in ArcMap, I can see all the data (old and new) in the table. However, when I make database connection in PHPStorm using PDO, and open the table, I can only see the original data (the data table before additional data were added). I queried those added data using PHP. When I ran the php file in a browser, I get a table saying "No Data Available in the Table". Any helps are greatly appreciated.
... View more
12-02-2016
11:59 AM
|
0
|
2
|
1156
|
|
POST
|
If you are asking, if we can create layers and feature classes using only REST services, then the answer is no. We create datasets, feature classes, and maps in ArcMap/ ArcCatalog and publish them as RESTful services. Later, we use ArcGIS API for Javascript to add those layers and services to the maps. REST Services offer easier and smoother way to connect and interact with the web maps.
... View more
12-01-2016
12:12 PM
|
0
|
0
|
678
|
|
POST
|
Brian, You can use Advanced Web Map Printing/ Exporting. This will let you export the print layout format (HalfPage, Letter, A3, ...). Check this tutorial out: Tutorial: Advanced web map printing/exporting using arcpy.mapping—Documentation | ArcGIS for Server
... View more
11-29-2016
07:15 AM
|
1
|
0
|
754
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 08-02-2017 12:54 PM | |
| 1 | 08-11-2017 12:04 PM | |
| 1 | 07-20-2017 06:45 AM | |
| 1 | 12-27-2016 11:28 AM | |
| 1 | 01-09-2018 07:36 AM |
| Online Status |
Offline
|
| Date Last Visited |
11-11-2020
02:25 AM
|