Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About Egge-Jan_Pollé
Egge-Jan_Pollé
MVP Alum
since
06-22-2018
11-19-2025
487
Posts created
198
Kudos given
74
Solutions
430
Kudos received
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
My Ideas
(0 Idea Submissions)Latest Contributions by Egge-Jan_Pollé
|
POST
|
Hi @OmarKawach, Thanks! This is what I was looking for. Yeah, I still have to make a few steps to learn to work with these components... Web Components in general, and the new Map Components in the ArcGIS Javascript SDK in particular... I have slightly modified the Hide Compass example provided by @ReneRubalcava to take into account the rotation of the map - see code below. And yeah, don't forget to set the autoDestroyDisabled property of the component to be able to append and rempove the component multiple times. Thanks again, Egge-Jan <html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Compass | ArcGIS Maps SDK for JavaScript - Map Components</title>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#header {
width: 100%;
height: 70px;
background-color: #0047AB;
color:#FFFFFF;
margin: 0;
position: fixed;
z-index: 1;
top: 0;
}
#headertext {
float: left;
font-size: 35px;
color: white;
line-height: 70px;
padding-left: 10px;
}
#column {
margin-top: 70px;
margin-left: 20%;
width: 60%;
border: 1px solid #0047AB;
height: 800px
}
</style>
<!-- Load Calcite components from CDN -->
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />
<script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>
<!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
<link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.31/"></script>
<!-- Load Map components from CDN-->
<script
type="module"
src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"
></script>
</head>
<body>
<div id="header">
<div id="headertext">Compass | ArcGIS Maps SDK for JavaScript - Map Components</div>
</div>
<div id="column">
<arcgis-map item-id="7aea6fa913a94176a1074edb40690318">
<arcgis-zoom position="top-left"></arcgis-zoom>
<arcgis-compass auto-destroy-disabled position="top-left"></arcgis-compass>
</arcgis-map>
<p>Kleine demonstratie app, gebouwd met <a href="https://developers.arcgis.com/javascript/latest/" target="_blank">ArcGIS Maps SDK for JavaScript</a>, en dan speciaal de recent geïntroduceerde <a href="https://developers.arcgis.com/javascript/latest/references/map-components/" target="_blank">Map Components</a>.</p>
<p>Kaart: <a href="https://www.arcgis.com/home/item.html?id=7aea6fa913a94176a1074edb40690318" target="_blank">Web Map Topo RD van Esri Nederland uit de Levende Atlas</a>.</p>
<h3>Demo:</h3>
<p>Het toevoegen en verwijderen van een component, in dit geval het Compass, afhankelijk van de rotatie van de kaart.</p>
<p>De kaart is standaard noordgericht, en dan is de Compass button niet echt nodig. Maar als de gebruiker de kaart roteert met <code>Right-click + Drag</code>, dan verschijnt het Compass zodat men de kaartoriëntatie kan resetten. En zodra dat gebeurt is (de kaart is weer noordgericht), dan verdwijnt het Compass ook weer.<br><br>Let op:<br>Het is van belang dat je bij het arcgis-compass component de property <b>autoDestroyDisabled</b> instelt. Je wilt het component immers meerdere keren toevoegen en verwijderen, zonder dat het bij de eerste keer verwijderen automatisch vernietigd wordt.</p>
</div>
<script>
const arcgisMap = document.querySelector("arcgis-map");
const arcgisCompass = document.querySelector("arcgis-compass");
arcgisMap.addEventListener("arcgisViewChange", (event) => {
if (arcgisMap.rotation != 0){
arcgisMap.append(arcgisCompass);
} else {
arcgisCompass.remove();
}
console.log(arcgisMap.rotation);
});
</script>
</body>
</html>
... View more
12-12-2024
03:56 AM
|
2
|
0
|
1820
|
|
POST
|
Hi, I am playing around with the new components in the ArcGIS Maps SDK for JavaScript 4.31 and I wondered: is there an easy way to show hide/components? For example the compass: Component Reference / Compass - Docs ⋅ Storybook As long as the map/view faces north (i.e. heading = 0), I do not need the compass at all. But yes, I want the compass to appear when the user rotates the map, to disappear again the moment the map faces north again, i.e. after the user clicked the compass to reset the view. With the good old widget I would do something like this: watchUtils.whenTrue(view, "stationary", function() {
if (view.rotation == 0){
view.ui.remove(compassWidget);
} else {
view.ui.add(compassWidget, "top-left");
}
}); How to accomplish something similar with the new components? TIA, Egge-Jan
... View more
12-10-2024
03:04 AM
|
0
|
2
|
1931
|
|
POST
|
LayerList | API Reference | ArcGIS Maps SDK for JavaScript 4.29 | ArcGIS Developers: To hide layers in the map from the LayerList widget, you must set the listMode property on the desired layers to hide.
... View more
04-24-2024
12:59 PM
|
0
|
0
|
2082
|
|
POST
|
The translation of this label, for the Italian locale, comes from this file @ArcGIS\core\assets\esri\widgets\Search\t9n\Search_it.json. You may want to change it there yourself, or you could ask the ArcGIS JS Development team to modify the translation.
... View more
04-15-2024
03:25 AM
|
2
|
1
|
1351
|
|
POST
|
Hi @ForrestLin, Thanks for checking this out. I think it works 'as designed': Esri, of course, wants you to use their portal, and - as you indicate - the summary you set there will appear in the popup. There is no way, as far as I know, to set this popup text in the code. Can someone from Esri confirm? Code wise, you can only set the title, which will then appear in the popup (like in my code snippet above).
... View more
04-11-2024
03:16 PM
|
0
|
1
|
2420
|
|
POST
|
Yes, when is the answer 🙂 when() may be leveraged once an instance of the class is created. https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Editor.html#methods-summary Example // Although this example uses the BasemapGallery widget, any class instance that is a promise may use when() in the same way
let bmGallery = new BasemapGallery();
bmGallery.when(function(){
// This function will execute once the promise is resolved
}, function(error){
// This function will execute if the promise is rejected due to an error
}); Does this solve the issue? Egge-Jan
... View more
04-11-2024
08:57 AM
|
0
|
1
|
1541
|
|
POST
|
Hmmm, what is the source of your TileLayer? Can you set a description in the portal, as indicated in the first part of my answer above...?
... View more
04-11-2024
08:38 AM
|
0
|
2
|
2435
|
|
POST
|
Hi @ForrestLin, Your LocalBaseMapSource will contain one or more Basemaps. If the Basemap is coming from ArcGIS Online (or ArcGIS Enterprise) then you can edit the tooltip text in your portal: it is the description you give to the item. Alternatively, if your Basemap is coming from another source, you can give your Basemap a title which will pop up in the tooltip. See code snippet below. For the Basemap which is based on the WMTSLayer, it is the title "BRT Achtergrondkaart (PDOK)" which will show in the tooltip. HTH, Egge-Jan import Basemap from "@arcgis/core/Basemap";
import WMTSLayer from "@arcgis/core/layers/WMTSLayer";
import LocalBasemapsSource from "@arcgis/core/widgets/BasemapGallery/support/LocalBasemapsSource";
import SpatialReference from "@arcgis/core/geometry/SpatialReference";
const epsg28992 = new SpatialReference({wkid:28992});
// // BRT Achtergrondkaart van PDOK als achtergrondkaart
let brt_Achtergrondkaart_PDOK = new Basemap({
baseLayers: [
new WMTSLayer({
url: "https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0?",
copyright:
"<a target='_top' href='https://www.pdok.nl/introductie/-/article/basisregistratie-topografie-achtergrondkaarten-brt-a-'>BRT Achtergrondkaart</a> van <a target='_top' href='https://www.pdok.nl/'>PDOK</a>",
activeLayer: {
id: "brtachtergrondkaart"
}
})
],
title: "BRT Achtergrondkaart (PDOK)",
id: "brtachtergrondkaart",
spatialReference: epsg28992,
thumbnailUrl: "brt_achtergrondkaart_pdok.jpg"
});
// Basiskaarten Esri Nederland
let topo_RD_EsriNL = new Basemap({portalItem: {id: "7aea6fa913a94176a1074edb40690318"}, id: "topo"}); // Topo RD --> https://www.arcgis.com/home/item.html?id=7aea6fa913a94176a1074edb40690318
let hr_Luchtfoto_Actueel = new Basemap({portalItem: {id: "9455a421f9a74887b03593cfa410abdf"}, id: "luchtfoto_hr"}); //Hoge Resolutie Luchtfoto RD
let lightGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"}, id: "lichtgrijs"}); //Lichtgrijze Canvas RD
let darkGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "62a3befb579e4d9f9c5c51576c8a7c25"}, id: "donkergrijs"}); //Donkergrijze Canvas RD
let osm_RD_EsriNL = new Basemap({portalItem: {id: "37292449670841d5bf5d590f4940c368"}, id: "osm_rd"}); //OpenStreetMap in RD via Esri Nederland
let baseMaps = new LocalBasemapsSource({
basemaps: [brt_Achtergrondkaart_PDOK, topo_RD_EsriNL, hr_Luchtfoto_Actueel, lightGrayCanvas_RD_EsriNL, darkGrayCanvas_RD_EsriNL, osm_RD_EsriNL]
});
export { baseMaps };
... View more
04-11-2024
01:47 AM
|
0
|
1
|
2461
|
|
POST
|
Hi @ReneRubalcava, Cool. Didn't know about this little widget. I did quickly create a small sample to test it (see code below) and it works fine. I do like this little compass indicating the orientation of the map (when not 0), allowing you to reset the map orientation (to 0). Of course I cannot speak for the original poster, but I think this offers most of the functionality requested. Here is my little sample: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript with UK data - DirectionalPad</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/css/main.css">
<script src="https://js.arcgis.com/4.29/"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/geometry/Point",
"esri/views/MapView",
"esri/widgets/DirectionalPad"
], function(Map, Point, MapView, DirectionalPad) {
var map = new Map({
basemap: {
portalItem: {
id: "5b9d5ac7e17f402a9111f1ca2c22bf56"
// GB Cartographic Local Names, hosted by EsriUKContent, see: https://www.arcgis.com/home/item.html?id=5b9d5ac7e17f402a9111f1ca2c22bf56
}
}
});
var view = new MapView({
spatialReference: 27700,
container: "viewDiv",
map: map,
center: new Point({x: 500000, y: 500000, spatialReference: 27700}),
zoom: 5
});
const directionalPad = new DirectionalPad({
view: view
});
view.ui.add(directionalPad, "bottom-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html> Cheers, Egge-Jan
... View more
03-25-2024
02:06 PM
|
2
|
5
|
4023
|
|
POST
|
Hi @Tom_Prutz, Good evening, I don't know whether your question is still relevant, as you posted it almost 2 weeks ago... Actually I think your code snippet should work, so we have got to find out why it is not working - as you say - in your case. You can find more information about reactiveUtils in the ArcGIS JS API Reference, and there it is suggested to put a question mark behind view. But I did test your sample without a question mark, and that did the job as well... reactiveUtils.when(
() => view?.stationary === true,
() => {
console.log("view is stationary now");
}); To see a working example you have a look at this blogpost ArcGIS JavaScript with UK data - URL.searchParams. It might seem an older post, but I just updated it tonight, to use reactiveUtils (instead of the deprecated, and now even completely removed, watchUtils which I used in an earlier version of the post). As you can see, the parameters in the URL are updated every time the view becomes stationary. So, in the end, the conclusion might be, that your issue is caused by your test setup. Can you please provide us with more information/code to explain what you are trying to do? Cheers, Egge-Jan
... View more
03-25-2024
01:13 PM
|
0
|
1
|
1854
|
|
POST
|
Hi @StephM, Can you please share the code snippet where you add your icons? In that way it will be easier for the community to provide suggestions on what to change to make it work (again) in the 4.29 version of the ArcGIS Maps SDK for JavaScript. I can provide you with an example - using an svg instead of base64, so maybe not completely what you are looking for... - that works fine in 4.29: 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);
} The actual file nederland.svg is 924x924 pixels in size, but renders perfectly on my custom button: Hope you will find a solution (and - maybe - share it here to the benefit of the community :-)) Cheers, Egge-Jan
... View more
03-25-2024
06:27 AM
|
0
|
0
|
1058
|
|
POST
|
I think you will have to add your own buttons to the map, or actually to the view.ui, with a function to move the center of the map an X number of units to the N/E/S/W when the respective button is clicked. I have never added pan buttons to the ui myself, but for some inspiration you may have a look at this example, where I do add a custom 'previous extent' and 'next extent' button to the user interface: ArcGIS Maps SDK for JavaScript example: Previous a... - Esri Community HTH, Egge-Jan
... View more
03-25-2024
06:07 AM
|
0
|
0
|
4052
|
|
POST
|
Hi @azy141, Can you please explain why you would want to add pan controls to your ArcGIS4 JS map? The reason I ask this, is because I think it is not necessary at all to add such controls to the user interface. It is quite easy to pan the map - grabbing it with a left mouse click, using the arrow keys on your keyboard or just with your fingers on a mobile device. So, the map is 'panable' by default. There is no need to add controls to activate a pan modus. What is your opinion about this? Cheers, Egge-Jan
... View more
03-25-2024
05:22 AM
|
0
|
2
|
4064
|
|
POST
|
Could this be useful? Building ArcGIS API for JavaScript Apps with NextJS (esri.com). It comes with the source code for the application in this blog post on github.
... View more
01-18-2024
04:54 AM
|
0
|
3
|
5899
|
|
POST
|
Yes, as @BlakeTerhune suggests, you should really consider, while you are already migrating from 3.x to 4.x, to also leave the legacy AMD modules, with their require() statement, behind and switch to ES Modules instead. For a quick comparison between AMD and ES, you might have a look at this blog post by @AndyGup : ArcGIS API for JavaScript – Working with frameworks and build tools just got easier – Part 2 (esri.com). And sample apps, provided by Esri, ae available here: jsapi-resources/esm-samples at main · Esri/jsapi-resources · GitHub
... View more
01-17-2024
10:19 AM
|
1
|
0
|
5968
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 1 | 03-11-2019 08:58 AM | |
| 1 | 03-30-2020 09:03 AM | |
| 2 | 12-12-2024 03:56 AM | |
| 2 | 04-15-2024 03:25 AM | |
| 2 | 03-25-2024 02:06 PM |
Activity Feed
- Got a Kudo for Re: How can I delete layers within a hosted feature service?. 04-21-2026 07:00 AM
- Got a Kudo for Create view from Hosted Feature Layer and define Area of Interest. 02-24-2026 10:01 AM
- Got a Kudo for ArcGIS API for Python: set an Area of Interest on a Hosted Feature Layer View?. 02-18-2026 09:13 AM
- Got a Kudo for Create view from Hosted Feature Layer and define Area of Interest. 12-27-2025 08:40 AM
- Kudoed Option to Redirect Applications that have been 'Retired' for MichaelKelly. 11-19-2025 02:26 AM
- Kudoed Instant app Sidebar template: Option to change the orders of the widgets on the left panel for GYarleque. 05-15-2025 12:28 AM
- Got a Kudo for Re: MS Power Automate Flow not running when Survey123 submitted. 04-15-2025 12:28 PM
- Got a Kudo for Re: MultiPolygon via ArcGIS REST API. 03-07-2025 01:35 PM
- Got a Kudo for Re: Sort coded value domains ArcGIS Online. 01-31-2025 02:17 AM
- Got a Kudo for Re: How do you allow other users to edit your web mapping applications in ArcGIS online?. 12-24-2024 09:27 AM
- Got a Kudo for Re: Show/hide components?. 12-12-2024 11:20 AM
- Got a Kudo for Re: Show/hide components?. 12-12-2024 09:48 AM
- Posted Re: Show/hide components? on ArcGIS JavaScript Maps SDK Questions. 12-12-2024 03:56 AM
- Kudoed Re: Show/hide components? for OmarKawach. 12-12-2024 03:40 AM
- Posted Show/hide components? on ArcGIS JavaScript Maps SDK Questions. 12-10-2024 03:04 AM
- Got a Kudo for ArcGIS Maps SDK for JavaScript example: custom button (calcite-action with SVG). 11-21-2024 09:31 AM
- Got a Kudo for Re: Change Default 'ALL' label of Search Widget. 09-03-2024 03:46 AM
- Got a Kudo for Re: Deleting last 3 characters using field calculator in ArcGIS Pro (UK Postcode). 06-07-2024 04:08 PM
- Got a Kudo for Re: How do I copy a Web Mapping Application that I own?. 05-02-2024 07:25 AM
- Got a Kudo for Create view from Hosted Feature Layer and define Area of Interest. 04-25-2024 08:58 AM
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
11-19-2025
02:25 AM
|