Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About MaartenManders
MaartenManders
New Contributor
since
02-17-2015
11-11-2020
3
Posts created
0
Kudos given
0
Solutions
0
Kudos received
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
My Ideas
(0 Idea Submissions)Latest Contributions by MaartenManders
|
POST
|
This is the complete code used in the aforementioned sandbox. <!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.12/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.12/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.12/"></script>
<script>
var map;
require([
"esri/map",
"esri/tasks/GeometryService",
"esri/toolbars/edit",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/Color",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/dijit/editing/Editor",
"esri/dijit/editing/TemplatePicker",
"esri/graphic", "esri/dijit/PopupTemplate", "esri/request", "esri/geometry/Point", "esri/symbols/TextSymbol", "esri/renderers/SimpleRenderer",
"esri/layers/LabelLayer",
"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, Edit,
ArcGISTiledMapServiceLayer, FeatureLayer,
Color, SimpleMarkerSymbol, SimpleLineSymbol,
Editor, TemplatePicker, Graphic, PopupTemplate, esriRequest, Point, TextSymbol, SimpleRenderer, LabelLayer,
esriConfig, jsapiBundle,
arrayUtils, parser, keys
) {
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/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");
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 labels = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
map.addLayer(labels);
var rivers = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['*']
});
var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['*']
});
map.addLayers([waterbodies,rivers]);
on(rivers,"click", function(){
map.setInfoWindowOnClick(false);
});
on(rivers, "before-apply-edits", function(){
map.setInfoWindowOnClick(false);
});
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
}
};
//create a feature collection for the flickr photos
var featureCollection = {
"layerDefinition": null,
"featureSet": {
"features": [],
"geometryType": "esriGeometryPoint"
}
};
featureCollection.layerDefinition = {
"geometryType": "esriGeometryPoint",
"objectIdField": "ObjectID",
"drawingInfo": {
"renderer": {
"type": "simple",
"symbol": {
"type": "esriPMS",
"url": "images/flickr.png",
"contentType": "image/png",
"width": 15,
"height": 15
}
}
},
"fields": [{
"name": "ObjectID",
"alias": "ObjectID",
"type": "esriFieldTypeOID"
}, {
"name": "description",
"alias": "Description",
"type": "esriFieldTypeString"
}, {
"name": "title",
"alias": "Title",
"type": "esriFieldTypeString"
}]
};
//define a popup template
var popupTemplate = new PopupTemplate({
title: "{title}",
description: "{description}"
});
//create a feature layer based on the feature collection
featureLayer = new FeatureLayer(featureCollection, {
id: 'flickrLayer',
infoTemplate: popupTemplate
});
featureLayer.on("click", function(){
//enable info window on click
map.setInfoWindowOnClick(true);
});
// featureLayer.on("click", function(evt) {
// var center = evt.graphic.geometry;
// map.infoWindow.setFeatures([evt.graphic]);
// map.infoWindow.show(center);
// });
map.addLayer(featureLayer);
var symbol = new esri.symbol.TextSymbol();
var renderer = new esri.renderer.SimpleRenderer(symbol);
var labelLayer = new esri.layers.LabelLayer();
labelLayer.addFeatureLayer(featureLayer, renderer, "${CITY_NAME}");
map.addLayer(labelLayer);
requestPhotos();
function requestPhotos() {
//get geotagged photos from flickr
//tags=flower&tagmode=all
var requestHandle = esriRequest({
url: "http://api.flickr.com/services/feeds/geo?&format=json",
callbackParamName: "jsoncallback"
});
requestHandle.then(requestSucceeded, requestFailed);
}
function requestSucceeded(response, io) {
//loop through the items and add to the feature layer
var features = [];
arrayUtils.forEach(response.items, function(item) {
var attr = {};
attr["description"] = item.description;
attr["title"] = item.title ? item.title : "Flickr Photo";
var geometry = new Point(item);
var graphic = new Graphic(geometry);
graphic.setAttributes(attr);
features.push(graphic);
});
featureLayer.applyEdits(features, null, null);
}
function requestFailed(error) {
console.log('failed');
}
labelLayer.disableMouseEvents();
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>
... View more
03-06-2015
01:19 AM
|
0
|
0
|
467
|
|
POST
|
Thanks for your reply. It resolved the issue of the pop up hiding, but when clicking on an editable graphic its infoWindow now displays no editable information but instead shows 'No information avalailable'.
... View more
03-04-2015
05:12 AM
|
0
|
2
|
467
|
|
POST
|
I have an issue where using the Editor + TemplatePicker causes the feature layer's (that is not editable) pop up template to not display or only briefly when using this code: featureLayer.on("click", function(evt) {
var center = evt.graphic.geometry;
map.infoWindow.setFeatures([evt.graphic]);
map.infoWindow.show(center);
}); Also I have a problem where the label layer's labels are editable, I managed to disable this by adding the code below. I don't know if there's a better way. labelLayer.disableMouseEvents(); The full code I inserted in this sandbox after settings variable: //create a feature collection for the flickr photos
var featureCollection = {
"layerDefinition": null,
"featureSet": {
"features": [],
"geometryType": "esriGeometryPoint"
}
};
featureCollection.layerDefinition = {
"geometryType": "esriGeometryPoint",
"objectIdField": "ObjectID",
"drawingInfo": {
"renderer": {
"type": "simple",
"symbol": {
"type": "esriPMS",
"url": "images/flickr.png",
"contentType": "image/png",
"width": 15,
"height": 15
}
}
},
"fields": [{
"name": "ObjectID",
"alias": "ObjectID",
"type": "esriFieldTypeOID"
}, {
"name": "description",
"alias": "Description",
"type": "esriFieldTypeString"
}, {
"name": "title",
"alias": "Title",
"type": "esriFieldTypeString"
}]
};
//define a popup template
var popupTemplate = new PopupTemplate({
title: "{title}",
description: "{description}"
});
//create a feature layer based on the feature collection
featureLayer = new FeatureLayer(featureCollection, {
id: 'flickrLayer',
infoTemplate: popupTemplate
});
featureLayer.on("click", function(evt) {
var center = evt.graphic.geometry;
map.infoWindow.setFeatures([evt.graphic]);
map.infoWindow.show(center);
});
map.addLayer(featureLayer);
var symbol = new esri.symbol.TextSymbol();
var renderer = new esri.renderer.SimpleRenderer(symbol);
var labelLayer = new esri.layers.LabelLayer();
labelLayer.addFeatureLayer(featureLayer, renderer, "${CITY_NAME}");
map.addLayer(labelLayer);
requestPhotos();
function requestPhotos() {
//get geotagged photos from flickr
//tags=flower&tagmode=all
var requestHandle = esriRequest({
url: "http://api.flickr.com/services/feeds/geo?&format=json",
callbackParamName: "jsoncallback"
});
requestHandle.then(requestSucceeded, requestFailed);
}
function requestSucceeded(response, io) {
//loop through the items and add to the feature layer
var features = [];
arrayUtils.forEach(response.items, function(item) {
var attr = {};
attr["description"] = item.description;
attr["title"] = item.title ? item.title : "Flickr Photo";
var geometry = new Point(item);
var graphic = new Graphic(geometry);
graphic.setAttributes(attr);
features.push(graphic);
});
featureLayer.applyEdits(features, null, null);
}
function requestFailed(error) {
console.log('failed');
}
labelLayer.disableMouseEvents();
... View more
02-25-2015
03:32 AM
|
0
|
5
|
4386
|
Activity Feed
- Posted Re: Editor conflicts with unrelated feature layer's popup template on ArcGIS JavaScript Maps SDK Questions. 03-06-2015 01:19 AM
- Posted Re: Editor conflicts with unrelated feature layer's popup template on ArcGIS JavaScript Maps SDK Questions. 03-04-2015 05:12 AM
- Posted Editor conflicts with unrelated feature layer's popup template on ArcGIS JavaScript Maps SDK Questions. 02-25-2015 03:32 AM
- Tagged Editor conflicts with unrelated feature layer's popup template on ArcGIS JavaScript Maps SDK Questions. 02-25-2015 03:32 AM
- Tagged Editor conflicts with unrelated feature layer's popup template on ArcGIS JavaScript Maps SDK Questions. 02-25-2015 03:32 AM
- Tagged Editor conflicts with unrelated feature layer's popup template on ArcGIS JavaScript Maps SDK Questions. 02-25-2015 03:32 AM
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
11-11-2020
02:25 AM
|