Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About MayurDodiya
MayurDodiya
Frequent Contributor
since
07-04-2014
08-21-2025
79
Posts created
9
Kudos given
2
Solutions
17
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 MayurDodiya
|
POST
|
Hi, I am following tutorial Creating a Map app from here Create a mapping app | Calcite Design System | ArcGIS Developers . I want to add collapsible floating panel at bottom of page for AttributeTable/FeatureTable widget like below example. There is calcite-shell-centre-row and not getting where to add in the page to align to the bottom of page. I tried to add inside calcite-shell tag however it is added below view Div, it doesn't fit into the page and added scrollbar to page. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calcite Demo</title>
<style>
body {
display: flex;
}
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#headerDiv {
text-align: center;
height: 30px;
}
.calcite-tutorial {
--calcite-ui-brand: #0079c1;
--calcite-ui-brand-hover: #0079c1;
}
.calcite-tutorial calcite-chip {
--calcite-ui-foreground-2: var(--calcite-ui-brand);
--calcite-ui-text-1: white;
margin-inline-end: 0.75rem;
}
.esri-view .esri-view-surface--inset-outline:focus::after {
outline: none !important;
}
</style>
<script
type="module"
src="https://js.arcgis.com/calcite-components/1.0.0-beta.99/calcite.esm.js"
></script>
<link
rel="stylesheet"
type="text/css"
href="https://js.arcgis.com/calcite-components/1.0.0-beta.99/calcite.css"
/>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.25/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.25/"></script>
</head>
<body>
<script>
require([
"esri/Map",
"esri/WebMap",
"esri/views/MapView",
"esri/widgets/Bookmarks",
"esri/widgets/BasemapGallery",
"esri/widgets/LayerList",
"esri/widgets/Legend",
"esri/widgets/Print",
"esri/widgets/Home",
"esri/widgets/ScaleBar",
"esri/layers/FeatureLayer",
"esri/symbols/WebStyleSymbol",
"esri/rest/support/TopFeaturesQuery",
"esri/rest/support/TopFilter",
], (
Map,
WebMap,
MapView,
Bookmarks,
BasemapGallery,
LayerList,
Legend,
Print,
Home,
ScaleBar,
FeatureLayer,
WebStyleSymbol,
TopFeaturesQuery,
TopFilter
) =>
(async () => {
// const map = new Map({
// basemap: "streets-vector", // Basemap layer service
// });
const layer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_National_Parks_Annual_Visitation/FeatureServer/0",
outFields: ["*"],
renderer: await setRenderer(),
popupTemplate: createPopupTemplate(),
});
const map = new Map({
basemap: "streets-navigation-vector",
layers: [layer],
});
// const map = new WebMap({
// portalItem: {
// id: "210c5b77056846808c7a5ce93920be81",
// },
// });
const view = new MapView({
map: map,
//center: [-118.805, 34.027], // Longitude, latitude
//zoom: 13, // Zoom level
container: "viewDiv", // Div element
padding: {
left: 49,
},
center: [-120, 45],
zoom: 3,
});
const basemaps = new BasemapGallery({
view,
container: "basemaps-container",
});
const bookmarks = new Bookmarks({
view,
container: "bookmarks-container",
editingEnabled: true,
});
const layerList = new LayerList({
view,
selectionEnabled: true,
container: "layers-container",
});
const legend = new Legend({
view,
container: "legend-container",
});
const print = new Print({
view,
container: "print-container",
});
const scaleBar = new ScaleBar({
view: view,
unit: "dual", // The scale bar displays both metric and non-metric units.
});
view.ui.add(scaleBar, {
position: "bottom-left",
});
let homeWidget = new Home({
view: view,
});
view.ui.add(homeWidget, "top-left");
view.ui.move("zoom", "top-left");
const layerView = await view.whenLayerView(layer);
view.when(() => {
// map.when(() => {
let activeWidget;
const handleActionBarClick = ({ target }) => {
if (target.tagName !== "CALCITE-ACTION") {
return;
}
if (activeWidget) {
document.querySelector(
`[data-action-id=${activeWidget}]`
).active = false;
document.querySelector(
`[data-panel-id=${activeWidget}]`
).hidden = true;
}
const nextWidget = target.dataset.actionId;
if (nextWidget !== activeWidget) {
document.querySelector(
`[data-action-id=${nextWidget}]`
).active = true;
document.querySelector(
`[data-panel-id=${nextWidget}]`
).hidden = false;
activeWidget = nextWidget;
} else {
activeWidget = null;
}
};
document
.querySelector("calcite-action-bar")
.addEventListener("click", handleActionBarClick);
let actionBarExpanded = false;
document.addEventListener("calciteActionBarToggle", (event) => {
actionBarExpanded = !actionBarExpanded;
view.padding = {
left: actionBarExpanded ? 135 : 45,
};
});
});
async function setRenderer() {
const symbol = new WebStyleSymbol({
name: "park",
styleName: "Esri2DPointSymbolsStyle",
});
const cimSymbol = await symbol.fetchCIMSymbol();
cimSymbol.data.symbol.symbolLayers[0].size = 24;
cimSymbol.data.symbol.symbolLayers[1].size = 0;
return {
type: "simple",
symbol: cimSymbol,
};
}
function createPopupTemplate() {
return {
title: "{Park}",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "TOTAL",
label: "Total visits",
format: { digitSeparator: true },
},
{
fieldName: "F2018",
label: "2018",
format: { digitSeparator: true },
},
{
fieldName: "F2019",
label: "2019",
format: { digitSeparator: true },
},
{
fieldName: "F2020",
label: "2020",
format: { digitSeparator: true },
},
],
},
],
};
}
const controlVisitedTypeEl = document.getElementById(
"control-visited-type-el"
);
const controlYearEl = document.getElementById("control-year-el");
const controlCountPerStateEl = document.getElementById(
"control-count-per-state-el"
);
const controlResetEl = document.getElementById("control-reset-el");
controlVisitedTypeEl.addEventListener(
"calciteRadioGroupChange",
async (event) => {
(orderBy = event.target.value), filterItems();
}
);
controlYearEl.addEventListener(
"calciteSelectChange",
async (event) => {
(year = event.target.value), filterItems();
}
);
controlCountPerStateEl.addEventListener(
"calciteSliderChange",
async (event) => {
(count = event.target.value), filterItems();
}
);
controlResetEl.addEventListener("click", async () => resetFilters());
const countDefault = 1;
const orderByDefault = "DESC";
const yearDefault = "TOTAL";
let count = countDefault;
let orderBy = orderByDefault;
let year = yearDefault;
async function filterItems() {
const query = new TopFeaturesQuery({
topFilter: new TopFilter({
topCount: count,
groupByFields: ["State"],
orderByFields: `${year} ${orderBy}`,
}),
orderByFields: `${year} ${orderBy}`,
outFields: ["State, TOTAL, F2018, F2019, F2020, Park"],
returnGeometry: true,
cacheHint: false,
});
document.getElementById("result-list").innerHTML = "";
document.getElementById("result-block").open = true;
const results = await layer.queryTopFeatures(query);
graphics = results.features;
graphics.forEach((result, index) => {
const attributes = result.attributes;
const item = document.createElement("calcite-list-item");
const chip = document.createElement("calcite-chip");
chip.value = attributes.State;
chip.slot = "content-end";
chip.scale = "s";
chip.innerText = attributes.State;
item.label = attributes.Park;
item.value = index;
item.description = `${attributes[
yearDefault
].toLocaleString()} visitors`;
item.addEventListener("click", () =>
resultClickHandler(result, index)
);
item.appendChild(chip);
document.getElementById("result-list").appendChild(item);
});
query.orderByFields = [""];
const objectIds = await layer.queryTopObjectIds(query);
layerView.filter = { objectIds };
determineResetActionState();
}
function resultClickHandler(result, index) {
const popup = graphics && graphics[parseInt(index, 10)];
if (popup) {
view.popup.open({
features: [popup],
location: result.geometry,
});
view.goTo(
{
center: [result.geometry.longitude, result.geometry.latitude],
zoom: 4,
},
{ duration: 400 }
);
}
}
function determineResetActionState() {
if (
count !== countDefault ||
orderBy !== orderByDefault ||
year !== yearDefault
) {
controlResetEl.removeAttribute("disabled");
controlResetEl.indicator = true;
} else {
controlResetEl.disabled = true;
controlResetEl.removeAttribute("indicator");
}
}
function resetFilters() {
count = countDefault;
orderBy = orderByDefault;
year = yearDefault;
const activeRadioGroupItem = document.querySelector(
`calcite-radio-group-item[value=${orderByDefault}]`
);
activeRadioGroupItem.checked = true;
controlYearEl.value = yearDefault;
controlCountPerStateEl.value = countDefault;
filterItems();
}
filterItems();
})());
</script>
<calcite-shell content-behind class="calcite-tutorial">
<div id="#headerDiv" slot="header">
<!-- <header>
<h3>ArcGIS Display Map</h3>
</header> -->
<calcite-panel heading="ArcGIS Display Map"></calcite-panel>
</div>
<calcite-shell-panel
slot="panel-start"
position="start"
detached
collapse="true"
detachedHeightScale="s"
>
<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="print"
icon="print"
text="Print"
></calcite-action>
<calcite-action
data-action-id="information"
icon="filter"
text="Filter"
>
</calcite-action>
</calcite-action-bar>
<calcite-panel
heading="Layers"
height-scale="l"
data-panel-id="layers"
hidden
>
<div id="layers-container"></div>
</calcite-panel>
<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="Bookmarks"
height-scale="l"
data-panel-id="bookmarks"
hidden
>
<div id="bookmarks-container"></div>
</calcite-panel>
<calcite-panel
heading="Print"
height-scale="l"
data-panel-id="print"
hidden
>
<div id="print-container"></div>
</calcite-panel>
<calcite-panel
heading="National Park Visitation"
data-panel-id="information"
hidden
>
<calcite-block heading="Filters" open>
<div slot="control">
<calcite-action
disabled
icon="reset"
id="control-reset-el"
></calcite-action>
<calcite-tooltip
label="Reset to defaults"
reference-element="control-reset-el"
position="bottom"
>
Reset to defaults
</calcite-tooltip>
</div>
<calcite-label>
Data type, per state
<calcite-radio-group id="control-visited-type-el" width="full">
<calcite-radio-group-item value="DESC" checked
>Most visited</calcite-radio-group-item
>
<calcite-radio-group-item value="ASC"
>Least visited</calcite-radio-group-item
>
</calcite-radio-group>
</calcite-label>
<calcite-label>
Year data to display
<calcite-select id="control-year-el">
<calcite-option
label="Total of all time"
value="TOTAL"
></calcite-option>
<calcite-option label="2018" value="F2018"></calcite-option>
<calcite-option label="2019" value="F2019"></calcite-option>
<calcite-option label="2020" value="F2020"></calcite-option>
</calcite-select>
</calcite-label>
<calcite-label>
Max parks per state
<calcite-slider
id="control-count-per-state-el"
label-ticks
ticks="1"
min="1"
max="5"
></calcite-slider>
</calcite-label>
</calcite-block>
<calcite-block collapsible heading="Results" id="result-block">
<calcite-list id="result-list"></calcite-list>
</calcite-block>
</calcite-panel>
</calcite-shell-panel>
<div id="viewDiv"></div>
<calcite-shell-center-row></calcite-shell-center-row>
<!-- <footer slot="footer">ArcGIS JavaScript Maps SDk for JavaScript</footer> -->
</calcite-shell>
</body>
</html>
... View more
01-11-2023
10:57 PM
|
1
|
6
|
3057
|
|
POST
|
Hi, I have created application using WAB 2.23 Developer Edition Foldable Theme, There are couple of custom widgets has been added to application, as my custom widgets contains 2 textboxes and 2 buttons and default height of widget covers big map area. Tried to inspect elements and played with CSS but none worked, Is there anyway We can set Height to specific widgets ? Thanks, Mayur Dodiya
... View more
06-05-2022
11:40 PM
|
0
|
0
|
528
|
|
POST
|
Hi, How to move LayerToggle widget in headercontroller for foldable theme? Where to add in config.json ? Thanks,
... View more
08-04-2021
02:09 AM
|
0
|
1
|
1270
|
|
POST
|
Hi, Looking for Calcite app starter template similar to this https://jsapi-app-calcite-414.surge.sh/ Calcite app Templates has been removed from arcgis-cli and no longer option available to generate the calcite template. Looking for same design concept for app
... View more
02-18-2021
01:04 AM
|
0
|
0
|
638
|
|
POST
|
Hi, I have ordered the feature name in legend as below. I would like to show the same order in the feature list of Info summary widget. I see the option in display settings group feature by renderer but that add the group panel expand/collapse to see the feature name. How to show same order in the info summary feature list configured in legend ? Thanks, Mayur
... View more
06-30-2020
03:28 AM
|
0
|
0
|
610
|
|
POST
|
Hi, I have configured the app using 2.8 developer edition version. I have Info Summary widget as below. Currently it is showing lightgray background color on mouseover, when I mouseout it will remove lightgray background color. When I select feature from list I would like to keep background color selected as it is so user can see the selected project in list. When I select another feature from list I would like to remove previously selected feature item list background color and add background color for new selected feature item list. Any idea has anyone done this before ? Thanks, Mayur Dodiya
... View more
05-10-2020
03:21 AM
|
0
|
0
|
538
|
|
POST
|
Hi, I have app configured Info summary widget on WAB version 2.8 developer edition. I have all the web map layers includes (point, polyline, polygon) configured in widget. I would like to zoom to the feature on map when I click on feature list of Info Summary. Currently, it is highlighting and show the popup, but not zoom In to the feature. Thanks, Mayur
... View more
04-30-2020
04:05 AM
|
0
|
0
|
591
|
|
POST
|
Hi, I have Near Me widget in app created using Web App Builder Developer edition 2.15 with Portal 10.7.1 I have enabled Current Location button in widget, It works great, However when I move on the field with mobile device, it doesn't update my current location and generate buffer of new location. Is it possible to add tracking/stop tracking location in Near Me widget so that when you move on the field it should generate buffer with new location and highlights the features/projects ? Where should I add code to start/stop tracking location ? Is anybody implemented on Near Me Widget? Thanks, Mayur
... View more
01-28-2020
08:16 AM
|
0
|
0
|
546
|
|
POST
|
Hi Robert, That's perfect! Now I can see the buttons in white color. Thank you so much. Thanks, Mayur
... View more
01-22-2020
03:27 AM
|
0
|
0
|
2168
|
|
POST
|
Hi Robert, Sorry for confusion, I mean Record Number, Previous - Next , Maximize and close button in Popup title bar. I tried put css in /jimu.js/css but it doesn't change the color popup.css dojo-override.css You have idea where should I change to make those title bar button color in white ? Thanks, Mayur
... View more
01-18-2020
10:01 PM
|
0
|
2
|
2168
|
|
POST
|
Hi, I set up Web App Builder Developer Edition 2.14 created app using TabTheme, applied custom color (#88165b) for my application and deployed on IIS server. I am trying to change text color of popup title to white but it doesn't change. I tried inspect using developer tools, made changes to default.css, common.css, dojo-override.css ... Where should I put below css to change the title color of Popup .esriPopup .titlePane { color:white; } Thanks, Mayur
... View more
01-16-2020
12:06 AM
|
0
|
4
|
2401
|
|
POST
|
Hi, I have two layers, both layers contains field called "TreesNo". I would like to get SUM of fields from both layers and show in Middle Text of Indicator element. Is it possible to do in Operations Dashboard Indicator element ? Thanks, Mayur
... View more
01-05-2020
03:29 AM
|
1
|
1
|
2251
|
|
POST
|
Hi, I have requirement to take multiple photos with lat/long of image, audio note of image and display the multiple image location on map along with photos attachment for the single point survey. For example (single survey with multiple photos at multiple location) : Let's say I am at the survey location A. I then need to take multiple photos with lat/long and audio note for each image.so, take first photo at the survey location A, now for second photo will go to another different location to take photos for the same single point survey location A. I have enabled beginrepeat endrepeat in survey form for multiple photos and audio note for the image to get image lat/long I put pulldata function in the survey form All the photos attachment, lat/long of image and audio note go to related table, I added survey layer to the web map and see the survey location. Now I would like to show Image location also on map along with photos attachment to the single survey? How to do that ? Survey Layer Related table Thanks, Mayur
... View more
12-24-2019
05:03 AM
|
0
|
0
|
884
|
|
POST
|
Hi Tanu, They are coming from different worskspace, Parcel layer from Geodatabase enterprise Oracle 11g and View from SQL Server (Non-Spatial) database. Thanks, Mayur
... View more
12-13-2019
02:43 AM
|
0
|
1
|
3151
|
|
POST
|
Hi Thomas, Support Advanced Queries : false in rest directory. The Data Source is ArcGIS Enterprise Geodatabase Oracle 11g. Layer "Parcel" is join with "View " based on "PIN" field and published on ArcGIS Server. Thanks, Mayur
... View more
12-10-2019
02:53 AM
|
0
|
3
|
3151
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 1 | 01-11-2023 10:57 PM | |
| 1 | 01-05-2020 03:29 AM | |
| 1 | 01-25-2018 11:47 PM | |
| 1 | 01-22-2018 08:34 AM | |
| 10 | 12-27-2016 08:35 PM |
Activity Feed
- Got a Kudo for Add collapsible Floating Panel at bottom for FeatureTable widget ?. 01-12-2023 01:29 AM
- Posted Add collapsible Floating Panel at bottom for FeatureTable widget ? on Calcite Design System Questions. 01-11-2023 10:57 PM
- Posted Foldable Theme set Widgets Height ? on ArcGIS Web AppBuilder Questions. 06-05-2022 11:40 PM
- Tagged Foldable Theme set Widgets Height ? on ArcGIS Web AppBuilder Questions. 06-05-2022 11:40 PM
- Got a Kudo for Indicator Element - How to get Sum of fields from two different layer ?. 01-18-2022 10:53 AM
- Posted Re: Opened Widget(eSearch) is closed when I toggle map layer using Layer Toggle Button Widget. on ArcGIS Web AppBuilder Questions. 08-04-2021 02:09 AM
- Posted Calcite App Starter Template Application ? on ArcGIS JavaScript Maps SDK Questions. 02-18-2021 01:04 AM
- Got a Kudo for Re: ArcGIS Desktop 10.4 - The search window has disappeared. 11-11-2020 02:06 AM
- Got a Kudo for Re: Portal for ArcGIS - Enterprise Group ?. 11-11-2020 02:05 AM
- Kudoed Re: Invalid html content in json request body for PramodHarithsa1. 10-08-2020 01:33 AM
- Posted Info Summary widget show feature list in order set in legend ? on ArcGIS Web AppBuilder Questions. 06-30-2020 03:28 AM
- Posted Info Summary widget feature item list selection background color ? on ArcGIS Web AppBuilder Questions. 05-10-2020 03:21 AM
- Posted Info summary zoom to feature by clicking on list ? on ArcGIS Web AppBuilder Questions. 04-30-2020 04:05 AM
- Got a Kudo for Portal for ArcGIS - Enterprise Group ?. 02-26-2020 01:35 PM
- Posted Near Me Widget Tracking location ? on ArcGIS Web AppBuilder Questions. 01-28-2020 08:16 AM
- Posted Re: Popup title text Color ? on ArcGIS Web AppBuilder Questions. 01-22-2020 03:27 AM
- Posted Re: Popup title text Color ? on ArcGIS Web AppBuilder Questions. 01-18-2020 10:01 PM
- Posted Popup title text Color ? on ArcGIS Web AppBuilder Questions. 01-16-2020 12:06 AM
- Kudoed Operations Dashboard Developer Edition for JaromHlebasko. 01-14-2020 01:03 AM
- Kudoed (Implemented) Set default photo name in Survey123 Connect/web designer for JamesWilson2. 01-13-2020 04:12 AM
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
08-21-2025
10:50 AM
|