I'm trying to put template picker widget together with editor in the dojo dialog. Editor widget is not a problem. But template picker does not appear. Does anyone know what I'm doing wrong. To test, I use this Edit rivers and waterbodies template. Thanks in advance!
My Code:
<!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>Edit rivers and waterbodies</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<style>
html,body{height:100%;width:100%;margin:0;overflow:hidden;}
#map{
padding:0;
}
#header{
font-size: 1.1em;
font-family: sans-serif;
padding-left: 1em;
padding-top:4px;
color:#660000;
}
.templatePicker {
border: none;
}
.dj_ie .infowindow .window .top .right .user .content { position: relative; }
.dj_ie .simpleInfoWindow .content { position: relative; }
#editorButton{
position: absolute;
z-index:99;
top: 3px;
left: 170px;
width: 100px;
height: 25px;
}
</style>
<script src="https://js.arcgis.com/3.29/"></script>
<script>
var map;
require([
"esri/map",
"esri/tasks/GeometryService",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/Color",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/dijit/editing/Editor",
"esri/dijit/editing/TemplatePicker",
"esri/config",
"dojo/i18n!esri/nls/jsapi",
"dojo/_base/array", "dojo/parser", "dojo/keys",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/Dialog", "dijit/form/Button", "dojo/on", "dojo/dom",
"dojo/domReady!"
], function(
Map, GeometryService,
ArcGISTiledMapServiceLayer, FeatureLayer,
Color, SimpleMarkerSymbol, SimpleLineSymbol,
Editor, TemplatePicker,
esriConfig, jsapiBundle,
arrayUtils, parser, keys, BorderContainer, ContentPane, Dialog, Button, on, dom
) {
parser.parse();
// snapping is enabled for this sample - change the tooltip to reflect this
jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start + "<br>Press <b>ALT</b> to enable snapping";
// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
esriConfig.defaults.io.proxyUrl = "/proxy/";
//This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map = new Map("map", {
basemap: "satellite",
center: [-96.541, 38.351],
zoom: 14,
slider: false
});
map.on("layers-add-result", initEditor);
//add boundaries and place names
var responsePoints = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['*']
});
map.addLayers([responsePoints]);
function initEditor(evt) {
var templateLayers = arrayUtils.map(evt.layers, function(result){
return result.layer;
});
var templatePicker = new TemplatePicker({
featureLayers: templateLayers,
grouping: true,
rows: "auto",
columns: 3
}, "templateDiv");
templatePicker.startup();
var layers = arrayUtils.map(evt.layers, function(result) {
return { featureLayer: result.layer };
});
var settings = {
map: map,
templatePicker: templatePicker,
layerInfos: layers,
toolbarVisible: true,
createOptions: {
polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],
polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,
Editor.CREATE_TOOL_CIRCLE,
Editor.CREATE_TOOL_TRIANGLE,
Editor.CREATE_TOOL_RECTANGLE
]
},
toolbarOptions: {
reshapeVisible: true
}
};
var params = { settings: settings };
var myEditor = new Editor(params, 'editorDiv');
//define snapping options
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CROSS,
15,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0, 0.5]),
5
),
null
);
map.enableSnapping({
snapPointSymbol: symbol,
tolerance: 20,
snapKey: keys.ALT
});
myEditor.startup();
}
var editorDialog = new Dialog({
title: "Editor",
content: editorDiv,
//style: "width: 280px"
});
console.log("editorDialog", editorDialog);
on(dom.byId('editorButton'), "click", function() {
editorDialog.show();
});
});
</script>
</head>
<body class="claro">
<div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="height:width:100%;height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">
Edit Hydrography
<button id="editorButton" type="button"> Editor Button</button>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 300px;overflow:hidden;">
<div id="templateDiv"></div>
<div id="editorDiv"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
Solved! Go to Solution.
Denis,
Here is what I was talking about:
<!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>Edit rivers and waterbodies</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dojox/layout/resources/ResizeHandle.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
#map {
padding: 0;
}
#header {
font-size: 1.1em;
font-family: sans-serif;
padding-left: 1em;
padding-top: 4px;
color: #660000;
}
.templateDiv {
border: none;
}
.dj_ie .infowindow .window .top .right .user .content {
position: relative;
}
.dj_ie .simpleInfoWindow .content {
position: relative;
}
#editorButton {
position: absolute;
z-index: 99;
top: 3px;
left: 170px;
width: 100px;
height: 25px;
}
.dojoxDock {
visibility: hidden;
}
#floatingEditor {
position: absolute;
top: 100px;
right: 100px;
width: 300px;
height: 100%;
max-height: 400px;
visibility: hidden;
z-index: 9;
}
.claro .dojoxFloatingMinimizeIcon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADWSURBVChTlVIhDoNAENyWalRtFQY0qh8AHKIkoO8DlRXoin4Cj0AgOd9UIflA+xA6Q7jkQhFlkuGWYYZd7tiN4yhEXdcnLBcwBkNqQA92YJPn+YfCFID5jPoGphRX0IIPhF5OEAR8870oitR1XfE8b3IYaK2lLEs/y7LjMAxPB4WCfqW5qiqxQzRTU0pR8yG9D7hwZomiiMtkMDBm8wyIGTAf+BNamIlwPxd/gx24dQlv7JkJ08nq0jPAfU5ssz3GItRxpAZs18ysqc0hnkWz+eA2/hoiXyTHZtKhdrvuAAAAAElFTkSuQmCC);
padding-right: 10px;
}
</style>
<script src="https://js.arcgis.com/3.29/"></script>
<script>
var map;
require([
"esri/map",
"esri/tasks/GeometryService",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/Color",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/dijit/editing/Editor",
"esri/dijit/editing/TemplatePicker",
"esri/config",
"dojo/i18n!esri/nls/jsapi",
"dojo/_base/array", "dojo/parser", "dojo/keys",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojox/layout/FloatingPane", "dijit/form/Button", "dojo/on", "dojo/dom",
"dijit/registry","dojo/domReady!"
], function (
Map, GeometryService,
ArcGISTiledMapServiceLayer, FeatureLayer,
Color, SimpleMarkerSymbol, SimpleLineSymbol,
Editor, TemplatePicker,
esriConfig, jsapiBundle,
arrayUtils, parser, keys, BorderContainer, ContentPane, FloatingPane, Button, on, dom,
registry
) {
parser.parse();
// snapping is enabled for this sample - change the tooltip to reflect this
jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start + "<br>Press <b>ALT</b> to enable snapping";
// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
esriConfig.defaults.io.proxyUrl = "/proxy/";
//This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
esriConfig.defaults.geometryService = new GeometryService(
"https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map = new Map("map", {
basemap: "satellite",
center: [-96.541, 38.351],
zoom: 14,
slider: false
});
map.on("layers-add-result", initEditor);
//add boundaries and place names
var responsePoints = new FeatureLayer(
"https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['*']
});
map.addLayers([responsePoints]);
function initEditor(evt) {
var templateLayers = arrayUtils.map(evt.layers, function (result) {
return result.layer;
});
var templatePicker = new TemplatePicker({
featureLayers: templateLayers,
grouping: true,
rows: "auto",
columns: 3
}, templateDiv);
templatePicker.startup();
var layers = arrayUtils.map(evt.layers, function (result) {
return {
featureLayer: result.layer
};
});
var settings = {
map: map,
templatePicker: templatePicker,
layerInfos: layers,
toolbarVisible: true,
createOptions: {
polylineDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYLINE],
polygonDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYGON,
Editor.CREATE_TOOL_CIRCLE,
Editor.CREATE_TOOL_TRIANGLE,
Editor.CREATE_TOOL_RECTANGLE
]
},
toolbarOptions: {
reshapeVisible: true
}
};
var params = {
settings: settings
};
var myEditor = new Editor(params, 'editorDiv');
//define snapping options
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CROSS,
15,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0, 0.5]),
5
),
null
);
map.enableSnapping({
snapPointSymbol: symbol,
tolerance: 20,
snapKey: keys.ALT
});
myEditor.startup();
}
on(dom.byId('editorButton'), "click", function () {
registry.byId("floatingEditor").show();
});
});
</script>
</head>
<body class="claro">
<div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
style="height:100%;height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">
Edit Hydrography
<button id="editorButton" type="button"> Editor Button</button>
</div>
<div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
</div>
<div id="floatingEditor" dojoType="dojox/layout/FloatingPane" title="Editor" dockTo="dock"
style="visibility:hidden;" closable="false" resizable="true" dockable="true">
<div id="editorDiv"></div>
<div id="templateDiv"></div>
</div>
</body>
</html>
Denis,
It does not make any sense to me for you to try and use a dialog widget to hold the editor and template picker, since a Dialog dijit is Modal it will not allow you to interact with the map while it is open, thus defeating the intended purpose of the editor widget and template widget.
Robert,
many thanks for your response!!!
I do not understand it. See screenshot: dojo dialog in "basic viewer" template (https://github.com/Esri/Viewer). Template picker and edit widget in dojo dialog. Is not it like that. Or I'm wrong?
Denis,
No that is not a Dojo Dijit Dialog. A dialog is Modal meaning that it is the only thing that can receive user interaction. What you picture there does not place an overlay over the rest of the app (to prevent user interaction) like the dialog dijit does.
OK . I did not know it. I tried to integrate for 2 days. pointless! .
in any case, thank's !
You should consider a FloatingPane dijit.
I'll try it. give the feedback.
Denis,
Here is what I was talking about:
<!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>Edit rivers and waterbodies</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dojox/layout/resources/ResizeHandle.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
#map {
padding: 0;
}
#header {
font-size: 1.1em;
font-family: sans-serif;
padding-left: 1em;
padding-top: 4px;
color: #660000;
}
.templateDiv {
border: none;
}
.dj_ie .infowindow .window .top .right .user .content {
position: relative;
}
.dj_ie .simpleInfoWindow .content {
position: relative;
}
#editorButton {
position: absolute;
z-index: 99;
top: 3px;
left: 170px;
width: 100px;
height: 25px;
}
.dojoxDock {
visibility: hidden;
}
#floatingEditor {
position: absolute;
top: 100px;
right: 100px;
width: 300px;
height: 100%;
max-height: 400px;
visibility: hidden;
z-index: 9;
}
.claro .dojoxFloatingMinimizeIcon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADWSURBVChTlVIhDoNAENyWalRtFQY0qh8AHKIkoO8DlRXoin4Cj0AgOd9UIflA+xA6Q7jkQhFlkuGWYYZd7tiN4yhEXdcnLBcwBkNqQA92YJPn+YfCFID5jPoGphRX0IIPhF5OEAR8870oitR1XfE8b3IYaK2lLEs/y7LjMAxPB4WCfqW5qiqxQzRTU0pR8yG9D7hwZomiiMtkMDBm8wyIGTAf+BNamIlwPxd/gx24dQlv7JkJ08nq0jPAfU5ssz3GItRxpAZs18ysqc0hnkWz+eA2/hoiXyTHZtKhdrvuAAAAAElFTkSuQmCC);
padding-right: 10px;
}
</style>
<script src="https://js.arcgis.com/3.29/"></script>
<script>
var map;
require([
"esri/map",
"esri/tasks/GeometryService",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/Color",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/dijit/editing/Editor",
"esri/dijit/editing/TemplatePicker",
"esri/config",
"dojo/i18n!esri/nls/jsapi",
"dojo/_base/array", "dojo/parser", "dojo/keys",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojox/layout/FloatingPane", "dijit/form/Button", "dojo/on", "dojo/dom",
"dijit/registry","dojo/domReady!"
], function (
Map, GeometryService,
ArcGISTiledMapServiceLayer, FeatureLayer,
Color, SimpleMarkerSymbol, SimpleLineSymbol,
Editor, TemplatePicker,
esriConfig, jsapiBundle,
arrayUtils, parser, keys, BorderContainer, ContentPane, FloatingPane, Button, on, dom,
registry
) {
parser.parse();
// snapping is enabled for this sample - change the tooltip to reflect this
jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start + "<br>Press <b>ALT</b> to enable snapping";
// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
esriConfig.defaults.io.proxyUrl = "/proxy/";
//This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
esriConfig.defaults.geometryService = new GeometryService(
"https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map = new Map("map", {
basemap: "satellite",
center: [-96.541, 38.351],
zoom: 14,
slider: false
});
map.on("layers-add-result", initEditor);
//add boundaries and place names
var responsePoints = new FeatureLayer(
"https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['*']
});
map.addLayers([responsePoints]);
function initEditor(evt) {
var templateLayers = arrayUtils.map(evt.layers, function (result) {
return result.layer;
});
var templatePicker = new TemplatePicker({
featureLayers: templateLayers,
grouping: true,
rows: "auto",
columns: 3
}, templateDiv);
templatePicker.startup();
var layers = arrayUtils.map(evt.layers, function (result) {
return {
featureLayer: result.layer
};
});
var settings = {
map: map,
templatePicker: templatePicker,
layerInfos: layers,
toolbarVisible: true,
createOptions: {
polylineDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYLINE],
polygonDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYGON,
Editor.CREATE_TOOL_CIRCLE,
Editor.CREATE_TOOL_TRIANGLE,
Editor.CREATE_TOOL_RECTANGLE
]
},
toolbarOptions: {
reshapeVisible: true
}
};
var params = {
settings: settings
};
var myEditor = new Editor(params, 'editorDiv');
//define snapping options
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CROSS,
15,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0, 0.5]),
5
),
null
);
map.enableSnapping({
snapPointSymbol: symbol,
tolerance: 20,
snapKey: keys.ALT
});
myEditor.startup();
}
on(dom.byId('editorButton'), "click", function () {
registry.byId("floatingEditor").show();
});
});
</script>
</head>
<body class="claro">
<div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
style="height:100%;height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">
Edit Hydrography
<button id="editorButton" type="button"> Editor Button</button>
</div>
<div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
</div>
<div id="floatingEditor" dojoType="dojox/layout/FloatingPane" title="Editor" dockTo="dock"
style="visibility:hidden;" closable="false" resizable="true" dockable="true">
<div id="editorDiv"></div>
<div id="templateDiv"></div>
</div>
</body>
</html>
great, you are fast!
That's what I was looking for
many many thanks