Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- All Communities
- :
- Developers
- :
- JavaScript Maps SDK
- :
- JavaScript Maps SDK Questions
- :
- Expand Issues on widgets
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
06-03-2024
08:51 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I inherited this application... Its a .net app with some JS in it... a very simple map....
I have a few widgets in the map ... Legend, Basemap, LayerList
When I click on the widget after the page first loads I get the intended result... it opens in the map and gives me my selections:
I then click the Point in the map and once again I get the intended result... the popup is embedded in the map...
The problem is that after clicking the Feature in the map and closing the popup table and then going back to either of the widgets it no longer opens in the map rather its like a huge side bar that opens...
AND it only shows the required choices once I make the browser window really small...
Is there a particular piece of code that I can look for that would force this side bar opening? I have been trying to hunt this down and cant seem to find anything that would be causing this..
Any thoughts would be greatly appreciated....
Solved! Go to Solution.
1 Solution
Accepted Solutions
06-04-2024
09:39 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
It appears the issue was with css and using the "
esri-view-width-xsmall
I removed this and the expand widgets started working as I expected... and as a result the docking of the popup was not working as expected. As a result I move the popup box outside the map into a DIV and worked from there...
It appears the CSS was making the page believe it was xsmall and as a result it opened the expenad widgets in a side pane and the popup in full with docking format... this is not what I wanted ... as a result I move the popup outside the map
This is the post that dealt with moving it outside the map
https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/popup-with-attachements-outside-m...
6 Replies
06-03-2024
09:44 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Do you know which arcgis js version its using? Do you have any code you can share?
06-03-2024
10:11 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
<script src="https://js.arcgis.com/4.26/"></script>
There are 2 maps here 2nd one around line 372... this is as far as I have been looking at this point...
So weird because as show in image above when the side panel opens there are now values in it.. but if I minimize the screen and do again they then appear... then resize to max and they show up again... so weird... I hate reengineering someone's work... And to boot im not a full time programmer...
let gisResults = {
latitude: 0.0,
longitude: 0.0,
golbalID: "",
id: ""
}
var gisInputs = {
mapconrol: "",
apikey: "",
token: "",
activity: "",
services: "",
layernames: ""
}
var view;
var graphicsLayer;
var job = "";
var dotnetRef;
var activity = "";
window.dotNetToJs = {
setDotNetReference: function (dotNetReference) {
dotnetRef = dotNetReference;
},
renderApplication: function (gisInputs) {
require(["esri/widgets/Search", "esri/Basemap", "esri/widgets/FeatureTable", "esri/config", "esri/widgets/Legend",
"esri/rest/support/Query", "esri/widgets/Fullscreen", "esri/widgets/Expand", "esri/widgets/LayerList", "esri/widgets/BasemapGallery", "esri/widgets/Popup",
"esri/Map", "esri/views/MapView", "esri/Graphic", "esri/geometry/Point",
"esri/layers/FeatureLayer", "esri/core/reactiveUtils"],
function (Search, Basemap, FeatureTable, esriConfig, Legend,
Query, Fullscreen, Expand, LayerList, BasemapGallery, Popup,
Map, MapView, Graphic, Point,
FeatureLayer, { when, watch }) {
const map = new Map({
basemap: "streets-vector"
});
const view = new MapView({
map: map,
//container: "applicationView"
container: gisInputs.mapconrol
});
// point to show coordinates, lat/long passed in from blazor
const point = {
type: "point",
longitude: gisinputs.longitude,
latitude: gisinputs.latitude
};
//create graphic for mouse point click
const pointGraphic = new Graphic({
geometry: point,
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: [0, 0, 139],
outline: {
color: [255, 255, 255],
width: 1
}
}
});
if (gisinputs.status == 'Denied' || gisinputs.status == 'Submitted') {
when(
() => view.ready,
() => view.goTo({
center: [gisinputs.longitude, gisinputs.latitude],
zoom: 15
}).then(view.graphics.add(pointGraphic)));
}
else if (gisinputs.applicationNumber) {
esriConfig.request.interceptors.push({
// set the `urls` property to the URL of the FeatureLayer so that this
// interceptor only applies to requests made to the FeatureLayer URL
urls: gisinputs.service,
// use the BeforeInterceptorCallback to add token to query
before: function (params) {
params.requestOptions.query = params.requestOptions.query || {};
params.requestOptions.query.token = gisinputs.token;
},
});
var layer = new FeatureLayer({
url: gisinputs.service,
popupEnabled: true,
outFields: ["*"],
popupTemplate: GISConfig.popUps[gisinputs.layer],
});
layer.title = "GIS SIGN INSPECTION";
map.add(layer);
// create a new instance of a FeatureTable
const featureTable = new FeatureTable({
view: view,
layer: layer,
visibleElements: {
// Autocast to VisibleElements
menuItems: {
clearSelection: false,
refreshData: true,
toggleColumns: true,
selectedRecordsShowAllToggle: false,
selectedRecordsShowSelectedToggle: false,
zoomToSelection: true
}
},
highlightEnabled: true,
multiSortEnabled: false,
tableTemplate: {
columnTemplates: [
{
type: "field",
fieldName: "APPLICATIONNUMBER",
label: "APPLICATION No."
},
{
type: "field",
fieldName: "PERMITSTATUS",
label: "GIS PERMIT STATUS"
},
{
type: "field",
fieldName: "DATEINSPECTED",
label: "DATE INSPECTED",
visible: false
},
{
type: "field",
fieldName: "INSPECTOR",
label: "INSPECTOR"
},
{
type: "field",
fieldName: "CONDITION",
label: "CONDITION"
},
{
type: "field",
fieldName: "PROPERTYOWNER",
label: "PROPERTYOWNER",
visible: false
},
{
type: "field",
fieldName: "COMMENTS",
label: "COMMENTS",
visible: false
},
{
type: "field",
fieldName: "ROUTE",
label: "ROUTE",
visible: false
},
{
type: "field",
fieldName: "EDITOR",
label: "EDITOR",
visible: false
},
{
type: "field",
fieldName: "EDITDATE",
label: "EDIT DATE",
visible: false
}
]
},
container: document.getElementById("tableDiv")
});
// FullScreen Widget
fullscreen = new Fullscreen({
view: view
});
view.ui.add(fullscreen, "top-right");
//==============================================================
const searchWidget = new Search({
view: view,
includeDefaultSources: true,
enableInfoWindow: false,
popupEnabled: false,
})
// Adds the search widget below other elements in
// the top left corner of the view
view.ui.add(searchWidget, {
position: "top-left",
index: 0
});
const basemaps = new BasemapGallery({
view: view,
container: "basemaps-container",
source: [Basemap.fromId("osm"), Basemap.fromId("streets-vector"), Basemap.fromId("hybrid")]
});
const bgExpand = new Expand({
view: view,
content: basemaps
});
view.ui.add(bgExpand, {
position: "top-right"//,
//index: 0
});
//--------------------------------
let legend = new Legend({
view: view
});
const bgExpand2 = new Expand({
view: view,
content: legend
});
view.ui.add(bgExpand2, "bottom-right");
//--------------------------------
let layerList = new LayerList({
container: "LayerList-container",
view: view
});
const layerListExpand = new Expand({
//expandIconClass: "esri-icon-layer-list",
view: view,
content: layerList
});
view.ui.add(layerListExpand, "top-right");
//--------------------------------
//*** Add div element to show coordates ***//
var coordsWidget = document.createElement("div");
coordsWidget.id = "coordsWidget";
coordsWidget.className = "esri-widget esri-component";
coordsWidget.style.padding = "7px 15px 5px";
view.ui.add(coordsWidget, "bottom-right");
//*** Update lat, lon, zoom and scale ***//
function showCoordinates(pt) {
const point = new Point({
latitude: pt.latitude,
longitude: pt.longitude,
spatialReference: { wkid: 4269 }
})
var coords = "Lat/Lon " + point.latitude.toFixed(4) + " " + point.longitude.toFixed(4)
coordsWidget.innerHTML = coords;
}
//*** Add event and show center coordinates after the view is finished moving e.g. zoom, pan ***//
view.watch(["stationary"], function () {
showCoordinates(view.center);
});
//*** Add event to show mouse coordinates on click and move ***//
view.on(["pointer-down", "pointer-move"], function (evt) {
showCoordinates(view.toMap({ x: evt.x, y: evt.y }));
});
//==============================================================
view.popup.dockOptions = {
// Disable the dock button so users cannot undock the popup
buttonEnabled: false,
dockEnabled: true,
collapseEnabled: false,
position: 'bottom-center',
// Dock the popup when the size of the view is less than or equal to 600x1000 pixels
breakpoint: {
width: 2000,
height: 2000
}
};
// ==============================================================
// ==============================================================
//var editCSS = document.createElement('style')
//addEventListener('resize', (event) => {
// if (innerWidth > 600) {
// //mapview.classList.add('esri-view-width-xsmall');
// mapview.classList.add('esri-view-width-xsmall');
// };
// if (innerHeight > 1000) {
// editCSS.innerHTML = ".esri-popup__content {height: 350px;}";
// //editCSS.innerHTML = ".esri-popup__content2 {height: 50px;}";
// document.body.appendChild(editCSS);
// }
// else {
// editCSS.innerHTML = ".esri-popup__content {height: 145px;}";
// //editCSS.innerHTML = ".esri-popup__content2 {height: 45px;}";
// document.body.appendChild(editCSS);
// };
//});
// ==================================================================
//const mapview = document.getElementById("applicationView");
//const mapview = document.getElementById(gisInputs.mapconrol);
console.log(innerWidth);
const mapview = document.getElementById(gisInputs.mapconrol);
console.log(mapview);
//==========================================================================
const query = new Query();
query.where = "APPLICATIONNUMBER = " + gisinputs.applicationNumber;
query.outFields = ["*"];
query.returnGeometry = true;
console.log(query.where);
view.whenLayerView(layer)
.then(function (layerView) {
// The layerview for the layer
console.log(layerView);
layer.queryFeatures(query).then(function (results) {
if (results.features.length > 0) {
const features = results.features;
console.log(features);
view.goTo({ geometry: features[0].geometry, zoom: 15 });
featureTable.filterGeometry = features[0].geometry;
featureTable.selectRows(features);
}
else {
view.goTo({
center: [gisinputs.longitude, gisinputs.latitude],
zoom: 15
}).then(view.graphics.add(pointGraphic));
}
}).catch(function (error) {
console.log("query failed: ", error);
});
})
.catch(function (error) {
// An error occurred during the layerview creation
console.log(error);
});
}
else {
when(
() => view.ready,
() => view.goTo({
center: [gisinputs.longitude, gisinputs.latitude],
zoom: 15
}).then(view.graphics.add(pointGraphic)));
}
}
)
},
rendermap: function (codeBlock, gisInputs) {
require([
"esri/Basemap", "esri/widgets/Legend",
"esri/config",
"esri/request",
"esri/Map",
"esri/WebMap",
"esri/views/MapView",
"esri/portal/Portal",
"esri/layers/BaseDynamicLayer",
"esri/widgets/BasemapGallery",
"esri/widgets/LayerList",
"esri/widgets/BasemapGallery/support/PortalBasemapsSource",
"esri/widgets/Expand",
"esri/widgets/Fullscreen",
"esri/widgets/Search",
"esri/widgets/Search/SearchSource",
"esri/widgets/Popup",
"esri/geometry/geometryEngine",
"esri/geometry/Point",
"esri/rest/support/Query",
"esri/Graphic",
"esri/rest/locator",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer",
"esri/rest/identify",
"esri/popup/content/CustomContent",
"esri/PopupTemplate"
], function (Basemap, Legend, esriConfig, esriRequest, Map, WebMap, MapView, Portal, BaseDynamicLayer, BasemapGallery, LayerList, PortalBasemapsSource,
Expand, Fullscreen, Search, SearchSource, Popup, geometryEngine, Point, Query, Graphic, locator, GraphicsLayer, FeatureLayer,
identify, CustomContent, PopupTemplate) {
//Keys and Tokens
//esriConfig.apiKey = gisInputs.apikey;
activity = gisInputs.activity;
var visibleLayer = (gisInputs.activity == "permit") ? "Signs" : "Violations";
var map = new Map({ basemap: "streets-vector" });
view = new MapView({
map: map,
center: [-78.69722314051039, 37.592781470650486],
zoom: 7, // scale: 72223.819286
container: gisInputs.mapconrol,
constraints: {
snapToZoom: false
}
});
if (gisInputs.latitude && gisInputs.longitude) {
view.center = [gisInputs.longitude, gisInputs.latitude];
view.zoom = 15;
};
// FullScreen Widget
fullscreen = new Fullscreen({
view: view
});
view.ui.add(fullscreen, "top-right");
// ========================================================================================================
const searchWidget = new Search({
view: view,
includeDefaultSources: true,
enableInfoWindow: false,
popupEnabled: false,
})
// Adds the search widget below other elements in
// the top left corner of the view
view.ui.add(searchWidget, {
position: "top-left",
index: 0
});
const basemaps = new BasemapGallery({
view: view,
container: "basemaps-container",
source: [Basemap.fromId("osm"), Basemap.fromId("streets-vector"), Basemap.fromId("hybrid")]
});
const bgExpand = new Expand({
view: view,
content: basemaps
});
view.ui.add(bgExpand, {
position: "top-right"//,
//index: 0
});
//--------------------------------
let legend = new Legend({
view: view
});
const bgExpand2 = new Expand({
view: view,
content: legend
});
view.ui.add(bgExpand2, "bottom-left");
//--------------------------------
let layerList = new LayerList({
container: "LayerList-container",
view: view
});
const layerListExpand = new Expand({
//expandIconClass: "esri-icon-layer-list",
view: view,
content: layerList
});
view.ui.add(layerListExpand, "top-right");
// ========================================================================================================
//*** Add div element to show coordates ***//
var coordsWidget = document.createElement("div");
coordsWidget.id = "coordsWidget";
coordsWidget.className = "esri-widget esri-component";
coordsWidget.style.padding = "7px 15px 5px";
view.ui.add(coordsWidget, "bottom-right");
//*** Update lat, lon, zoom and scale ***//
function showCoordinates(pt) {
const point = new Point({
latitude: pt.latitude,
longitude: pt.longitude,
spatialReference: { wkid: 4269 }
})
var coords = "Lat/Lon " + point.latitude.toFixed(4) + " " + point.longitude.toFixed(4)
coordsWidget.innerHTML = coords;
}
//*** Add event and show center coordinates after the view is finished moving e.g. zoom, pan ***//
view.watch(["stationary"], function () {
showCoordinates(view.center);
});
//*** Add event to show mouse coordinates on click and move ***//
view.on(["pointer-down", "pointer-move"], function (evt) {
showCoordinates(view.toMap({ x: evt.x, y: evt.y }));
});
// Button with Event to open Popups
var describe = document.createElement('div');
describe.className = "esri-icon-description esri-widget--button esri-widget esri-interactive";
describe.addEventListener('click', function (evt) {
job = "Indentify"
view.popup.autoOpenEnabled = true;
})
view.ui.add(describe, "top-left");
// Button with Event to allow user to click locaiton on the map
var picloc = document.createElement('div');
picloc.setAttribute('title', 'Update X/Y Location');
picloc.setAttribute('id', 'Location');
picloc.className = "esri-icon-map-pin esri-widget--button esri-widget esri-interactive";
picloc.addEventListener('mouseover', function (evt) {
console.log('hover...');
});
var timesClicked = 0;
picloc.addEventListener('click', function (evt) {
timesClicked++;
console.log('Times clicked: ' + timesClicked);
if (timesClicked % 2 == 0) {
console.log('Second function...');
job = null;
view.popup.autoOpenEnabled = true;
picloc.removeAttribute('style');
view.surface.style.cursor = "default";
} else {
console.log('First function...');
picloc.classList.add('esri-widget--selected');
picloc.setAttribute("style", "color: white; background-color: #5e5c5c;");
job = "Point"
view.popup.autoOpenEnabled = false;
view.surface.style.cursor = "crosshair";
}
})
view.ui.add(picloc, "top-left");
view.popup.dockOptions = {
// Disable the dock button so users cannot undock the popup
buttonEnabled: false,
dockEnabled: true,
collapseEnabled: false,
position: 'bottom-center',
// Dock the popup when the size of the view is less than or equal to 600x1000 pixels
breakpoint: {
width: 2000,
height: 2000
}
};
console.log(innerWidth);
const mapview = document.getElementById(gisInputs.mapconrol);
console.log(mapview);
// ===================================================================================================
//var editCSS = document.createElement('style');
//mapview.classList.add('esri-view-width-xsmall');
//addEventListener('resize', (event) => {
// if (innerWidth > 600) {
// mapview.classList.add('esri-view-width-xsmall');
// };
// if (innerHeight > 1000) {
// editCSS.innerHTML = ".esri-popup__content {height: 350px;}";
// document.body.appendChild(editCSS);
// }
// else {
// editCSS.innerHTML = ".esri-popup__content {height: 100px;}";
// document.body.appendChild(editCSS);
// };
//});
// ====================================================================================================
//Add Layers to the map. include token in the url.
for (var i = 0; i < gisInputs.services.length; i++) {
esriConfig.request.interceptors.push({
// set the `urls` property to the URL of the FeatureLayer so that this
// interceptor only applies to requests made to the FeatureLayer URL
urls: [gisInputs.services[i]],
// urls: [GISConfig.OA.fs_violations],
// use the BeforeInterceptorCallback to add token to query
before: function (params) {
params.requestOptions.query = params.requestOptions.query || {};
params.requestOptions.query.token = gisInputs.token;
},
})
// This custom content element builds a request/response to attachments for each objectid
const contentWidget = new CustomContent({
creator: async ({ graphic }) => {
const layer_url = graphic.layer.url;
const objectId = graphic.attributes["OBJECTID"];
// build the url for each record to return attachment infomation
const query_url = layer_url + `/0/${objectId}/attachments?token=${gisInputs.token}&f=json`;
var requestOptions = {
method: 'GET',
redirect: 'follow'
};
const response = await fetch(query_url, requestOptions);
const results_json = await response.json();
const attachments = results_json.attachmentInfos;
const element = document.createElement("div");
let fragment = `<h3>Attachments</h3><br/>`;
// loop through array of json info. and build image/link to add to popup
for (let a of attachments) {
const atturl = layer_url + `/0/${objectId}/attachments/${a.id}?token=${gisInputs.token}`;
fragment += `
<a target="_blank" href="${atturl}"><img src="${atturl}" style="width:200px;height:200px;"/></a><br/>
<strong>Name</strong>: <span>${a.name}</span><br/>
<hr/>
`;
}
element.innerHTML = fragment;
return element;
}
});
layer = new FeatureLayer({
url: gisInputs.services[i],
title: gisInputs.layernames[i],
popupEnabled: true,
popupTemplate: GISConfig.popUps[gisInputs.layernames[i]],
visible: false
});
map.add(layer);
// Create the PopupTemplate and reference the two content elements
const template = new PopupTemplate({
title: gisInputs.layernames[i],
content: [{
type: "text",
text: GISConfig.popUps[gisInputs.layernames[i]]["content"]
}, contentWidget]
});
layer.popupTemplate = template;
}
var activeClass = {
// autocasts as new LabelClass()
symbol: createTextSymbol("#ff8c00"),
labelPlacement: "center-center",
labelExpressionInfo: {
expression: "$feature.PERMIT"
}
};
var commonProperties = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "square",
size: "18px", // pixels
};
var activePermit = {
...commonProperties,
color: "#8400a8"
};
var inactivePermit = {
...commonProperties,
color: null
}
var pendingPermit = {
...commonProperties,
color: "#00ffc5"
}
var removalPermit = {
...commonProperties,
color: "#ffff7f"
}
var violationPermit = {
...commonProperties,
color: "#ff0000"
}
var inspectionPermit = {
...commonProperties,
color: "#73b2ff"
}
var contractorPermit = {
...commonProperties,
color: "#b7814a"
}
var revokedPermit = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "square",
size: "18px", // pixels
outline: { // autocasts as new SimpleLineSymbol()
color: "#ff80e2",
width: 1 // points
},
color: null
}
var followupPermit = {
...commonProperties,
color: "#e600a9"
}
var requestRevocationPermit = {
...commonProperties,
color: "#ff73df"
}
// function for creating a text symbol to be used in a label class
function createTextSymbol(color) {
return {
type: "text", // autocasts as new TextSymbol()
color: color,
font: {
// autocast as new Font()
family: "Arial",
size: 8,
weight: "bold"
},
haloColor: [0, 0, 0, 255], // black
haloSize: 1
};
}
var permitRenderer = {
type: "unique-value",
field: "PERMITSTATUS",
//defaultSymbol: activePermit,
uniqueValueInfos: [
{
value: 1,
symbol: activePermit,
label: "Active"
},
{
value: 2,
symbol: inactivePermit,
label: "Inactive"
},
{
value: 3,
symbol: pendingPermit,
label: "Pending"
},
{
value: 5,
symbol: removalPermit,
label: "Removal"
},
{
value: 6,
symbol: violationPermit,
label: "Violation"
},
{
value: 7,
symbol: inspectionPermit,
label: "Inspection"
},
{
value: 8,
symbol: contractorPermit,
label: "Contractor"
},
{
value: 4,
symbol: revokedPermit,
label: "Revoked"
},
{
value: 10,
symbol: followupPermit,
label: "Follow Up"
},
{
value: 9,
symbol: requestRevocationPermit,
label: "Request Revocation"
}
]
}
// turn off all the layers except specified layer
for (var i = 0; i < map.layers.length; i++) {
var layer = map.layers.items[i];
layer.visible = (layer.title == visibleLayer) ? true : false;
if (layer.visible && visibleLayer == 'Signs') {
console.log(layer);
layer.labelingInfo = [activeClass];
layer.renderer = permitRenderer;
window.dotNetToJs.QueryPermit(layer, gisInputs.permitNumber);
}
if (layer.visible && visibleLayer == 'Violations') {
window.dotNetToJs.QueryViolation(layer, gisInputs.violationGISId);
}
}
// Grphic layer to show the selected locaton on the map
graphicsLayer = new GraphicsLayer();
graphicsLayer.title = "Lat/Long Position";
map.add(graphicsLayer);
view.when(function () {
view.on("click", (event) => {
timesClicked = 0;
console.log('Map clicked...');
// ============================================================================================
//mapview.classList.add('esri-view-width-xsmall');
// ============================================================================================
window.dotNetToJs.SelectLocation(job, event, graphicsLayer);
job = null;
view.popup.autoOpenEnabled = true;
picloc.removeAttribute('style');
view.surface.style.cursor = "default";
});
});
})
return "Success";
},
createViolation: function (obj, perams) {
require([
"esri/config",
"esri/request",
"esri/layers/FeatureLayer",
"esri/widgets/Feature",
"esri/Graphic",
], async function (esriConfig, esriRequest, FeatureLayer, Feature, Graphic) {
esriConfig.request.interceptors.push({
urls: GISConfig.OA.fs_violations + "/0/addFeatures",
before: function (params) {
params.requestOptions.query = params.requestOptions.query || {};
params.requestOptions.query.token = perams.token;
}
});
var graphic = new Graphic(
{
attributes: {
"DATEINSPECTED": dotNetToJs.ConvertDate(perams.violation.inspectionDate),
// "INSPECTOR": perams.violation.inspectorName.slice(0, perams.violation.inspectorName.indexOf(" ")),
"LOCALITY": perams.violation.localityName,
"DISTRICT": null,
"REGION1": null,
"ID": perams.violation.violationID,
"VIOLATIONDESC": perams.violation.violationDesc,
"COMPANYNAME": perams.violation.companyName,
"CONTACT": perams.violation.contact,
"PHONENUMBER": perams.violation.phoneNumber,
"ADDRESS": perams.violation.address,
"CITY": perams.violation.city,
"STATE": perams.violation.state,
"ZIP": perams.violation.zpCode,
"PROPERTYOWNER": perams.violation.propertyOwner,
"ROUTE": perams.violation.route,
"ROUTETYPE": null,
"ZONING_CLASSIFICATION": null,
"SIZE_": perams.violation.size,
"PHOTO": null,
"FOLLOWUPDATE": dotNetToJs.ConvertDate(perams.violation.followupDate),
"STATUS1": perams.violation.violationStatus,
"COMPLETIONDATE": dotNetToJs.ConvertDate(perams.violation.completionDate),
//"FINALINSPECTION": perams.violation.,
"CREATIONDATE": dotNetToJs.ConvertDate(perams.violation.createdDate),
"CREATOR": perams.violation.createdBy,
"EDITOR": perams.violation.UpdatedBy,
"EDITDATE": dotNetToJs.ConvertDate(perams.violation.updateDate),
"EMAIL": perams.violation.email,
"COMMENTS": perams.violation.comments,
"DISTICT_NAME": perams.violation.districtName,
"LONGITUDE": parseFloat(document.getElementById("Latitude").value),
"LATITUDE": parseFloat(document.getElementById("Latitude").value),
"VIOLATION_CODE_CATEGORY": perams.violation.violationTypeName,
"COMPANY_DISCUSSION": perams.violation.whatDidYouDiscuss,
"CALL_DISCUSSION": null,
"ADDRESS_VERIFICATION": null,
"ZONING_CLASSIFICATION": perams.violation.zoneClassificationID,
"ZONING_VERIFICATION": perams.violation.howVerifyZoning,
"SPACE_EXPLANATION": null,
"PERMIT_EXPLANATION": null,
"VIOLATION_CODE": null,
"VIOLATION_SUB_CODE": null,
"SCENIC_BYWAY": null
},
geometry: {
type: "point",
longitude: document.getElementById("Longitude").value,
latitude: document.getElementById("Latitude").value
}
});
GisResult.latitude = document.getElementById("Latitude").value;
GisResult.longitude = document.getElementById("Longitude").value;
GisResult.globalID = await dotNetToJs.AddFeature(violations, graphic);
});
return GisResult;
},
CreateModelObj: function (obj, layername, modleObj) {
},
AddAsync: async function (obj, layername, modelObj) {
require(["esri/Graphic"], function (Graphic) {
if (layername == "Violations") {
var violation = GISConfig.mapping.violations;
//for (let property in violation) {
// violation[property] = modelObj.violation[violation[property]]
//}
let graphics = [];
graphic = new Graphic({
geometry: {
type: "point",
latitude: document.getElementById("Latitude").value,
longitude: document.getElementById("Longitude").value
}
//attributes: violation
})
graphics.push(graphic);
const addEdits = {
addFeatures: graphics
};
var layer = dotNetToJs.FindLayer(layername);
layer
.applyEdits(addEdits)
.then((results) => {
if (results.addFeatureResults.length > 0) {
console.log("Feature has been added into GIS");
//resolve(results.addFeatureResults[0].globalId);
gisResults.golbalID = results.addFeatureResults[0].globalId;
this.dotNetReference.invokeMethodAsync("GetResult", gisResults);
// this.dotNetToJs.dotNetReference.invokeMethodAsync("GetLocation", LocationInfo);
}
})
.catch((err) => {
console.log(err.response);
})
}
else {
}
});
},
AddFeature: function (layername, modelObj) {
return new Promise((resolve, reject) => {
})
},
GetGISCode: function (domain, key) {
switch (domain) {
case "Inspectors":
return GISConfig.Converters.Inspectors[key];
break;
case "Localities":
return GISConfig.Converters.Localities[key];
break;
case "Districts":
return GISConfig.Converters.Districts[key];
break;
case "Regions":
return GISConfig.Converters.Regions[key];
; break;
case "Zones":
return GISConfig.Converters.Zones[key];
break;
case "RouteType":
break;
default: ""
}
},
FindLayer: function (title) {
// turn off all the layers except specified layer
for (var i = 0; i < view.map.layers.length; i++) {
var layer = view.map.layers.items[i];
if (layer.title == title) {
return layer;
}
}
return null;
return null;
},
SelectLocation: function (job, event, graphicsLayer) {
require([
"esri/rest/support/IdentifyParameters",
"esri/Graphic",
"esri/rest/locator",
"esri/layers/GraphicsLayer"],
function (IdentifyParameters, Graphic, locator, GraphicsLayer) {
if (job == "Point") {
console.log("Job: " + job);
const point = { //Create a point
type: "point",
longitude: event.mapPoint.longitude,
latitude: event.mapPoint.latitude
};
gisResults.latitude = point.latitude;
console.log(gisResults.latitude)
gisResults.longitude = point.longitude;
dotnetRef.invokeMethodAsync("GetLocation", activity, gisResults, "test");
var element = document.getElementById('hiddenlocation');
element.value = "00000";
element.dispatchEvent(new Event('change'));
graphicsLayer.removeAll();
const simpleMarkerSymbol = {
type: "simple-marker",
style: "cross",
color: [35, 92, 52], // Orange
outline: {
color: [92, 35, 35], // White
width: 1
}
};
const pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
});
graphicsLayer.add(pointGraphic);
}
})
},
GetURI: function (obj) {
return "https:\\" + window.location.hostname + ":" + window.location.port;
},
GenToken: function (user, pass, url, refUrl) {
require(["esri/request"], function (esriRequest) {
esriRequest(url, {
method: "post",
query: {
f: "json",
username: user,
password: pass,
// I guess this would be sampleserver8 for you
referer: refUrl
}
}).then(response => {
return response.data.token;
});
});
},
GetDomains: function (layer) {
},
ConvertDate: function (dateformat) {
var date = new Date(dateformat);
var now_utc = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(),
date.getUTCDate(), date.getUTCHours(),
date.getUTCMinutes(), date.getUTCSeconds());
return now_utc;
},
QueryPermit: function (layer, PermitNumber) {
view.whenLayerView(layer)
.then(function (layerView) {
// The layerview for the layer
console.log(layerView);
var highlight;
console.log("Permit: " + PermitNumber);
layerView.highlightOptions = {
color: "#34ebab", //bright fuschia
haloOpacity: 0.8,
fillOpacity: 0
};
layer.queryFeatures({
outFields: "*",
where: `Permit = '${PermitNumber}'`,
returnGeometry: true
})
.then(function (results) {
// if a feature is already highlighted, then remove the highlight
highlight?.remove();
highlight = layerView.highlight(results.features);
console.log(results);
if (results.features.length > 0) {
const features = results.features;
console.log(features);
view.goTo({ geometry: features[0].geometry, zoom: 18 });
}
})
.catch(function (error) {
console.log("query failed: ", error);
});
})
},
QueryViolation: function (layer, globalId) {
console.log(globalId);
view.whenLayerView(layer)
.then(function (layerView) {
// The layerview for the layer
console.log(layerView);
var highlight;
layerView.highlightOptions = {
color: "#34ebab", //bright fuschia
haloOpacity: 0.8,
fillOpacity: 0
};
layer.queryFeatures({
outFields: "*",
where: `globalId = '${globalId}'`,
returnGeometry: true
})
.then(function (results) {
// if a feature is already highlighted, then remove the highlight
highlight?.remove();
highlight = layerView.highlight(results.features);
console.log(results);
if (results.features.length > 0) {
const features = results.features;
console.log(features);
view.goTo({ geometry: features[0].geometry, zoom: 18 });
}
})
.catch(function (error) {
console.log("query failed: ", error);
});
})
}
}
06-03-2024
10:41 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I think I may have just found it... but now my popup is no longer docking... uggggg...
The Maps Container is set to applicationView as seen below... I removed the "esri-view-width-xsmall" and the side panel is not appearing any longer... not sure if this was it but still testing...
but as I stated this now has stopped my popups from docking automatically... not sure how to make that happen... I think the popups were docking automatically because of the "esri-view-width-xsmall" setting and now that I removed it its allowing them to free float in the map... BUT I do not want this...
how do I default them open and docked when a feature is selected.
<div style="float: left; width: 70%; height: 600px;">
<div id="applicationView" class="applicationMapStyle esri-view-width-xsmall"></div>
</div>
I figured this would do it...
view.popup.dockOptions = {
// Disable the dock button so users cannot undock the popup
buttonEnabled: false,
dockEnabled: true,
collapseEnabled: false,
position: 'bottom-center',
// Dock the popup when the size of the view is less than or equal to 600x1000 pixels
breakpoint: {
width: 5000,
height: 5000
}
};
06-03-2024
11:20 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Yup if I remove the "esri-view-width-xsmall" then the side pane no longer appears BUT it no longer docks...
I commented out the OLD breakpoint and added the one below... from what I read this should dock no matter what... WHY are my popups not docking?
breakpoint: true
const view = new MapView({
map: map,
container: "applicationView"
});
// SNIP
view.popup.dockOptions = {
// Disable the dock button so users cannot undock the popup
buttonEnabled: false,
dockEnabled: true,
collapseEnabled: false,
position: 'bottom-center',
breakpoint: true
// Dock the popup when the size of the view is less than or equal to 600x1000 pixels
//breakpoint: {
// width: 5000,
// height: 5000
//}
};
06-04-2024
06:04 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I tried this approach to get the popup outside the map and into its own DIV and its working good...
BUT its not showing me the attachments in the popup... HOW do i show attachments with this approach?
https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/popup-with-attachements-outside-m...
06-04-2024
09:39 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
It appears the issue was with css and using the "
esri-view-width-xsmall
I removed this and the expand widgets started working as I expected... and as a result the docking of the popup was not working as expected. As a result I move the popup box outside the map into a DIV and worked from there...
It appears the CSS was making the page believe it was xsmall and as a result it opened the expenad widgets in a side pane and the popup in full with docking format... this is not what I wanted ... as a result I move the popup outside the map
This is the post that dealt with moving it outside the map
https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/popup-with-attachements-outside-m...
