|
POST
|
For some reason the HTML didn't paste in above: <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" class="roundedCorners" id="leftPane"> <div>Click the pin below then click location on map to add your comment.</div> <div id="templatePickerDiv"></div> </div>
... View more
11-07-2014
06:13 AM
|
0
|
8
|
1688
|
|
POST
|
Hello all, I have a javascript application that uses the following CSS/HTML to create the displayed output:
#leftPane {
margin:5px; /*added this, seems to align #leftPane & #map a bit nicer*/
width:200px; /*300px;*/
color:#3C1700;
background-color:#FFF;
}
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" class="roundedCorners" id="leftPane">
<div>Click the pin below then click location on map to add your comment.</div>
<div id="templatePickerDiv"></div>
</div>
I would like to add a pane to the lower left area, so that it will look like the below picture but am having difficulty figuring out how to change the code. I had read something about having to nest the panes but haven't figured anything out. Any help appreciated! Thanks
... View more
11-07-2014
06:09 AM
|
0
|
9
|
2205
|
|
POST
|
Thanks Robert. That seemed pretty simple. It works fine in Chrome. In IE it will not open the form or put a point on the map when I click to add a new point, I believe this is where the proxy is required?? I am using IE 9 (which I thought it would work fine with, I thought the Proxy was needed only for older browser versions)? Thanks for your help, Chris
... View more
10-09-2014
02:28 PM
|
0
|
1
|
1156
|
|
POST
|
Hello everyone, I have the attached file (AddRecord_V6.html) which I will paste into the thread at the bottom. It works fine in the JavaScript sandbox environment. I have recently tried to break this file out into separate files (.html, .js, .css) to see if I can get this working from the web server on my PC (localhost). Of course it's not working. What I see is: I'm confident that 2 things that need to be changed when moving away from the Sandbox environment are: Proxy I have been trying to follow (https://developers.arcgis.com/javascript/jshelp/ags_proxy.html) to get the proxy working. But I'm not getting it. Is there any documentation that can help walk someone more explicitely through the steps? Irregardless, I don't think that the proxy issue would have anything to do with the map not displaying above. Dojo I've been reading on the dojo site dojotoolkit.org, trying to get that set up. The easiest method seems to be to reference a CDN. Basically I don't know what I'm missing to get this working. Any direction greatly appreciated. The index.zip contains the individual files broken out. Below is the code from AddRecord_V6.html Thanks all!
<!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>Multiple Attribute Inspectors</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<style>
html,body {
height:100%;
width:100%;
background-color:#FFF;
font-family:Kimberley, sans-serif;
margin:0;
padding:0;
}
#header {
padding-top:4px;
padding-right:15px;
background-color:#570026;
color:#CCC59E;
font-size:16pt;
text-align:right;
font-weight:700;
height:55px;
margin:2px;
}
#subheader {
font-size:small;
color:#E8D9AC;
text-align:right;
padding-right:1px; /*20px;*/
}
#leftPane {
margin:5px; /*added this, seems to align #leftPane & #map a bit nicer*/
width:200px; /*300px;*/
color:#3C1700;
background-color:#FFF;
}
#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
#LocateButton {
position: absolute;
top: 129px;
left: 20px;
z-index: 50;
}
#map {
margin:5px;
padding:0px;
}
.templatePicker {
border: none !important;
height: 93% !important;
}
.templatePicker .grid .groupLabel{ /* This css will remove the template picker title*/
display:none; /* "TRPLCWH.Comments"*/
}
.templatePicker .itemLabel{ /*makes text orange*/
color:black;
}
.roundedCorners{
border:solid 3px #705B35;
border-radius:6px;
}
.shadow {
-webkit-box-shadow: 0 8px 6px -6px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;
}
.esriAttributeInspector {
height:283px;
/*width:400px;*/
overflow: hidden; /* makes it so that the vertical scroll bar does not show up */
}
.esriAttributeInspector .atiLayerName {
display:none;
}
.esriAttributeInspector .atiField {
font-family: "Verdana";
font-size: 1em;
width: 300px;
}
.esriAttributeInspector .atiTextAreaField {
font-family: "Verdana";
font-size: 1em;
width: 296px;
}
.saveButton {
padding-left:45px;
margin:0px;width:16px; height:16px;
}
</style>
<script src="http://js.arcgis.com/3.10/"></script>
<script>
require([
"esri/map", "esri/dijit/HomeButton", "esri/dijit/LocateButton", "esri/layers/FeatureLayer", "esri/dijit/AttributeInspector", "esri/graphic", "esri/config",
"dojo/dom", "dojo/on", "dojo/_base/array", "esri/toolbars/draw", "dojo/dom-construct",
"dojo/parser", "esri/toolbars/draw", "esri/dijit/editing/TemplatePicker", "esri/dijit/AttributeInspector",
"dijit/form/Button", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map, HomeButton, LocateButton, FeatureLayer, AttributeInspector, Graphic, esriConfig,
dom, on, array, Draw, domConstruct,
parser, draw, TemplatePicker, AttributeInpsector,
Button
) {
parser.parse();
esriConfig.defaults.io.proxyUrl = "/proxy";
var map, updateFeature;
map = new esri.Map("map", {
basemap: "streets",
center: [-114.2, 51.06],
zoom: 12
});
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
var geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();
on(map, "layers-add-result", initEditing);
var pointLayer = new FeatureLayer("http://gismap2.calgary.ca/arcgis/rest/services/LUPP_Testing/CitizenComments/FeatureServer/0", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
map.addLayers([pointLayer]);
function initEditing(results) {
var layers = [results.layers[0].layer];
var templatePicker = new TemplatePicker({
featureLayers: layers,
rows: 'auto',
columns: 'auto',
grouping: true
}, "templatePickerDiv");
templatePicker.startup();
var drawToolbar = new Draw(map);
var selectedTemplate;
on(templatePicker, "selection-change", function() {
selectedTemplate = templatePicker.getSelected();
if (selectedTemplate) {
switch (selectedTemplate.featureLayer.geometryType) {
case "esriGeometryPoint":
drawToolbar.activate(esri.toolbars.Draw.POINT);
break;
}
}
});
on(drawToolbar, "draw-end", function(geometry) {
updateFeature = geometry;
console.log(updateFeature);
if (map.infoWindow.isShowing) {
map.infoWindow.hide();
}
drawToolbar.deactivate();
var fieldAttributes = layerFieldToAttributes(selectedTemplate.featureLayer.fields);
var newAttributes = dojo.mixin(fieldAttributes, selectedTemplate.template.prototype.attributes);
var newGraphic = new Graphic(geometry, null, newAttributes);
var layerInfos = [{
'featureLayer': selectedTemplate.featureLayer,
'isEditable': true,
'showAttachments': true,
fieldInfos: [
{ fieldName: "NAME", label: "NAME:", isEditable: true },
{ fieldName: "EMAIL", label: "EMAIL:", isEditable: true },
{ fieldName: "PHONE", label: "PHONE:", isEditable: true },
{ fieldName: "CITIZEN_COMMENT", label: "COMMENT:", isEditable: true, 'stringFieldOption': 'textarea' }
]
}];
var attInspector = new AttributeInspector({
layerInfos: layerInfos
}, domConstruct.create("div"));
var saveButton = new Button({ label: "Save", "class": "saveButton"});
domConstruct.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");
saveButton.on("click", function(){
map.infoWindow.hide();
});
selectedTemplate.featureLayer.applyEdits([newGraphic], null, null, function() {
var screenPoint = map.toScreen(getInfoWindowPositionPoint(newGraphic));
map.infoWindow.setContent(attInspector.domNode);
map.infoWindow.resize(400,400); //(325, 185);
map.infoWindow.show(screenPoint, map.getInfoWindowAnchor(screenPoint));
templatePicker.clearSelection();
});
on(attInspector, "attribute-change", function(evt) {
evt.feature.attributes[evt.fieldName] = evt.fieldValue;
evt.feature.getLayer().applyEdits(null, [evt.feature], null);
});
//delete a point
on(attInspector, "delete", function(evt) {
evt.feature.getLayer().applyEdits(null, null, [evt.feature]);
map.infoWindow.hide();
});
});
}
//removing this code makes it so that the info window does not open
function getInfoWindowPositionPoint(feature) {
var point;
switch (feature.getLayer().geometryType) {
case "esriGeometryPoint":
point = feature.geometry;
break;
}
return point;
}
//required for info window
function layerFieldToAttributes(fields) {
var attributes = {};
dojo.forEach(fields, function(field) {
attributes[field.name] = null;
});
return attributes;
}
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"
style="width:100%; height:100%;">
<div id="header" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
Planning Comments
<div id="subheader">
West Springs
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" class="roundedCorners" id="leftPane">
<div>Click the pin below then click location on map to add your comment.</div>
<div id="templatePickerDiv"></div>
</div>
<div id="map" class="shadow roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<div id="HomeButton"></div>
<div id="LocateButton"></div>
</div>
</div>
</body>
</html>
... View more
10-09-2014
01:56 PM
|
0
|
3
|
1730
|
|
POST
|
Hello, After adding this css:
.esriAttributeInspector .atiField {
font-family: "Verdana";
font-size: 1em;
}
The width of my TextAreaField shrunk: What would cause this to happen and what is the fix? If I try this:
.esriAttributeInspector .atiField {
font-family: "Verdana";
font-size: 1em;
width: 250px;
}
The TextAreaField ends up being a bit longer than the others: Any suggestions appreciated. Also, I've tried unsuccessfully to make the Attribute Inspector taller so that the buttons are fully exposed. This is how it's looking: I suspect this is why the scroll bar is appearing on the right hand side. Thanks for all the help, Chris
... View more
10-01-2014
11:51 AM
|
0
|
2
|
2676
|
|
POST
|
Hello, I have a text area for a field displaying in the attribute inspector. It displays with a different font than the other fields. What do I need to add to change the font? Do I need to add something here?
var layerInfos = [{
'featureLayer': selectedTemplate.featureLayer,
'isEditable': true,
'showAttachments': true,
fieldInfos: [
{ fieldName: "NAME", label: "NAME:", isEditable: true },
{ fieldName: "EMAIL", label: "EMAIL:", isEditable: true },
{ fieldName: "PHONE", label: "PHONE:", isEditable: true },
{ fieldName: "CITIZEN_COMMENT", label: "COMMENT:", isEditable: true, 'stringFieldOption': 'textarea' }
]
}];
Thanks, Chris
... View more
09-26-2014
06:42 AM
|
0
|
2
|
1516
|
|
POST
|
Thanks Tim. I had this: <div id="map" class="shadow roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div> <div id="HomeButton"></div> When I should have had this: <div id="map" class="shadow roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"> <div id="HomeButton"></div> </div> Chris
... View more
09-25-2014
07:24 AM
|
0
|
1
|
1042
|
|
POST
|
Good day everyone, I used the following sample to display the home button: Home Button | ArcGIS API for JavaScript Using the following css code:
#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
The button displays here: If I change the css to this:
#HomeButton {
position: absolute;
top: 175px;
left: 260px;
z-index: 50;
}
The button displays here: Is there a way in the css that I can tie the home button to the map pane? Just not sure if how I am doing it is the correct way. Thanks, Chris
... View more
09-25-2014
07:12 AM
|
0
|
3
|
1593
|
|
POST
|
Thanks again Jake. I just heard that the server may be down, it is a test server.
... View more
09-23-2014
01:05 PM
|
0
|
0
|
393
|
|
POST
|
For some reason I seem to be having an issue with my feature service. The point data is not loading and the following displays in the Template Picker: "Feature creation is disabled for all layers". Any ideas? It was working fine on Friday, and this morning is the first time I've gotten back to it. Thanks, Chris
... View more
09-23-2014
11:00 AM
|
0
|
2
|
2292
|
|
POST
|
Thanks for the info Kelly, I’ll check it out. Chris
... View more
09-23-2014
10:54 AM
|
1
|
0
|
2292
|
|
POST
|
Thanks Jake. I will be able to implement and test tomorrow at work. I did notice that it was written using legacy and not AMD, but figured I'd address that after these issues, so thanks for your help there. This has definitely been quite the learning curve. Chris
... View more
09-22-2014
02:34 PM
|
2
|
2
|
2292
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 11-10-2020 03:34 PM | |
| 1 | 02-23-2021 11:53 AM | |
| 1 | 02-16-2021 09:15 AM | |
| 1 | 12-10-2020 07:46 AM | |
| 1 | 01-18-2019 09:54 AM |
| Online Status |
Offline
|
| Date Last Visited |
04-22-2021
04:31 PM
|