nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Expand Issues on widgets

kapalczynski

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....

Find more posts tagged with

Accepted answers

kapalczynski

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-map-view/td-p/1483445/page/2#M84793

All comments

kapalczynski

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-map-view/m-p/1483649#M84780

kapalczynski

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
                    //}
                };

kapalczynski

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
                    }
                };

kapalczynski

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);
                    });
            })
    }

}

YuriWorkTech

Do you know which arcgis js version its using? Do you have any code you can share?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.