Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About KarstenRank
KarstenRank
Occasional Contributor III
since
07-04-2014
01-23-2024
173
Posts created
212
Kudos given
9
Solutions
117
Kudos received
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
My Ideas
(5 Idea Submissions)Latest Contributions by KarstenRank
|
POST
|
Hi, will Halo in dictionary smbolgy be supported like in ArcGIS Pro? In ArcGIS Pro Halo can be activated parts of the symbology. If you publish the dictionary style as web style, the Halo is no longer supported or shown on the map. This is eg useful for text to lift from a basemap. Greetings Karsten
... View more
01-14-2022
01:17 PM
|
1
|
1
|
368
|
|
BLOG
|
When will stream layer be available in List Widget?
... View more
01-10-2022
12:55 PM
|
0
|
0
|
10599
|
|
POST
|
If you publish the stand alone table as service (e.g. as csv or with ArcGIS Pro) you can use it in the dashboards. But I guess, the table does not refresh in an Arcade script.
... View more
01-05-2022
01:14 PM
|
1
|
0
|
1726
|
|
POST
|
Hi, I want to write a script that compares to web maps. One web maps consists of feature service, the other of the views of the feature services of map one. How can I get the related id to the feature service of a view with using the python api? Thanks a lot Karsten
... View more
12-12-2021
05:20 AM
|
0
|
1
|
423
|
|
POST
|
Hi, how can I get the extent of the features filtered by the time slider widget?
... View more
06-30-2021
10:44 AM
|
0
|
1
|
491
|
|
POST
|
Hi, I created a web app with the JavaScript Api 4.18 to show csv files on a web map with a time slider and a dgrid table. The table has a dependency to the map because of the view. The slider also has a dependency to the map because of the view. If I query the points with the time slider, the table shows all points that are in the shown extend. How can I achieve, that the table also shows the reduced points? Thanks for your help, Karsten <!DOCTYPE html>
<html>
<head>
<meta name="description" content="CSVViewer">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>CSVViewer</title>
<style>
html, body{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
font-family: "Helvetica Neue";
}
#viewDiv{
flex: 2;
width: 100%;
}
.header {
grid-area: header;
background: linear-gradient(to right, #007cb0, #001a4c);
}
#info,
#gridDisplay {
position: absolute;
bottom: 0;
left: 0;
height: 35%;
background-color: white;
border-color: grey;
width: 100%;
font-family: "Avenir Next W00", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
#info {
z-index: 90;
font-size: 16px;
padding-left: 20px;
}
#info * {
padding-right: 20px;
}
#gridDisplay {
z-index: 80;
}
.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
}
.dgrid .dgrid-scroller {
position: relative;
max-height: 200px;
overflow: auto;
}
.map {
grid-area: map;
}
.wrapper {
display: grid;
grid-template-rows: 25% 100% auto;
grid-template-areas:
"header"
"map";
width: 100vw;
height: 100%;
}
.box {
color: #fff;
padding: 10px;
font-size: 20px;
}
.container {
display: flex;
flex: 1;
width: 100%;
}
.containerT {
height: 30%;
width: 100%;
}
.hidden {
display: none;
}
@media only screen and (min-width: 544px) {
.wrapper {
grid-template-columns: 100% auto;
grid-template-rows: 40px auto;
grid-template-areas:
"header header"
" map";
}
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/css/main.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.18/dgrid/css/dgrid.css">
<script src="https://js.arcgis.com/4.18/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/CSVLayer",
"esri/Graphic",
"esri/widgets/Legend",
"esri/widgets/TimeSlider",
"esri/widgets/Expand",
"esri/widgets/BasemapGallery",
"esri/widgets/FeatureTable",
"esri/widgets/LayerList",
"dgrid/OnDemandGrid",
"dgrid/extensions/ColumnHider",
"dojo/store/Memory",
"dstore/legacy/StoreAdapter",
"dgrid/Selection"
], function(Map, MapView, CSVLayer, Graphic, Legend, TimeSlider,
Expand, BasemapGallery, FeatureTable, LayerList, OnDemandGrid,
ColumnHider, Memory, StoreAdapter, Selection) {
let map, view, csvLayer, csvLayerView, grid, node_table;
const gridDiv = document.getElementById("grid");
const infoDiv = document.getElementById("info");
// create new map, view and csvlayer
setupTheView();
const gridFields = ["__OBJECTID", "time", "depth", "mag",
"magType", "nst"];
//time,latitude,longitude,depth,mag,magType,nst,gap,dmin,rms,net,id,updated,place,type,horizontalError,depthError,magError,magNst,status,locationSource,magSource
// 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;
console.log("timeout start");
console.log(csvLayer.fullExtent);
//wait for the layerview to be done updating
csvLayerView.watch("updating", function(bool){
if(!bool){
popGrid();
console.log(csvLayer.timeInfo.fullTimeExtent.start);
console.log(csvLayer.timeInfo.fullTimeExtent.end);
}})
});
})
.catch(errorCallback);
/****************************************************
* Selects features from the csv layer that intersect
* a polygon that user drew using sketch view model
****************************************************/
function popGrid() {
view.graphics.removeAll();
if (csvLayerView) {
const query = {
where: "1=1",
outFields: ["*"]
};
console.log(csvLayerView);
// 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;
console.log(graphics.length);
// 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) {
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;
}
// 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;
}, {});
});
console.log(data);
// 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,
outSpatialReference: view.SpatialReference
};
// query the csvLayerView using the query set above
csvLayerView.queryFeatures(query).then(function(results) {
const graphics = results.features;
console.log(graphics);
// remove all graphics to make sure no selected graphics
view.graphics.removeAll();
view.goTo(graphics[0].geometry);
// create a new selected graphic
const selectedGraphic = new Graphic({
geometry: graphics[0].geometry,
symbol: {
type: "simple-marker",
style: "circle",
color: "orange",
size: "12px", // pixels
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 0],
width: 2 // points
}
}
});
// 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);
}
function setupTheView() {
map = new Map({ basemap: "gray"});
//-----------------------------------------
// Layer
//-----------------------------------------
const url = "https://developers.arcgis.com/javascript/latest/sample-code/layers-csv/live/earthquakes.csv";
const template = {
title: "Earthquake Info",
content: "Magnitude {mag} {type} hit {place} on {time}."
};
csvLayer = new CSVLayer({
url: url,
copyright: "USGS Earthquakes",
popupTemplate: template,
timeInfo: {
startField: "time"
},
outFields: "*"
});
view = new MapView({
container: "viewDiv",
map: map,
zoom: 3,
extent: csvLayer.fullExtent,
constraints: {
geometry: csvLayer.fullExten
}
});
map.add(csvLayer);
console.log("finished!");
//-----------------------------------------
// Widgets
//-----------------------------------------
// BaseMapGallery
var bgExpand = new Expand({
view: view,
content: new BasemapGallery({
view: view,
container: document.createElement("div")
})
});
// LayerList mit Legende
const llExpand = new Expand({
view: view,
content: new LayerList({
view: view,
listItemCreatedFunction: function (event) {
const item = event.item;
if (item.layer.type != "group") {
// don't show legend twice
item.panel = {
content: "legend",
open: true
};
}
}
})
});
// TimeSlider
// time slider widget initialization
const timeSlider = new TimeSlider({
container: document.createElement("div"),
view: view,
timeVisible: true, // show the time stamps on the timeslider
loop: true
});
view.whenLayerView(csvLayer).then(function (lv) {
// around up the full time extent to full hour
timeSlider.fullTimeExtent = csvLayer.timeInfo.fullTimeExtent.expandTo(
"days"
);
});
let timeSliderDropExpand = new Expand({
collapsedIconClass: "esri-icon-collapse",
expandIconClass: "esri-icon-time-clock",
expandTooltip: "Zeitschieberegler",
view: view,
content: timeSlider.container,
expanded: false
});
// TableList
//Button Tabelle
node_table = document.getElementById("Table");
// Create a <button> element
node_table.innerHTML ="<div class='esri-widget--button esri-widget esri-interactive' role='button';><span aria-hidden='true' role='presentation' class='esri-icon esri-icon-table'></span></div>";
node_table.id = "TableChange" ;
node_table.title="Tabelle ausblenden";
const TableChange = document.getElementById("TableChange");
TableChange.addEventListener("click", tabelleFunktion);
// Add widget to the top right corner of the view
view.ui.add([bgExpand, llExpand, timeSliderDropExpand, node_table], {
position: "top-right"
});
}
function errorCallback(error) {
console.log("error:", error)
}
function tabelleFunktion() {
if (tableContainer.style.display !== 'none') {
tableContainer.style.display = 'none';
node_table.title ="Tabelle einblenden"
}
else{
tableContainer.style.display = 'block';
node_table.title ="Tabelle ausblenden"}
}
});
</script>
</head>
<body>
<div id="Table"></div>
<div class="wrapper">
<div class="box header" id="titleDiv">Vorlage CSVViewer</div>
<div class="map" id="viewDiv"></div>
<div id="tableContainer" class="containerT">
<div id = "tableDiv">
<div id="info">
<span class="info">
<b>Tabelle wird geladen...</b>
</span>
<br />
</div>
<div id="gridDisplay">
<span class="info" id="featureCount"></span>
<div id="grid" class="dgrid dgrid-grid ui-widget"></div>
</div>
</div>
</div>
</div>
</body>
</html>
... View more
02-09-2021
01:38 PM
|
0
|
0
|
568
|
|
POST
|
The same result. It looks like that it takes to long for querying for the grid. If I inset a setTimeout the grid get filled: // 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;
console.log("timeout start");
setTimeout(function(){ popGrid(); }, 30000);
});
})
.catch(errorCallback);
... View more
01-25-2021
01:12 PM
|
0
|
2
|
3430
|
|
POST
|
Hi Robert, I have added the links to the newest API 4.18 in the solution example: <link rel="stylesheet" href="https://js.arcgis.com/4.18/dgrid/css/dgrid.css"/>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/css/main.css">
<script src="https://js.arcgis.com/4.18/"></script> The problem is, the grid is not filled? Do you know why? Greetings Karsten
... View more
01-25-2021
12:02 PM
|
0
|
4
|
3437
|
|
POST
|
Hi, I find the new point cluster within API 4.18 Point clustering - query clusters. How can I change the code and force the browse features popup opens first, not the summary popup. Thanks, Karsten
... View more
01-03-2021
08:33 AM
|
0
|
1
|
423
|
|
POST
|
Hi Christian, have a look at the new cluster options in Javascript API 1.8 https://developers.arcgis.com/javascript/latest/sample-code/featurereduction-cluster-query/index.html Greetings Karsten
... View more
12-25-2020
09:36 AM
|
1
|
0
|
617
|
|
POST
|
Hi, what about updateing the feature service created from the csv file? Overwriting feature layers | ArcGIS for Developers
... View more
09-17-2020
11:23 AM
|
1
|
1
|
3172
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 1 | 03-02-2023 12:33 PM | |
| 1 | 01-05-2022 01:14 PM | |
| 1 | 05-18-2022 09:33 AM | |
| 1 | 01-14-2022 01:17 PM | |
| 1 | 08-17-2018 11:48 AM |
Activity Feed
- Got a Kudo for Change Style for OGC WFS Layer on ArcGIS Online. 03-07-2024 02:12 AM
- Got a Kudo for Change Style for OGC WFS Layer on ArcGIS Online. 10-17-2023 12:30 AM
- Posted Re: Symbol Dictionary symbols support Halo on ArcGIS Experience Builder Questions. 10-12-2023 06:09 AM
- Posted Re: Transfer Expereince Builder to another organization on ArcGIS Experience Builder Questions. 09-25-2023 11:18 PM
- Kudoed Re: Transfer Expereince Builder to another organization for Jianxia. 09-18-2023 11:32 AM
- Got a Kudo for Change Style for OGC WFS Layer on ArcGIS Online. 08-29-2023 06:07 AM
- Kudoed Project Time Tracker for NakazdliWhuten. 08-13-2023 11:29 AM
- Got a Kudo for Re: Transfer Expereince Builder to another organization. 07-12-2023 10:08 PM
- Posted Re: Transfer Expereince Builder to another organization on ArcGIS Experience Builder Questions. 04-10-2023 12:22 PM
- Posted Re: Transfer Expereince Builder to another organization on ArcGIS Experience Builder Questions. 03-02-2023 12:33 PM
- Kudoed Re: Transfer Expereince Builder to another organization for MJBiazar. 03-02-2023 12:31 PM
- Got a Kudo for Re: Stand Alone table not available as Source in new Dashboards (10.9.1 Enterprise). 01-12-2023 03:44 PM
- Kudoed Enable Button with Link-to-View to open sidecar for AndreasEugster. 01-03-2023 08:34 AM
- Posted Create token for Portal with REST API in php on ArcGIS Enterprise Portal Questions. 12-04-2022 06:39 AM
- Kudoed Allow Arcade Expressions in Experience Builder for ZorbaConlen1. 07-19-2022 11:52 AM
- Kudoed Re: Simple test to check if returned value is a geometry object for Luke_Pinner. 05-29-2022 03:04 AM
- Got a Kudo for Re: Transfer of dashboard between organizations. 05-25-2022 07:46 AM
- Got a Kudo for Re: Arcade expression pop-up query. 05-18-2022 09:48 AM
- Posted Re: Arcade expression pop-up query on ArcGIS Online Questions. 05-18-2022 09:33 AM
- Posted Re: HTML Tags in Arcade Expressions for Popups on ArcGIS Enterprise Questions. 04-29-2022 05:46 AM
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
01-23-2024
09:18 PM
|