POST
|
Hi @cadgism . Hmm... I'm not sure how to do that. The way this code is written it's appending the new menu item to an existing list so it will default to the last position. Because this topic is marked complete, though, I'm not sure many other people will see your question. Perhaps try posting as a new topic to get some attention? Good luck!
... View more
a week ago
|
0
|
0
|
50
|
POST
|
That's exactly what I needed @Mac_And_Cheese . Thanks to you both for the assist!
... View more
02-08-2024
12:44 PM
|
0
|
0
|
227
|
POST
|
Thanks @omar-marji . That gets me most of the way there. The action-bar slot, though, anchors the tools to the edge of the window though instead of floating them on top of the map with a little bit of a buffer around it. (See screen shot.) In my full app, I already have a large action bar on the left side of the screen full of common tools. These 4 tools in the action bar I'm trying to highlight for the user as the most important. Seems like this is exactly what the action pad should do. I just can't get it to do it without trading the unsightly big grey space to the right of it versus just making it an action bar instead of an action pad.
... View more
02-08-2024
07:47 AM
|
0
|
0
|
257
|
POST
|
I have a calcite action pad that I would like to have a vertical alignment and be floating at the upper right side of the page. I am getting an unfortunate extra block of space along with the action pad, or the shell panel I have it nested in. Anyone know what I need to do to get rid of this? I tried playing with the expanded-max-width setting to no avail. Here is a codepen that illustrates the problem: https://codepen.io/sdearmondmaps/pen/gOEjNZw
... View more
02-07-2024
04:58 PM
|
1
|
5
|
356
|
POST
|
That worked and makes much more sense. Thanks very much @Justin_Greco and @JeffreyThompson2 . I appreciate the help.
... View more
01-17-2024
08:37 PM
|
0
|
0
|
272
|
POST
|
Unfortunately not, Justin_Greco, but thanks for trying. There are items selected in both screen shots. The addition of the new menu item seems to remove the zoom-to-selected functionality.
... View more
01-17-2024
07:31 AM
|
0
|
6
|
336
|
POST
|
I have a web app built with the arcgis js 4 api that uses the featuretable widget. I would like to enable some of the stock menu items on the feature table such as zoom to selected features. This works fine until I try to add additional custom items to the menu. Then the options related to selected features in the table (zoom to selection, show selection, clear selection, etc.) are no longer available. Does anyone know how to add a custom menu item and keep this functionality? // Create the feature table
const featureTable = new FeatureTable({
view: view,
layer: featureLayer,
visibleElements: {
menu: true,
// Autocast to VisibleElements
menuItems: {
clearSelection: true,
refreshData: true,
toggleColumns: true,
selectedRecordsShowAllToggle: true,
selectedRecordsShowSelectedToggle: true,
zoomToSelection: true
}
},
container: "tableDiv"
});
//Adds custom menu options to featuretable
featureTable.when().then(() => {
const buttonMenuItem1 = new ButtonMenuItem ({
label: "Download Table",
clickFunction: function (event) {
setupCSV();
}
});
const buttonMenu = new ButtonMenu ({
iconClass: "esri-icon-handle-horizontal",
items: []
});
featureTable.menu.items.forEach(element => {
console.log(element.label);
buttonMenu.items.push(element);
});
buttonMenu.items.push(buttonMenuItem1);
featureTable.menuConfig = buttonMenu;
});
... View more
01-14-2024
08:40 PM
|
0
|
9
|
524
|
POST
|
Figured this out. I was nesting the shell panels incorrectly. If it helps anyone in the future, this worked: <calcite-shell content-behind hidden>
<h2 id="header-title" slot="header">Title</h2>
<calcite-shell-panel slot="panel-end" display-mode="float" width-scale="s">
<!-- Defines action pad floating at upper right over map -->
<calcite-action-pad layout="horizontal" expand-disabled="true" position="end">
<calcite-action id="Add Data" text="Add Data" icon="upload"></calcite-action>
<!-- put all your actions for the action pad here -->
</calcite-action-pad>
</calcite-shell-panel>
<calcite-shell-panel slot="panel-start" display-mode="float">
<!-- Defines action bar anchored a left side of map -->
<calcite-action-bar slot="action-bar">
<calcite-action data-action-id="layers" icon="layers" text="Layers"></calcite-action>
<!-- put all your actions for the action bar here-->
</calcite-action-bar>
</calcite-shell-panel>
... View more
09-14-2023
09:24 AM
|
0
|
0
|
498
|
POST
|
I have a simple app with a calcite action bar on the left edge of the screen and I would like an action pad on the right. Can anyone advise me how to tweak my code below to nudge the action pad to the upper right? <html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Test Site
</title>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css"/>
<link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.4.3/calcite.css" />
<script src="https://js.arcgis.com/4.27/"></script>
<script src="https://js.arcgis.com/calcite-components/1.4.3/calcite.esm.js" type="module"></script>
<script src="js/main.js"></script>
</head>
<body>
<!-- <calcite-loader></calcite-loader> -->
<calcite-shell content-behind hidden>
<h2 id="header-title" slot="header">Title</h2>
<calcite-shell-panel slot="panel-start" display-mode="float">
<!-- Defines action pad floating at upper right over map -->
<calcite-action-pad layout="horizontal" expand-disabled="true" position="end">
<calcite-action-group>
<calcite-action text="Add" icon="plus"></calcite-action>
<calcite-action text="Save" icon="save"></calcite-action>
</calcite-action-group>
<calcite-action-group>
<calcite-action text="Layers" icon="layers"></calcite-action>
<calcite-action text="Basemaps" icon="layer-basemap"></calcite-action>
</calcite-action-group>
</calcite-action-pad>
<!-- Defines action bar anchored a left side of map -->
<calcite-action-bar slot="action-bar">
<calcite-action data-action-id="layers" icon="layers" text="Layers"></calcite-action>
<calcite-action data-action-id="basemaps" icon="basemap" text="Basemaps"></calcite-action>
<calcite-action data-action-id="legend" icon="legend" text="Legend"></calcite-action>
<calcite-action data-action-id="bookmarks" icon="bookmark" text="Bookmarks"></calcite-action>
<calcite-action data-action-id="measure" icon="measure" text="Measure"></calcite-action>
<calcite-action data-action-id="sketch" icon="freehand" text="Sketch"></calcite-action>
<calcite-action data-action-id="print" icon="print" text="Print"></calcite-action>
</calcite-action-bar>
<!-- Map-specific panels for left action bar -->
<calcite-panel heading="Basemaps" height-scale="l" data-panel-id="basemaps" hidden>
<div id="basemaps-container"></div>
</calcite-panel>
<calcite-panel heading="Legend" height-scale="l" data-panel-id="legend" hidden>
<div id="legend-container"></div>
</calcite-panel>
<calcite-panel heading="Layers" height-scale="l" data-panel-id="layers" hidden>
<div id="layers-container"></div>
</calcite-panel>
<calcite-panel heading="Bookmarks" height-scale="l" data-panel-id="bookmarks" hidden>
<div id="bookmarks-container"></div>
</calcite-panel>
<calcite-panel heading="Sketch" height-scale="l" data-panel-id="sketch" hidden>
<div id="sketch-container"></div>
</calcite-panel>
<calcite-panel heading="Print" height-scale="l" data-panel-id="print" hidden>
<div id="print-container"></div>
</calcite-panel>
</calcite-shell-panel>
<div id="viewDiv"></div>
</div>
</calcite-shell>
</body>
</html>
... View more
09-11-2023
10:28 PM
|
0
|
1
|
538
|
IDEA
|
When using Collector with a high-accuracy GPS unit, I would appreciate being able to get the same accuracy fields when averaging locations as when not. Values such a PDOP and number of satellites could be averaged. Fix type is still useful information, even if only the first value collected. I am often required to provide this metadata to clients and we are forced to turn averaging off in order to comply. even though I feel we get better data with it on.
... View more
09-22-2020
11:59 AM
|
1
|
0
|
542
|
POST
|
Thank you Robert! You put me on the right track. I also had to remove the selection-change trigger from my LoadKML function and that did the trick. //This function will use a url stored in the attribute to load a kml into the map
function loadKML() {
console.log("Entered loadKMLs function");
//map.infoWindow.on("selection-change", function() {
var selectedFeature = map.infoWindow.getSelectedFeature();
if (selectedFeature && selectedFeature.attributes.kml_prev.includes("http")) {
console.log(selectedFeature.attributes.kml_prev);
var kmlUrl = selectedFeature.attributes.kml_prev;
var kml = new KMLLayer(kmlUrl, {
id: "la_" + kmlUrl.substring(kmlUrl.lastIndexOf('/') + 1)
});
map.addLayer(kml);
kml.on("load", function() {
domStyle.set("loading", "display", "none");
});
}
//});
}
... View more
09-16-2020
04:45 PM
|
0
|
0
|
1142
|
POST
|
I have created a simple widget for use in Web AppBuilder for Developers 2.15. The widget provides the user a list of layers to add to the map (currently containing one layer). The layer in question is a feature layer that contains urls to kml files provided in a field in the attribute table. What I am trying to accomplish is to have the user click on a feature and get a popup box describing the feature and also a button to load the kml into the map. The user can then click the button to load the KML into the map if desired. It's all working splendidly, except the kml is loading when the feature is selected rather than when Load KML button is clicked. Does anyone have a suggestion on how I might fix this? define([ 'dojo/_base/declare', 'jimu/BaseWidget', 'jimu/loaderplugins/jquery-loader!https://code.jquery.com/jquery-git1.min.js', 'jimu/WidgetManager', 'jimu/PanelManager', 'esri/map', 'esri/layers/ArcGISDynamicMapServiceLayer', 'esri/layers/KMLLayer', 'esri/dijit/Popup', 'esri/dijit/PopupTemplate', 'dojo/dom-construct', 'dojo/query', 'dojo/_base/array', 'dojo/dom', 'dojo/parser', 'dojo/ready', 'dojo/on' ], function( declare, BaseWidget, $, WidgetManager, PanelManager, map, ArcGISDynamicMapServiceLayer, KMLLayer, Popup, PopupTemplate, domConstruct, query, arrayUtils, dom, parser, ready, on ) { //To create a widget, you need to derive from BaseWidget. return declare([BaseWidget], { baseClass: 'jimu-widget-kmlloader', postCreate: function() { this.inherited(arguments); console.log('postCreate'); }, startup: function() { this.inherited(arguments); //establish the map object var map = this.map; //here's what happens if the 'load data' button is clicked $('.jimu-widget-use-jquery .dataloader').click(function(){ var lyrCnt = 0; var myLyrList = []; if (document.getElementById("chb_coastSurvs").checked == true) { lyrCnt++; myLyrList.push("coastSurvs"); } if (lyrCnt == 0) { alert("Please choose the layers you wish to add to the map."); } else { document.getElementById("btn_datadestroyer").disabled = false; document.getElementById("btn_dataloader").disabled = true; loadLAData(myLyrList); } }); //This functio loads the layers the user has selected function loadLAData(myLyrs) { if (myLyrs.includes("coastSurvs")) { console.log("Loading Coast Surveys"); var coastSurvsLyr = new ArcGISDynamicMapServiceLayer("https://data.myserver.com/arcgis/rest/services/base/NOAACoastalSurveys/MapServer", { visible: true, id: 'la_coastSurvs', }); //Here's a pop-up template for the index layer console.log("setting up popup templates"); //Set up button to load kml var kmlBtn = dojo.create("button", { "id": "kmlButton", "class": "action", "innerHTML": "Load KML", }, dojo.query(".actionList", map.infoWindow.domNode)[0]); //when the button is clicked register a function that will run on(kmlBtn, "click", loadKML()); var templateCoastSurv = new PopupTemplate({ title: "{surv_code}", description: "<p>Description: {surv_desc}</p>" + "<p>Date: {surv_date}</p>" + "<p>Scale: {surv_scale}</p>" + "<p><a href='{kml_prev}'>KML Preview</a></p>", fieldInfos: [ {fieldName: "surv_code", visible: true}, {fieldName: "surv_desc", visible: true}, {fieldName: "surv_date", visible: true, digitSeparator: false}, {fieldName: "surv_scale", visible: true, digitSeparator: true}, {fieldName: "kml_prev", visible: true} ] }); coastSurvsLyr.setInfoTemplates({ 0: {infoTemplate: templateCoastSurv}, }); map.addLayer(coastSurvsLyr); } } //This function will use a url stored in the attribute to load a kml into the map function loadKML() { console.log("Entered loadKMLs function"); map.infoWindow.on("selection-change", function() { var selectedFeature = map.infoWindow.getSelectedFeature(); if (selectedFeature && selectedFeature.attributes.kml_prev.includes("http")) { console.log(selectedFeature.attributes.kml_prev); var kmlUrl = selectedFeature.attributes.kml_prev; var kml = new KMLLayer(kmlUrl, { id: "la_" + kmlUrl.substring(kmlUrl.lastIndexOf('/') + 1) }); map.addLayer(kml); kml.on("load", function() { domStyle.set("loading", "display", "none"); }); } }); } //here's what happens if the 'clear data' button is clicked $('.jimu-widget-use-jquery .datadestroyer').click(function(){ //remove all temporary layers from the map lyrsToRemove = []; for (var lyrID of map.layerIds) { if (lyrID.includes("la_") == true) { console.log("remove " + lyrID); lyrsToRemove.push(lyrID); } } for (var lyrName of lyrsToRemove) { var myLyr = map.getLayer(lyrName); if (myLyr) { map.removeLayer(myLyr); } } //clean up the html elements document.getElementById("chb_coastSurvs").checked = false; document.getElementById("btn_datadestroyer").disabled = true; document.getElementById("btn_dataloader").disabled = false; }); } }); });
... View more
09-13-2020
11:06 AM
|
0
|
2
|
1227
|
POST
|
Thank you for your help, Undral! That did the trick.
... View more
04-30-2019
09:07 PM
|
0
|
0
|
961
|
POST
|
I have a Living Atlas layer shared on my portal (not accessible outside my intranet sadly). The layer includes some pre-built raster functions. What I'm trying to do is load the layer into a webmap using the 3.28 ArcGIS JS API and apply a specific raster function to affect the appearance. Based on my reading here and here, it seems like this should be possible. The layer loads just fine but the raster function is not being applied. It's coming in as the default grey-scale stretch symbology and with no helpful errors in the console to help me along. Can anyone point me in the right direction? <!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>Raster Function Test</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
<style>
html,
body,
#mapDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/3.28/"></script>
<script>
require([
'esri/map',
'esri/layers/ArcGISImageServiceLayer',
'esri/layers/ImageServiceParameters',
'esri/layers/RasterFunction',
'dojo/domReady!'
],
function(
Map,
ArcGISImageServiceLayer,
ImageServiceParameters,
RasterFunction
) {
var map = new Map("mapDiv", {
basemap: "topo",
center: [-122.45, 37.75],
zoom: 13,
});
var serviceRFT = new RasterFunction({
functionName: "Slope_Degrees_Map",
variableName: "Raster"
});
var params = new ImageServiceParameters();
params.noData = 0;
var slopeImageLyr = new ArcGISImageServiceLayer("https://data.farwestern.com/portal/sharing/servers/a1ba14d09df14f42ad6ca3c4bcebf3b4/rest/services/WorldElevation/Terrain/ImageServer", {
visible: true,
id: 'la_slope',
opacity: 0.7,
renderingRule: serviceRFT,
imageServiceParameters: params
});
map.addLayer(slopeImageLyr);
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
... View more
04-26-2019
06:36 PM
|
0
|
2
|
1191
|
Title | Kudos | Posted |
---|---|---|
1 | 02-07-2024 04:58 PM | |
1 | 09-22-2020 11:59 AM | |
1 | 07-24-2017 11:11 AM | |
1 | 04-19-2017 10:35 AM | |
1 | 03-21-2017 12:18 PM |
Online Status |
Offline
|
Date Last Visited |
a week ago
|