|
POST
|
Hi guys, I have layer which has one field "Images" and in this field i have image links from my shared folder (e.g. K:\images\image_1.jpg). How can i open this image in popup or in other window? I tried use <img src='{Images}'>, also make DIV in popupTemplate to have clickable content , but have no success. Any ideas and help please/ Thank you in advance
... View more
04-29-2020
09:20 AM
|
0
|
2
|
1146
|
|
POST
|
Hi guys I am trying to select polygon features using sketchViewModel, using this sample code. I removed CSV layer with FeatureLayer. But now, when i select features, in table i see only OBJECTID, it applies column headers for other fields, but without data. see Pic. for error and Code below. Thank you in advance. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Highlight features by geometry - 4.14</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.14/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#info,
#gridDisplay {
position: absolute;
bottom: 0;
left: 0;
height: 35%;
background-color: white;
border-color: grey;
width: 100%;
font-size: 14px;
}
#gridDisplay {
z-index: 80;
}
#info {
z-index: 90;
font-size: 16px;
padding-left: 20px;
}
#info * {
padding-right: 20px;
}
.info {
line-height: 20px;
padding-left: 5px !important;
}
.dgrid-header,
.dgrid-header-row {
background-color: #eee;
color: #57585a;
}
.dgrid-row-even {
background-color: #f7f8f8;
}
.dgrid-row-odd {
background-color: #efefef;
}
.dgrid-selected {
background: #b4daf5;
}
.dgrid-row {
border: none;
}
</style>
<script>
require([
"esri/WebMap",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/widgets/Sketch/SketchViewModel",
"esri/Graphic",
"esri/widgets/Legend",
"esri/widgets/Expand",
"esri/widgets/FeatureForm",
"dgrid/OnDemandGrid",
"dgrid/extensions/ColumnHider",
"dojo/store/Memory",
"dstore/legacy/StoreAdapter",
"dgrid/Selection"
], function(
WebMap,
MapView,
FeatureLayer,
GraphicsLayer,
SketchViewModel,
Graphic,
Legend,
Expand,
FeatureForm,
OnDemandGrid,
ColumnHider,
Memory,
StoreAdapter,
Selection
) {
let map,
view,
flLayer,
csvLayerView,
polygonGraphicsLayer,
sketchViewModel,
highlight,
grid;
const gridDiv = document.getElementById("grid");
const infoDiv = document.getElementById("info");
// create new map, view and csvlayer
setupTheView();
// create a new sketchviewmodel, setup it properties
// set up the click event for the select by polygon button
setUpSketchViewModel();
sketchViewModel.on("create", function(event) {
if (event.state === "complete") {
// this polygon will be used to query features that intersect it
polygonGraphicsLayer.remove(event.graphic);
selectFeatures(event.graphic.geometry);
}
});
const gridFields = [
"OBJECTID",
"Req_Code",
"abonentebis_raodenoba",
"dasaxeleba",
"Semqmneli",
"statusi"
];
// create a new datastore for the on demandgrid
// will be used to display attributes of selected features
const dataStore = new StoreAdapter({
objectStore: new Memory({
idProperty: "OBJECTID"
})
});
// create a grid with given columns once the csvlayer is loaded
csvLayer
.when(function() {
// create a grid with columns specified in gridFields variable
createGrid(csvLayer.fields);
// get a reference the csvlayerview when it is ready. It will used to do
// client side queries when user draws polygon to select features
view.whenLayerView(csvLayer).then(function(layerView) {
csvLayerView = layerView;
});
})
.catch(errorCallback);
/****************************************************
* Selects features from the csv layer that intersect
* a polygon that user drew using sketch view model
****************************************************/
function selectFeatures(geometry) {
view.graphics.removeAll();
if (csvLayerView) {
// create a query and set its geometry parameter to the
// polygon that was drawn on the view
const query = {
geometry: geometry,
outFields: ["*"]
};
// query graphics from the csv layer view. Geometry set for the query
// can be polygon for point features and only intersecting geometries are returned
csvLayerView
.queryFeatures(query)
.then(function(results) {
const graphics = results.features;
// if the grid div is displayed while query results does not
// return graphics then hide the grid div and show the instructions div
if (graphics.length > 0) {
// zoom to the extent of the polygon with factor 2
view.goTo(geometry.extent.expand(2));
gridDiv.style.zIndex = 90;
infoDiv.style.zIndex = 80;
document.getElementById("featureCount").innerHTML =
"<b>Showing attributes for " +
graphics.length.toString() +
" features </b>";
} else {
gridDiv.style.zIndex = 80;
infoDiv.style.zIndex = 90;
}
// remove existing highlighted features
if (highlight) {
highlight.remove();
}
// highlight query results
highlight = csvLayerView.highlight(graphics);
// get the attributes to display in the grid
const data = graphics.map(function(feature, i) {
return (
Object.keys(feature.attributes)
.filter(function(key) {
// get fields that exist in the grid
return gridFields.indexOf(key) !== -1;
})
// need to create key value pairs from the feature
// attributes so that info can be displayed in the grid
.reduce(function(obj, key) {
obj[key] = feature.attributes[key];
return obj;
}, {})
);
});
// set the datastore for the grid using the
// attributes we got for the query results
dataStore.objectStore.data = data;
grid.set("collection", dataStore);
})
.catch(errorCallback);
}
}
/************************************************
* fires when user clicks a row in the grid
* get the corresponding graphic and select it
*************************************************/
function selectFeatureFromGrid(event) {
// close view popup if it is open
view.popup.close();
// get the ObjectID value from the clicked row
const row = event.rows[0];
const id = row.data.OBJECTID;
// setup a query by specifying objectIds
const query = {
objectIds: [parseInt(id)],
outFields: ["*"],
returnGeometry: true
};
// query the csvLayerView using the query set above
csvLayerView
.queryFeatures(query)
.then(function(results) {
const graphics = results.features;
// remove all graphics to make sure no selected graphics
view.graphics.removeAll();
// create a new selected graphic
const selectedGraphic = new Graphic({
geometry: graphics[0].geometry,
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: "yellow",
style: "solid",
outline: {
color: "red",
width: 1
}
}
});
// add the selected graphic to the view
// this graphic corresponds to the row that was clicked
view.graphics.add(selectedGraphic);
})
.catch(errorCallback);
}
/************************************************
* Creates a new grid. Loops through poverty
* csvLayer's fields and creates grid columns
* Grid with selection and columnhider extensions
*************************************************/
function createGrid(fields) {
var columns = fields
.filter(function(field, i) {
if (gridFields.indexOf(field.name) !== -1) {
return field;
}
})
.map(function(field) {
if (field.name === "__OBJECTID") {
return {
field: field.name,
label: field.name,
sortable: true,
hidden: true
};
} else {
return {
field: field.name,
label: field.alias,
sortable: true
};
}
});
// create a new onDemandGrid with its selection and columnhider
// extensions. Set the columns of the grid to display attributes
// the hurricanes cvslayer
grid = new (OnDemandGrid.createSubclass([Selection, ColumnHider]))(
{
columns: columns
},
"grid"
);
// add a row-click listener on the grid. This will be used
// to highlight the corresponding feature on the view
grid.on("dgrid-select", selectFeatureFromGrid);
}
/************************************************************************
* Sets up the sketchViewModel. When user clicks on the select by polygon
* button sketchViewModel.create() method is called with polygon param.
************************************************************************/
function setUpSketchViewModel() {
// polygonGraphicsLayer will be used by the sketchviewmodel
// show the polygon being drawn on the view
polygonGraphicsLayer = new GraphicsLayer();
map.add(polygonGraphicsLayer);
// add the select by polygon button the view
view.ui.add("select-by-polygon", "top-left");
const selectButton = document.getElementById("select-by-polygon");
// click event for the button
selectButton.addEventListener("click", function() {
clearUpSelection();
view.popup.close();
// ready to draw a polygon
sketchViewModel.create("polygon");
});
// create a new sketch view model set its layer
sketchViewModel = new SketchViewModel({
view: view,
layer: polygonGraphicsLayer,
pointSymbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: "yellow",
style: "solid",
outline: {
color: "red",
width: 1
}
}
});
}
function clearUpSelection() {
view.graphics.removeAll();
grid.clearSelection();
}
/******************************************************
* Sets up the view. WebMap with winkel III projection
* basemap and hurricanes CsvLayer is added to the view.
******************************************************/
function setupTheView() {
const url =
"http://1ocalhost:6080/arcgis/rest/services/test/Request_Area/FeatureServer/0";
csvLayer = new FeatureLayer({
title: "Hurricanes",
url: url,
copyright: "GWP",
});
map = new WebMap({
// contains a basemap with a Winkel III projection
// the CSVLayer coordinates will re-project client-side
portalItem: {
id: "7d127cef99a44327b79f5185602b8b6b"
},
layers: [csvLayer]
});
view = new MapView({
container: "viewDiv",
map: map,
highlightOptions: {
color: "#2B65EC",
fillOpacity: 0.4
},
padding: {
bottom: infoDiv.clientHeight // Same value as the #infoDiv height in CSS
}
});
const legendExpand = new Expand({
view: view,
content: new Legend({
view: view,
style: "card"
})
});
view.ui.add(legendExpand, "top-left");
view.popup.watch("visible", function(newValue) {
if (newValue) {
clearUpSelection();
}
});
}
function errorCallback(error) {
console.log("error:", error);
}
});
</script>
</head>
<body>
<div id="viewDiv">
<div
id="select-by-polygon"
class="esri-widget esri-widget--button esri-widget esri-interactive"
title="Select features by polygon"
>
<span class="esri-icon-checkbox-unchecked"></span>
</div>
<div id="info" class="esri-widget">
<span class="info"> <b>Instructions</b> </span> <br />
<ul>
<li>
Select features using select by polygon tool. Attributes of selected
features will be displayed here.
</li>
<br />
<li>
Click on a row to select a feature associated with it or click on a
feature to display its popup.
</li>
</ul>
</div>
<div id="gridDisplay">
<span class="info" id="featureCount"></span>
<div id="grid"></div>
</div>
</div>
</body>
</html>
... View more
03-12-2020
05:41 AM
|
0
|
2
|
3089
|
|
POST
|
Hi Ken, Sorry for late response. You mean delete and add features with modified attributes?
... View more
03-12-2020
05:29 AM
|
0
|
0
|
2275
|
|
POST
|
Hi Ken, Can you show me a little snipet of code how to start?
... View more
02-24-2020
09:39 PM
|
0
|
2
|
2275
|
|
POST
|
Hi all, I have created feature table using pure java script CRUD, using hitTest i get my features attributes in table when i click on features on map. Also i did it using fetch, so if have any idea to use fetch URL will be useful. Now i want to update selected features attributes at the same time, like we can on desktop version select column, enter value hit enter or click and update selected features values. I know, i have to use Apply Edits, but how to update multiple features attributes at the same time. Any help appreciated. Thank you
... View more
02-24-2020
03:29 AM
|
0
|
4
|
2402
|
|
POST
|
Hi Egge-Jan, I use 4.14 version, i tried view.graphics.removeAll(), but it didn't work. It removes for one layer, but when i try to use it for muktuple it doesn't work.
... View more
02-03-2020
08:09 AM
|
0
|
1
|
6030
|
|
POST
|
Hi all, Can someone point me how to remove highlight from all features on map? I have several layers (5 layers) and i want to remove highlight at once from all them. Thank you in advance
... View more
02-03-2020
03:57 AM
|
0
|
5
|
6333
|
|
POST
|
Robert Scheitlin, GISP Robert, I did what i wanted, but without union, at this moment we do not need union anymore. Thank for help and coaching. Vakhtang
... View more
01-29-2020
09:58 PM
|
0
|
0
|
638
|
|
POST
|
Robert, Thank you again. I will try to get result and post what i get. Thank you. On Wed, Jan 29, 2020, 12:23 AM Robert Scheitlin, GISP <geonet@esri.com>
... View more
01-28-2020
12:26 PM
|
0
|
0
|
638
|
|
POST
|
Oops, you guessed right, i passed graphics. that is why i got "null" in log. Can you please explain how can i pass geometry or point me Sample or something like that? On Tue, Jan 28, 2020, 11:54 PM Robert Scheitlin, GISP <geonet@esri.com>
... View more
01-28-2020
12:14 PM
|
0
|
3
|
4396
|
|
POST
|
Robert, I tryied to merge graphics using geometryEngine.union, but had no result. How can i merge (dissolve, union) pfeatures array in one graphic?
... View more
01-28-2020
11:48 AM
|
0
|
5
|
4396
|
|
POST
|
Robert, Thank you very much for help. I do not kmow if i have to open new question. but i ask here and if needed i will open new question. When adding new features from one to another layer using this code, one field has same name and it values adds automaticaly from source layer (Layer2) to target layer (featureLayer). So i tried to add attributes with same name to graphics (pfeatures) as it has target layer (featureLayer)(e.g. field name "Req_Code") and add value e.g. "REQ-123", but it does not applies. in console.log it returns -, Req_Code: REQ-123". Code: pfeatures = results.features.map(function(graphica) {
graphica.symbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: "cyan",
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "black",
width: 1
},
};
pfeatures.attributes{
Req_Code:"REQ-123"
}
console.log(pfeatures)
... View more
01-28-2020
11:27 AM
|
0
|
7
|
4396
|
|
POST
|
Robert, I see I changed my code, now it applies empty attributes without geometry. Also if i do not mistake i already have defined graphic here (see row 24), can i use it for update graphics layer? if so, how? If no: How can i call "create-complete" for addGraphic? From this Query? "var query = HWLayer.createQuery();" tell me how please. P.S. Sorry for my bad skills, i study JavaScript myself and sometimes it is hard to connect some portion of code to next part. Thank you for your help, i really appreciate. view.on("click", function (event) {
view.hitTest(event).then(function (response) {
if (response.results.length) {
var graphic = response.results.filter(function (result) {
// check if the graphic belongs to the layer of interest
return result.graphic.layer === layer2;
})[0].graphic;
var attributes = graphic.attributes;
var name = attributes.Req_Code; }
var queryZebna = dom.byId("query-Zebna");
on(queryZebna, "click", function() {
queryMagistraluri()
.then(displayResults);});
function queryMagistraluri() {
var query = HWLayer.createQuery();
//query.returnGeometry = true;
//query.outFields = ["*"];
query.where = "Req_Code IS NULL";
query.outSpatialReference = view.spatialReference;
return HWLayer.queryFeatures(query)}
// display the query results in the view
function displayResults(results) {
console.log(results);
var pfeatures = results.features.map(function(graphica) {
graphica.symbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: "cyan",
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "black",
width: 1
},
};
return graphica
});
graphicsLayer.addMany(pfeatures);
console.log(graphicsLayer)
// Apply Edits აქ მუშაობს, მაგრამ მხოლოდ ამატებს ატრიბუტებს.
const edits = { //Fire the addFeatures function using the completed graphic
addFeatures: [graphicsLayer]
};
applyEdits(edits);
console.log(graphic);
view.goTo(pfeatures)
}
})
})
... View more
01-27-2020
06:39 AM
|
0
|
9
|
4396
|
|
POST
|
Thanks Robert, we will get latest version of ArcGIS Server soon and i will transfer all data an after that i will try again. Before that, i am trying to complete another task, i wanted to start working on that after "adding new polygon feature", but i try it before new ArcGIS Server. Take a look it please and help : https://community.esri.com/message/904126-updates-graphicsgraphicslayer-to-feature-layer-use-applyedits . Thank you.
... View more
01-24-2020
06:01 AM
|
0
|
0
|
2480
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 08-22-2022 11:57 PM | |
| 1 | 08-31-2022 12:41 AM | |
| 1 | 08-23-2022 02:49 AM | |
| 1 | 05-10-2022 05:12 AM | |
| 1 | 01-13-2022 10:03 AM |
| Online Status |
Offline
|
| Date Last Visited |
05-13-2025
03:20 AM
|