Latest Contributions by Egge-Jan_Pollé

‎01-17-2024

Hi @vijaybadugu, Have you seen this page already? Migrating from 3.x to 4.28 | Overview | ArcGIS Maps SDK for JavaScript 4.28 | ArcGIS Developers Here an overview is provided for developers like yourself, with knowledge of and experience with the 3.x API, looking to migrate to 4.x. Most important message here, as far as I am concerned: Consider rewriting applications instead of simply trying to update them. And if you have any more specific challenges, this community is there to help. Always. Cheers, Egge-Jan

‎05-10-2023

Hi, Search | API Reference | ArcGIS Maps SDK for JavaScript 4.26 | ArcGIS Developers includeDefaultSources: false Cheers, Egge-Jan

‎03-30-2023

You may try something like this: center: new Point({x: 500000, y: 500000, spatialReference: 27700}) For a fully working example, please have a look at the script shown in this post: ArcGIS JavaScript with UK data - URL.searchParams - Esri Community Cheers, Egge-Jan

‎02-16-2023

Hi @aggarwalarpit93, Please see screen dump attached: your data in an application without a basemap. I slightly modified your code (see below) and, next to the districts I also added the settlements, which will become visible when you zoom in. Yeah, zooming in and zooming out is working fine. And yeah, @Sage_Wall is right: you should use the scale instead of the zoom property. HTH, Egge-Jan <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>Test: no background map</title> <link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.25/"></script> <style> html, body { padding: 0; margin: 0; height: 100%; width: 100%; font-family: sans-serif; } #header { width: 100%; height: 70px; background-color: #154273; color:#FFFFFF; margin: 0; } #headertext { float: left; font-size: 35px; color: white; line-height: 70px; padding-left: 15px; } #viewDiv { position: absolute; top: 70px; bottom: 0; right: 0; left: 0; padding: 0; margin: 0; } </style> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/LayerList", "esri/widgets/Expand", ], (Map, MapView, FeatureLayer, LayerList, Expand) => { const map = new Map(); const settlementLayer = new FeatureLayer({ url: "https://gis.fmiscwrdbihar.gov.in/arcgis/rest/services/GisAtlas/GIS_Atlas_2023/MapServer/4", minScale: 100000 }); const districtLayer = new FeatureLayer({ url: "https://gis.fmiscwrdbihar.gov.in/arcgis/rest/services/GisAtlas/GIS_Atlas_2023/MapServer/22", }); map.addMany([districtLayer, settlementLayer]); const view = new MapView({ map: map, center: [85.7780685, 25.8560264], scale: 1800000, container: "viewDiv", }); const layerList = new LayerList({ view: view, listItemCreatedFunction: function(event){ const item = event.item; item.actionsSections = [ [ { title: item.layer.title, className: "esri-icon-description", id: "information" } ] ]; } }); layerList.on("trigger-action", function(event) { if (event.action.id === "information") { // If the information action is triggered, then open the item details page of the service layer. window.open(event.item.layer.url); } }); const layerListExpand = new Expand({ expandIconClass: "esri-icon-layers", // expandTooltip: layerList.label, expandTooltip: "LayerList", view: view, expanded: true, content: layerList, group: "expandable-widgets" }); view.ui.add([layerListExpand], "top-right") }); </script> </head> <body> <div id="header"> <div id="headertext" class="stretch">Test: no background map</div> </div> <div id="viewDiv"></div> </body> </html>

‎02-02-2023

Hi, Can you add your own custom buttons to an ArcGIS JavaScript application, one with your own picture, I mean? ArcGIS Maps SDK for JavaScript example: custom button The SDK comes with a load of widgets, all with their own icons, and for your custom buttons there is a whole set of Esri Icon Fonts (Calcite theme) available. But now I want to add my own icon, is that possible? I stumbled into this post use of custom icon, where it was suggested to use calcite-action. And yeah, with this information I managed to use my own SVG image in a button - see code below. It is a huge image - 924 by 924 pixels! - but because it is a fully Scalable Vector Graphic I can squeeze it down to 25x25px. And to stick with the Esri branded theme I use a fill color of #6e6e6e. In this way it fits in nicely with the rest of the UI. What do you think? Cheers, Egge-Jan TWIAV | ArcGIS JavaScript example - custom button <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>TWIAV | ArcGIS JavaScript example - custom button</title> <link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/css/main.css"> <script src="https://js.arcgis.com/4.25/"></script> <style> html, body { padding: 0; margin: 0; height: 100%; width: 100%; font-family: sans-serif; } #header { width: 100%; height: 70px; background-color: #154273; color:#FFFFFF; margin: 0; } #headertext { float: left; font-size: 35px; color: white; line-height: 70px; padding-left: 15px; } #viewDiv { position: absolute; top: 70px; bottom: 0; right: 0; left: 0; padding: 0; margin: 0; } </style> <script> require([ "esri/Map", "esri/geometry/Point", "esri/views/MapView" ], function(Map, Point, MapView) { const map = new Map({ basemap: { portalItem: { id: "7aea6fa913a94176a1074edb40690318" } } // Topo RD --> https://www.arcgis.com/home/item.html?id=7aea6fa913a94176a1074edb40690318 }); const view = new MapView({ spatialReference: 28992, container: "viewDiv", map: map, center: new Point({ x: 145430, y: 427100, spatialReference: 28992 }), zoom: 10 }); view.when(() => { createZoomEntireCountryBtn(); view.ui.add(["zoomEntireCountryBtn"], "top-left") }); /******************************************************************************* * Start zoom to entire country *******************************************************************************/ function createZoomEntireCountryBtn() { const zoomEntireCountryBtnDiv = document.createElement('div'); zoomEntireCountryBtnDiv.innerHTML = ` <div id="zoomEntireCountryBtn" class="esri-component esri-widget--button esri-widget" role="button"> <span title="Zoom uit op heel Nederland"><calcite-action><img src="nederland.svg" style="width:25px;height:25px;" alt="nederland"></calcite-action></span> </div>`; document.body.appendChild(zoomEntireCountryBtnDiv); document.getElementById("zoomEntireCountryBtn").addEventListener("click", zoomEntireCountry); } function zoomEntireCountry() { view.goTo({ center: new Point({ x: 155000, y: 463000, spatialReference: 28992 }), zoom: 3 }); } /******************************************************************************* * End zoom to entire country *******************************************************************************/ }); </script> </head> <body> <div id="header"> <div id="headertext" class="stretch">ArcGIS Maps SDK for JavaScript example: custom button</div> </div> <div id="viewDiv"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

‎01-27-2023

OK. Cool. Thanks for your swift reply 🙂 Previously (in 4.11) it worked directly, without the need to wait for the widget to be loaded. But apparently the library has grown to such a level of complexity that this additional step is needed. Thanks again. Will go and apply this new knowledge immediately.

‎01-27-2023

Hi all, I have a little question about Localization when using the Expand widget. Actually, I have asked the same question way back in 2019, and I got a satisfactory answer at the time from @KellyHutchins. The solution provided back then worked in the JS API 4.11 but stopped working a few releases later (4.17? 4.18?). But the issue remains, so I am searching for an alternative solution. Issue: I love this Localization in the JavaScript Maps SDK, with the SDK automatically using the locale of the browser. So, in my case everything is showing in Dutch. Cool. Now I have a little issue: I like my widgets to be collapsed, so I have put my Search widget within an Expand widget. The question is about localization when using the Expand widget: the expandTooltip defaults to "Expand" for English locale, whereas I want it to read "Search" or "Find address or place". I can modify the expandTooltip, but then I will loose the advantages of localization. So, is there a way to replace the hard coded "Find address or place" with a string that will be localized? expandTooltip: "Find address or place",‍‍ // loss of localization :-(‍ The solution given at the time was to use the searchWidget.label (and, as I said, this worked like a charm in 4.11) like this: expandTooltip: searchWidget.label, // "Search" in stead of the default "Expand" for English locale‍‍ But not anymore... so, how would I solve this issue in 4.25? Thanks in advance for your help, Egge-Jan

‎01-24-2023

Hi, The example you are referring to on stackoverflow has been created with the legacy ArcGIS API for JavaScript 3.x. I can imagine that you would prefer to use the (new) ArcGIS Maps SDK for JavaScript 4.x. Can you please explain us a little more what it is that you want to accomplish? Are you not just looking for a Popup? The Popup widget allows users to view content from feature attributes. There are several samples available on how to use a Popup, e.g. Custom popup content. HTH, Egge-Jan

‎01-12-2023

Hi, I like to have my Previous extent and Next extent buttons in a web mapping application. Don't you? ArcGIS Maps SDK for JavaScript example: Previous and Next extent buttonsBut as far as I know the (new) ArcGIS Maps SDK for JavaScript does not have a default widget for that. Is that correct? So, I have created an example with my own Previous and Next Buttons - see sample code below or click on the map to get to a working application. True, my version of these buttons owes a lot to work done by @RobertScheitlin__GISP (see his app with a navigation toolbar in this post.) I have updated the code for the two buttons to 4.25, removing dojo and replacing watchUtils with reactiveUtils. And I managed to group the two buttons together (like the zoom in and zoom out buttons) using esri css classes. I think it all works, more or less. Can you please test it and tell me what you think? Cheers, Egge-Jan TWIAV | ArcGIS JavaScript example - Previous and Next extent buttons <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>TWIAV | ArcGIS JavaScript example - Previous and Next extent buttons</title> <link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/css/main.css"> <script src="https://js.arcgis.com/4.25/"></script> <style> html, body { padding: 0; margin: 0; height: 100%; width: 100%; font-family: sans-serif; } #header { width: 100%; height: 70px; background-color: #154273; color:#FFFFFF; margin: 0; } #headertext { float: left; font-size: 35px; color: white; line-height: 70px; padding-left: 15px; } #viewDiv { position: absolute; top: 70px; bottom: 0; right: 0; left: 0; padding: 0; margin: 0; } </style> <script> require([ "esri/Map", "esri/views/MapView", "esri/core/reactiveUtils" ], function(Map, MapView, reactiveUtils) { var map = new Map({ basemap: "osm" }); var view = new MapView({ container: "viewDiv", map: map, zoom: 10, center: [0, 51.5] }); createZoomPrevZoomNextBtns(); view.ui.add(["zoomPrevNextBtns"], "top-left"); /******************************************************************************* * Start Zoom Previous and Zoom Next buttons ******************************************************************************* * The solution presented here to add these 2 zoom buttons is based on work by RobertScheitlin__GISP. * See his answer to this question: * https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/does-the-class-quot-esri-toolbars-navigation-quot/m-p/567061 * Changes to the original RobertScheitlin__GISP solution: removed dojo and replaced watchUtils with reactiveUtils (to upgrade to 4.25) *******************************************************************************/ _prevExtent = false; _preExtent = null; _currentExtent = null; _extentHistory = []; _extentHistoryIndx = 0; _nextExtent = false; reactiveUtils.when( () => view.stationary === true, () => { extentChangeHandler(view.extent); } ); function createZoomPrevZoomNextBtns() { const zoomPrevNextBtnsDiv = document.createElement('div'); zoomPrevNextBtnsDiv.innerHTML = ` <div id="zoomPrevNextBtns" class="esri-component esri-zoom"> <div id="zoomPrevBtn" class="esri-widget--button esri-widget esri-disabled" role="button"> <span title="Previous extent" id="zoomPrev" class="esri-icon esri-icon-left-arrow-circled"></span> </div> <div id="zoomNextBtn" class="esri-widget--button esri-widget esri-disabled" role="button"> <span title="Next extent" id="zoomNext" class="esri-icon esri-icon-right-arrow-circled"></span> </div> </div>`; document.body.appendChild(zoomPrevNextBtnsDiv); } let l_zoomPrevBtn = document.getElementById("zoomPrevBtn"); l_zoomPrevBtn.addEventListener("click", zoomPreviousExtent); let l_zoomNextBtn = document.getElementById("zoomNextBtn"); l_zoomNextBtn.addEventListener("click", zoomNextExtent); function zoomNextExtent() { _nextExtent = true; _extentHistoryIndx++; if (_extentHistoryIndx > _extentHistory.length - 1) { // this might happen if the user clicks the zoomNext button too often too fast _extentHistoryIndx = _extentHistory.length - 1; } view.goTo(_extentHistory[_extentHistoryIndx].currentExtent); } function zoomPreviousExtent() { if(_extentHistory[_extentHistoryIndx].preExtent){ _prevExtent = true; view.goTo(_extentHistory[_extentHistoryIndx].preExtent); _extentHistoryIndx--; } } function extentChangeHandler(evt) { if(_prevExtent || _nextExtent){ _currentExtent = evt; }else{ _preExtent = _currentExtent; _currentExtent = evt; _extentHistory.push({ preExtent: _preExtent, currentExtent: _currentExtent }); _extentHistoryIndx = _extentHistory.length - 1; } _prevExtent = _nextExtent = false; extentHistoryChange(); } function extentHistoryChange() { if(_extentHistory.length === 0 || _extentHistoryIndx === 0 ){ l_zoomPrevBtn.classList.add("esri-disabled"); } else { l_zoomPrevBtn.classList.remove("esri-disabled"); } if(_extentHistory.length === 0 || _extentHistoryIndx === _extentHistory.length - 1){ l_zoomNextBtn.classList.add("esri-disabled"); } else { l_zoomNextBtn.classList.remove("esri-disabled"); } } /******************************************************************************* * End Zoom Previous and Zoom Next buttons *******************************************************************************/ }); </script> </head> <body> <div id="header"> <div id="headertext" class="stretch">ArcGIS Maps SDK for JavaScript example: Previous and Next extent buttons</div> </div> <div id="viewDiv"></div> </body> </html>

‎01-10-2023

Yeah, that's what we started with: this 'cursor' property of the view is an undocumented feature. (I do not remember how I found out about it... Most probably I copied it from an example by someone else a few years ago...) But happy to see that my answer is (at least partly) true (for some cursors).

‎01-10-2023

Hmmm... I am using Notepad++ as my favorite text editor. Can you please have a look at the code sample below? In this working example I do add a custom toggle button to the view.ui and when I click this button the cursor changes. I have tested this on my Windows machine in three major browsers (Chrome/Firefox/Edge). It might not work in IE 11, but I take that for granted... Can you please tell me whether this example works for you? Cheers, Egge-Jan <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS JavaScript Example: change cursor in view</title> <link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/css/main.css"> <script src="https://js.arcgis.com/4.25/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> require([ "esri/Map", "esri/geometry/Point", "esri/views/MapView" ], function(Map, Point, MapView) { let myCondition = false; let map = new Map({ basemap: { portalItem: { id: "0bd3a4a6fd674a90a7d0a9e5f36fb59b" // OS Open Carto } } }); let view = new MapView({ spatialReference: 27700, container: "viewDiv", map: map, center: new Point({x: 500000, y: 500000, spatialReference: 27700}), zoom: 7 }); createToggleBtn(); view.ui.add(["toggleBtn"], "top-right"); /******************************************************************************* * Start Toggle button *******************************************************************************/ function createToggleBtn() { const toggleBtnDiv = document.createElement('div'); toggleBtnDiv.innerHTML = ` <div id="toggleBtn" class="esri-component esri-widget--button esri-widget" role="button"> <span title="Toggle button" id="toggle-button" class="esri-icon esri-icon-plus-circled"></span> </div>`; document.body.appendChild(toggleBtnDiv); } let l_toggleButton = document.getElementById("toggleBtn"); l_toggleButton.addEventListener("click", switchToggleeButton); function switchToggleeButton(evt) { if (myCondition === false) { l_toggleButton.style.color = "white"; l_toggleButton.style.backgroundColor = "#8d8d8d"; view.cursor = "crosshair"; myCondition = true; view.popup.autoOpenEnabled = false; } else { l_toggleButton.style.color = "#8d8d8d"; l_toggleButton.style.backgroundColor = "white"; view.cursor = "auto"; myCondition = false; view.popup.autoOpenEnabled = true; view.popup.close(); } } view.on("click", function(event){ if (myCondition) { view.popup.open({ title: "Click", content: "<b>You clicked on te map!</b>", location: event.mapPoint }); } console.log("cursor: " + view.cursor); }); /******************************************************************************* * End Toggle button *******************************************************************************/ }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

‎01-09-2023

Yes, you are right: I couldn’t find anything about this cursor-and-view in the docs either. But I can assure you that the above code snippet works for me, and it already does do so for a longtime: if myCondition is met, I get the crosshairs cursor and in all other circumstances the default cursor is showing. How come? I don’t know. It just works for me, really. Is there someone at the ArcGIS Maps SDK for JavaScript team who can explain?

‎01-09-2023

Version 4.x is a substantial overhaul of the ArcGIS Maps SDK for JavaScript (formerly - until December 2022 - known as the ArcGIS API for JavaScript) and its mapping components. One major change is the introduction of views (MapViews for 2D and SceneViews for 3D) to separate the map and the way it is displayed: At 4.0, a Map can be displayed in 2D or 3D. Because of this, the drawing logic was revised. The Map and Layers no longer handle the drawing logic, instead it is now handled by Views. (see: Migrating from 3.x to 4.25 | ArcGIS Maps SDK for JavaScript 4.25 > Views) So, your cursor is no longer linked to the map but to the view. An example of changing the cursor when a certain condition is met would be something like this: if (myCondition) { view.cursor = "crosshair"; } else { view.cursor = "auto"; } HTH, Egge-Jan

‎09-09-2020

Hi mukul chavan, I found this map through the Living Atlas: https://www.arcgis.com/home/item.html?id=d7c21ac2f29348cebf45f70515f72a42 The underlying service can be found here: https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_States_Generalized/FeatureServer/0 At the bottom of this page you will find a link to query the service: https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_States_Generalized/FeatureServer/0/query Here you can enter your parameters - see screen capture. BR, Egge-Jan

‎09-09-2020

Hi mukul chavan, I think you should have a look at the ArcGIS REST API: ArcGIS REST API | ArcGIS for Developers Below you will find an example retrieving the boundary of the state of Arizona: https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_States_Generalized/FeatureServer/0/query?where=STA… HTH, Egge-Jan

Online Status	Offline
Date Last Visited	‎11-19-2025 02:25 AM

My Ideas

Latest Contributions by Egge-Jan_Pollé

Re: Start up with javascript API 4.X

Re: How do I disable the ArcGIS World Geocoding Service from my search widget?

Re: Setting a map view center when using British National Grid coordinates

Re: Zoom not working if basemap is disabled arcgis javascript

ArcGIS Maps SDK for JavaScript example: custom button (calcite-action with SVG)

Re: Question about Localization and Expand widget - ArcGIS Maps SDK for JavaScript 4.25

Question about Localization and Expand widget - ArcGIS Maps SDK for JavaScript 4.25

Re: Display results from a query in a text box

ArcGIS Maps SDK for JavaScript example: Previous and Next extent buttons (updated for 4.25)

Re: ArcGIS JS Map Cursor

Re: ArcGIS JS Map Cursor

Re: ArcGIS JS Map Cursor

Re: ArcGIS JS Map Cursor

Re: is there any api which provide boundary coordinates of city, county and country ? I want to use those api to draw boundary for search place. Example: If i search for Arizona USA i should get coordinate for Arizona jurisdictional boundary

Re: is there any api which provide boundary coordinates of city, county and country ? I want to use those api to draw boundary for search place. Example: If i search for Arizona USA i should get coordinate for Arizona jurisdictional boundary

Re: How do you allow other users to edit your web ...

Re: Show/hide components?

Re: Change Default 'ALL' label of Search Widget

Re: Pan controls ArcGIS4

Re: Start up with javascript API 4.X