I am stuck with setting up the template-picker layer for editing tools, the layer from which the user picks its symbols (point, line etc) to be placed in the map. In the API reference, this is usually the wildfire layer (Layer: Wildfire Response Points (ID: 0) ). Now I want to use one of my own layers instead, mainly to set up a customized toolset to pick from.
I imagine it is necessary to first define a unique value renderer to create a subset of unique symbols from my feature layer. I provided such renderer after referencing my feature layer by service URL in the app - although I see that a unique value renderer is already stored within the wildfire layers.
First question: Is this workflow correct?
Second question: How can I set up my feature layer to contain a unique value renderer in its service - without having ArcGIS Server (only Desktop)?
I attached my code at the bottom. Layers are added and styled correctly, but the symbol range does not appear in the side panel (where icons get picked). Instead the panel is empty except for the label and the default wildfire layer. I can not figure out, where the layers are fed into the template-picker or how my code differs from the default layer.
Third question: What's wrong with my set-up?
At least, fourth question: Where is the user input stored, e.g. the drawn symbols or provided attachments? Does my layer have to be editable, can this be toggled and what are the requirements?
Code:
(based on Editor widget with simple toolbar)
<!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>Edit rivers and waterbodies</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.14/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; }
</style>
<script src="http://js.arcgis.com/3.14/"></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/symbols/SimpleFillSymbol",
"esri/renderers/UniqueValueRenderer",
"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",
"dojo/domReady!"
], function(
Map, GeometryService,
ArcGISTiledMapServiceLayer, FeatureLayer,
Color, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
UniqueValueRenderer,
Editor, TemplatePicker,
esriConfig, jsapiBundle,
arrayUtils, parser, keys
) {
parser.parse();
// https://developers.arcgis.com/javascript/jssamples/ed_simpletoolbar.html
// 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/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("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
// add map
map = new Map("map", {
basemap: "topo",
center: [10.56, 51.738],
zoom: 13,
slider: false
});
map.on("layers-add-result", initEditor); // !important
//add layer and stuff
var labels = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
map.addLayer(labels);
var responsePoints = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['*']
});
// my layers
var testPoints2 = new FeatureLayer("http://services5.arcgis.com/0tjzL07CGvc7jUJw/arcgis/rest/services/SAMPLEZ/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['Descr']
});
var testPoints = new FeatureLayer("http://services5.arcgis.com/0tjzL07CGvc7jUJw/arcgis/rest/services/SAMPLEZ/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['Descr']
});
// set up unique value renderer
var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);
var renderer = new UniqueValueRenderer(defaultSymbol, "Descr");
renderer.addValue("PG1", new SimpleMarkerSymbol().setColor(new Color([255, 0, 0])));
renderer.addValue("Glacier1", new SimpleMarkerSymbol().setColor(new Color([0, 255, 0, 0.5])));
renderer.addValue("Lake1", new SimpleMarkerSymbol().setColor(new Color([0, 0, 255, 0.5])));
testPoints.setRenderer(renderer); // nimmt default symbol aus tabelle, aber punkte werden gestylt
map.addLayers([responsePoints, testPoints2, testPoints]); //has to be here or breaks
// end of layer def. and add to map
function initEditor(evt) {
// var templateLayers
var templateLayers = arrayUtils.map(evt.layers, function(result){
return result.layer;
});
// sets up template window --> https://developers.arcgis.com/javascript/jsapi/templatepicker-amd.html
var templatePicker = new TemplatePicker({
featureLayers: templateLayers, testPoints, // sets icon layer? XX
grouping: true,
rows: "auto",
columns: 3 // sets icon columns in side bar
}, "templateDiv");
templatePicker.startup();
// var layers
var layers = arrayUtils.map(evt.layers, function(result) {
return { featureLayer: result.layer };
}); // end layers
var settings = {
map: map,
templatePicker: templatePicker,
layerInfos: layers,
toolbarVisible: false, // true | false, toggles the toolbar
createOptions: {
polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],
polygonDrawTools: [ ]
},
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();
}
});
</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
</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>
