Latest Contributions by Egge-Jan_Pollé

‎02-03-2020

Hi vakhtang zubiashvili, Can you show us a sample of your code? Egge-Jan

‎02-03-2020

Hi vakhtang zubiashvili, Which version of the JavaScript API are you using, 3.x or 4.x? I can provide you with a little example (using 4.13) where a parcel is highlighted when clicked and 'unhighlighted' when the popup is closed: Aan de slag met ArcGIS JavaScript - DKK Geocoder The relevant piece of code is shown below. But, as you can see from my notes, it was not me who figured this out. No it was Robert Scheitlin, GISP‌... Is this example useful to you? Cheers, Egge-Jan // Make sure the clicked parcel is highlighted - code sample provided by Robert Scheitlin, GISP on GeoNet view.popup.watch('selectedFeature', function(gra){ if(gra){ view.graphics.removeAll(); let h = view.highlightOptions; gra.symbol = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [h.color.r,h.color.g, h.color.b, h.fillOpacity], outline: { // autocasts as new SimpleLineSymbol() color: [h.color.r,h.color.g, h.color.b, h.color.a], width: 1 } }; view.graphics.add(gra); }else{ view.graphics.removeAll(); } }); view.popup.watch('visible', function(vis){ if(!vis){ view.graphics.removeAll(); } });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

‎01-30-2020

Hi Samuel Hildebrand, I'd recommend Notepad++. I have been using this free source code editor myself for many years now, as it supports several languages. I started using it to create little MapBasic apps (way back in my MapInfo years) and nowadays I use it for Python, JavaScript, HTML, essentially everything... (Hmm, everything except R. For your R scripts I'd recommend RStudio.) HTH, Egge-Jan

‎01-22-2020

Hi Bethany Alcamo, What makes you think the size limit is the issue here? Less than 6.5KB does not sound like an awful lot to me... this amount of data should be well below any size limit, I would guess. Can you please explain a little bit more about what you are trying to do, and what error messages you do receive? With this additional information the community might be able to help. BR, Egge-Jan

‎01-20-2020

Hi Joe Praise Mbagwu, Looking at the Esri exams available I would suggest you start with a Desktop Certification, https://www.esri.com/training/certification-find-exam/desktop/, either at Entry or at Associate level. The number of years of working experience is not a strict requirement, but just a recommendation. You have got some experience from your studies and your internship, and you can extend your knowledge by study, study, study, study... Esri offers some learning plans with online resources to prepare for the exams - see links below. https://www.esri.com/training/catalog/5cc77886055f9042ac8c5e45/esri-arcgis-desktop-entry-certification-19-001/ https://www.esri.com/training/catalog/5cc7636c055f9042ac8c353b/esri-arcgis-desktop-associate-certification-19-001/ https://www.esri.com/training/catalog/5cc777f8055f9042ac8c5dbc/esri-arcgis-desktop-professional-certification-19-001/ Good luck with the preparations! Please make sure you pass the exam of your choice in one go. Best regards, Egge-Jan

‎01-19-2020

https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/02/aan-de-slag-met-arcgis-javascript-inleiding LayerList widget met actie In een eerdere oefening in deze cursus hebben we een LayerList widget toegevoegd, zodat een FeatureLayer in de kaart aan en uitgezet kan worden. Nu gaan we de deze LayerList uitbreiden met een button waarop men kan klikken om de labels van kaartlagen aan en uit te zetten. Zoals in de code hieronder te zien is, wordt er aan elke laag in de LayerList een knop toegevoegd met als icoon een labeltje. En vervolgens is er een functie die wacht tot er op deze knop geklikt wordt, om de labels bij de betreffende laag aan (of juist uit) te zetten. Voor meer achtergrondinformatie over hoe dit werkt is er ook een voorbeeld van Esri beschikbaar: LayerList widget with actions | ArcGIS API for JavaScript 4.14 Volg de link hieronder om het eindresultaat te zien: Aan de slag met ArcGIS JavaScript - Labels aan- of uitzetten <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Aan de slag met ArcGIS JavaScript - Labels aan- of uitzetten</title> <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css"> <script src="https://js.arcgis.com/4.14/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .esri-basemap-gallery__item-thumbnail { width: auto; } </style> <script> require([ "esri/Map", "esri/geometry/Point", "esri/views/MapView", "esri/layers/WMTSLayer", "esri/layers/FeatureLayer", "esri/widgets/LayerList", "esri/widgets/Search", "esri/tasks/Locator", "esri/Basemap", "esri/widgets/BasemapGallery", "esri/widgets/BasemapGallery/support/LocalBasemapsSource", "esri/widgets/Expand" ], function(Map, Point, MapView, WMTSLayer, FeatureLayer, LayerList, Search, Locator, Basemap, BasemapGallery, LocalBasemapsSource, Expand) { // BRT Achtergrondkaart van PDOK als achtergrondkaart var brtachtergrondkaart = new Basemap({ baseLayers: [ new WMTSLayer({ url: "https://geodata.nationaalgeoregister.nl/tiles/service/wmts?request=GetCapabilities&service=WMTS", 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_pdok", thumbnailUrl: "images/map.jpg" }); // Basiskaarten Esr Nederland var lightGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"}}); //Lichtgrijze Canvas RD var darkGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "62a3befb579e4d9f9c5c51576c8a7c25"}}); //Donkergrijze Canvas RD var topo_RD_EsriNL = new Basemap({portalItem: {id: "7aea6fa913a94176a1074edb40690318"}}); //Topo RD var open_Topo_RD_EsriNL = new Basemap({portalItem: {id: "0698b71eb7cf47898086d072e574ac32"}}); //Open Topo RD var stratenkaart_RD_EsriNL = new Basemap({portalItem: {id: "9fe1a753955f418fa1cbaf1c47610a47"}}); //Stratenkaart RD var luchtfoto_RD_EsriNL = new Basemap({portalItem: {id: "38e1a1c6ee2c421290622400d22ecf57"}}); //Luchtfoto RD var dutchBasemaps = new LocalBasemapsSource({ basemaps : [brtachtergrondkaart, topo_RD_EsriNL, open_Topo_RD_EsriNL, stratenkaart_RD_EsriNL, luchtfoto_RD_EsriNL, lightGrayCanvas_RD_EsriNL, darkGrayCanvas_RD_EsriNL] }); var map = new Map({ basemap: lightGrayCanvas_RD_EsriNL }); var popupTemplateMun = {title: "Gemeente {Gemeentenaam}", content: "CBS Code: {GM_Code}"}; var rendererMun = {type: "simple", symbol: {type: "simple-fill", style: "none", outline: {width: 1.5, color: "#F5B041"}}}; var labelClassMun = {symbol: {type: "text", color: "#F5B041", haloColor: "white", haloSize: "4px", font: { size: 10}}, labelExpressionInfo: {expression: "$feature.Gemeentenaam"}}; var dutchMunicipalitiesLayer = new FeatureLayer({ url: "https://services.arcgis.com/nSZVuSZjHpEZZbRo/arcgis/rest/services/Bestuurlijke_Grenzen_Gemeenten_2019/FeatureServer/0", title: "Gemeenten (2019)", popupTemplate: popupTemplateMun, renderer: rendererMun, labelingInfo: [labelClassMun], labelsVisible: false }); var popupTemplateProv = {title: "Provincie {Provincienaam}", content: ""}; var rendererProv = {type: "simple", symbol: {type: "simple-fill", style: "none", outline: {width: 2.5, color: "#8B4513"}}}; var labelClassProv = {symbol: {type: "text", color: "#8B4513", haloColor: "white", haloSize: "4px", font: {size: 12, weight: "bold"}}, labelExpressionInfo: {expression: "$feature.Provincienaam"}}; var dutchProvincesLayer = new FeatureLayer({ url: "https://services.arcgis.com/nSZVuSZjHpEZZbRo/ArcGIS/rest/services/Bestuurlijke_Grenzen_Provincies_2019/FeatureServer/0", title: "Provincies (2019)", popupTemplate: popupTemplateProv, renderer: rendererProv, labelingInfo: [labelClassProv], labelsVisible: false }); map.addMany([dutchMunicipalitiesLayer, dutchProvincesLayer]); var view = new MapView({ spatialReference: 28992, container: "viewDiv", map: map, center: new Point({x: 155000, y: 463000, spatialReference: 28992}), zoom: 3 }); var layerList = new LayerList({ view: view, listItemCreatedFunction: function(event){ const item = event.item; item.actionsSections = [ [ { title: "Labels aanzetten", className: "esri-icon-labels", id: "labels" } ] ]; } }); layerList.on("trigger-action", function(event) { if (event.action.id === "labels") { if (event.item.layer.labelsVisible === false) { event.item.layer.labelsVisible = true; event.action.title = "Labels uitzetten"; } else { event.item.layer.labelsVisible = false; event.action.title = "Labels aanzetten"; } } }); layerListExpand = new Expand({ expandIconClass: "esri-icon-layer-list", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/ expandTooltip: layerList.label, view: view, content: layerList, expanded: true, group: "top-right" }); var basemapGallery = new BasemapGallery({ view: view, source: dutchBasemaps }); basemapGalleryExpand = new Expand({ expandIconClass: "esri-icon-basemap", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/ expandTooltip: basemapGallery.label, view: view, content: basemapGallery, group: "top-right" }); var searchWidget = new Search({ view: view, includeDefaultSources: false }); searchWidget.sources = [{ locator: new Locator({ url: "https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer"}), // GeocodeServer van Esri Nederland singleLineFieldName: "SingleLine", // Deze optie zorgt er voor dat je kunt zoeken op postcode/huisnummer combinatie, bijvoorbeeld: 4181 AE 38 placeholder: searchWidget.allPlaceholder // "Find address or place" voor de English locale, "Adres of plaats zoeken" voor de Nederlandse locale }] searchWidgetExpand = new Expand({ expandIconClass: "esri-icon-search", expandTooltip: searchWidget.label, view: view, content: searchWidget, group: "top-right" }); view.ui.add([searchWidgetExpand, layerListExpand, basemapGalleryExpand], "top-right"); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

‎01-08-2020

Hi Herdis Gudbrandsdottir, Please refer to the Frequently Asked Questions: Which browser is recommended for the beta testing? The chrome browser is recommended for this beta testing. IE11 and below are not supported. Maybe end users who want to stick with IE should consider to upgrade to v12...? Cheers, Egge-Jan

‎01-08-2020

Hi Ben Cochrane, Please have a look at the Tool Reference: Features To JSON—Conversion toolbox | ArcGIS Desktop I guess your input shape is not in lat/long? I think you will have to set the parameter outputToWGS84 to true (as it defaults to false). Does this solve your issue? Cheers, Egge-Jan

‎01-07-2020

Hi Andres Giraldo, I wanted to recommend you to have a look at Microsoft Flow, but apparently Microsoft Flow has recently been renamed to Microsoft Power Automate. (According to this blog "Microsoft has opted to rename Microsoft Flow as Power Automate to better align it with the rest of the Power Platform.") Anyways, I think this 'new' Microsoft Power Automate provides, as far as I can see, the functionality you require: "Include powerful workflow automation directly in your apps with a no-code approach that connects to hundreds of popular apps and services." HTH, Egge-Jan

‎01-07-2020

Hi Siyabonga Kubeka, To get the X an Y coordinates of the pin, I only slightly modified your code: I removed console.info(evt.graphic.geometry); and replaced it with 2 new lines: console.log("X = ", evt.graphic.geometry.x); console.log("Y = ", evt.graphic.geometry.y); (See line 57 and 58 in the script below) This will print the coordinate values to the console. HTH, Egge-Jan <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>APPLICATION</title> <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.12/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> require([ "esri/widgets/Sketch", "esri/Map", "esri/layers/GraphicsLayer", "esri/views/MapView" ], function(Sketch, Map, GraphicsLayer, MapView) { const layer = new GraphicsLayer(); const map = new Map({ basemap: "streets", layers: [layer] }); const view = new MapView({ container: "viewDiv", map: map, zoom: 5, center: [90, 45] }); const sketch = new Sketch({ layer: layer, view: view, availableCreateTools: ["point"] }); view.ui.add(sketch, "top-right"); sketch.on('create', function(evt){ console.log("X = ", evt.graphic.geometry.x); console.log("Y = ", evt.graphic.geometry.y); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

‎01-06-2020

Hi Bert Kraan, This sounds like a very broad question, and the answer depends very much on the requirements of your organization. A few possible steps - considering you will stick with the ArcGIS platform: get rid of the shape files 🙂 try to organize your data in one or more geodatabases - delete the duplicates, sort out the near duplicates metadata, metaDATA, METADATA!!! - please make sure to describe and document your data, so in the future the status of a data set will be clear to you - and to others. You should avoid, as you will surely agree, dependency on one and a single employee for this kind of information... So, the easiest way is to just write it down and attach this description to the data set. Do you need (or do you want) to share your geodata with third parties (contractors and/or the general public)? In that case you might consider a cloud-based mapping and analysis solution like ArcGIS Online. Hope to have provided you with some clues on where to start. If you have any further questions or remarks, just drop a line. Cheers, Egge-Jan

‎01-06-2020

Hi Caleb Schwind, Yes, KMLLayer is supported in the 4.x api since version 4.5: KMLLayer | ArcGIS API for JavaScript 4.14 You might have a look at this sample: KMLLayer | ArcGIS API for JavaScript 4.14 HTH, Egge-Jan

‎12-06-2019

https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/02/aan-de-slag-met-arcgis-javascript-inleiding GroupLayer Widget Met de GroupLayer widget kun je meerdere sublagen groeperen in een gemeenschappelijke laag. In dit voorbeeld maken we gebruik van een mooie set historische luchtfoto's en kaarten die we tegenkwamen op de ArcGIS Server van de Gemeente Tilburg. Deze foto's en kaarten zijn in de web app verdeeld in twee groepen, zodat je niet een hele lange lijst met lagen krijgt, maar een overzichtelijk lijstje met twee groepslagen. Door het gebruik van de optie visibilityMode: "exclusive" verschijnen er radiobuttons voor de sublagen. Hierdoor kun je eenvoudig heen en weer klikken tussen de luchtfoto's - van 1934 tot en met 2018 - en de kaarten - van 1760 tot en met 1976. Hier kun je de applicatie in actie zien: Geschiedenis van Tilburg | Historische Kaarten en Luchtfoto's De broncode staat hieronder. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="description" content="ArcGIS JS v4, Calcite Maps and Bootstrap Example"> <title>Geschiedenis van Tilburg | Historische Kaarten en Luchtfoto's</title>  <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.10.css">  <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.10.css">  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css"> <style> html, body { margin: 0; padding: 0; height: 100%; width: 100%; } panel { width: 500px; } table, th, tr, td { border: 1px solid #D3D3D3; padding: 5px; } td { width: 250px; vertical-align: bottom; } </style> </head> <body class="calcite-maps calcite-nav-top">  <nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bgcolor-dark-blue">  <div class="dropdown calcite-dropdown calcite-text-dark calcite-bg-light" role="presentation"> <a class="dropdown-toggle" role="menubutton" aria-haspopup="true" aria-expanded="false" tabindex="0"> <div class="calcite-dropdown-toggle"> <span class="sr-only">Toggle dropdown menu</span> <span></span> <span></span> <span></span> <span></span> </div> </a> <ul class="dropdown-menu" role="menu"> <li><a role="menuitem" tabindex="0" data-target="#panelInfo" aria-haspopup="true"><span class="glyphicon glyphicon-info-sign"></span> Over deze kaart</a></li> <li><a role="menuitem" tabindex="1" data-target="#panelGuide" aria-haspopup="true"><span class="glyphicon glyphicon-book"></span> Gebruiksaanwijzing</a></li> </ul> </div>  <div class="calcite-title calcite-overflow-hidden"> <span class="calcite-title-main">Geschiedenis van Tilburg</span> <span class="calcite-title-divider hidden-xs"></span> <span class="calcite-title-sub hidden-xs">Kijk terug in de tijd op oude luchtfoto's en kaarten</span> </div>  <ul class="nav navbar-nav calcite-nav"> <li> <div class="calcite-navbar-search calcite-search-expander"> <div id="searchWidgetDiv"></div> </div> </li> </ul> </nav>   <div class="calcite-map calcite-map-absolute"> <div id="mapViewDiv"></div> </div>   <div class="calcite-panels calcite-panels-left calcite-text-dark calcite-bg-light panel-group">  <div id="panelInfo" class="panel collapse in"> <div id="headingInfo" class="panel-heading" role="tab"> <div class="panel-title"> <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseInfo" aria-expanded="true" aria-controls="collapseInfo"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span><span class="panel-label"><b>Over deze kaart</b></span></a> <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelInfo"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a> </div> </div> <div id="collapseInfo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingInfo"> <div class="panel-body" style="width: 500px;"> <a href="https://www.tilburg.nl/" target="_blank" title="Tilburg"><img src="https://www.tilburg.nl/typo3conf/ext/tilburg_sitepackage/Resources/Public/Images/logo.svg" alt="Tilburg" width="278px" height="54px"></a><br><br> <p>Op deze site worden de volgende gegevens van de <a href="https://www.tilburg.nl/" target="_blank">Gemeente Tilburg</a> getoond:</p> <ul> <li>Historische kaarten, van 1760 tot nu</li> <li>Historische luchtfoto's, van 1934 tot nu</li> </ul> <p>Gebruik de knoppen aan de rechterkant van het scherm om de kaart te verkennen. Hier kunt u ook een andere luchtfoto of een andere kaart kiezen.</p> <p>Deze interactieve kaart is samengesteld door <a href="https://www.tensing.com/">Tensing GIS Consultancy B.V.</a></p> </div> </div> </div> <div id="panelGuide" class="panel collapse in"> <div id="headingInfo" class="panel-heading" role="tab"> <div class="panel-title"> <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseInfo" aria-expanded="true" aria-controls="collapseInfo"><span class="glyphicon glyphicon-book" aria-hidden="true"></span><span class="panel-label"><b>Gebruiksaanwijzing</b></span></a> <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelGuide"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a> </div> </div> <div id="collapseInfo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingInfo"> <div class="panel-body" style="width: 500px;"> <table> <thead><tr><th colspan="2">Knoppen aan de rechterkant van het scherm</th></tr></thead> <tbody> <tr> <td><div class="esri-widget--button"><span title="Zoeken" class="esri-icon-search"></span></div>Adres zoeken</td> <td><div class="esri-widget--button"><span title="Lijst met lagen" class="esri-icon-layer-list"></span></div>Kaartlagen aan of uitzetten</td> </tr> <tr> <td><div class="esri-widget--button"><span title="Basiskaartgalerij" class="esri-icon-basemap"></span></div>Basiskaart kiezen</td> <td><div class="esri-widget--button"><span title="Standaard kaartweergave" class="esri-icon-home"></span></div>Terug naar beginpositie</td> </tr> <tr> <td><div class="esri-widget--button"><span title="Inzoomen" class="esri-icon-plus"></span></div><div class="esri-widget--button"><span title="Uitzoomen" class="esri-icon-minus"></span></div>In- en uitzoomen op de kaart</td> <td><div class="esri-widget--button"><span title="Uitklappen" class="esri-icon-right-triangle-arrow"></span></div><div class="esri-widget--button"><span title="Inklappen" class="esri-icon-down-arrow"></span></div>Groepslaag in- of uitklappen</td> </tr> <tr> <td><div class="esri-widget--button"><span title="Zichtbaar" class="esri-icon-visible"></span></div><div class="esri-widget--button"><span title="Onzichtbaar" class="esri-icon-non-visible"></span></div>Laag zichtbaar of onzichtbaar maken</td> <td><div class="esri-widget--button"><span title="Beschrijving" class="esri-icon-description"></span></div>Informatie opvragen over de laag</td> </tr> <tr> <td colspan="2"><div class="esri-widget--button"><span title="Kompasoriëntatie resetten" class="esri-icon-dial"></span></div>Kaart terugzetten naar het noorden (als deze geroteerd is)<br><br><b>Kaart roteren:</b> hou de rechter muisknop ingedrukt om de kaart te draaien</td> </tr> </tbody> </table> </div> </div> </div> </div>  <script type="text/javascript"> var dojoConfig = { packages: [{ name: "bootstrap", location: "https://esri.github.io/calcite-maps/dist/vendor/dojo-bootstrap" }, { name: "calcite-maps", location: "https://esri.github.io/calcite-maps/dist/js/dojo" }] }; </script>  <script src="https://js.arcgis.com/4.11/"></script> <script> require([ // ArcGIS "esri/WebMap", "esri/views/MapView", // Widgets "esri/Basemap", "esri/widgets/BasemapGallery", "esri/widgets/BasemapGallery/support/LocalBasemapsSource", "esri/widgets/Expand", "esri/geometry/Point", "esri/tasks/Locator", "esri/widgets/Home", "esri/widgets/Zoom", "esri/widgets/Compass", "esri/widgets/Search", "esri/widgets/ScaleBar", "esri/widgets/Attribution", "esri/layers/FeatureLayer", "esri/layers/TileLayer", "esri/layers/MapImageLayer", "esri/widgets/LayerList", "esri/layers/GroupLayer", // Bootstrap "bootstrap/Collapse", "bootstrap/Dropdown", // Calcite Maps "calcite-maps/calcitemaps-v0.10", // Calcite Maps ArcGIS Support "calcite-maps/calcitemaps-arcgis-support-v0.10", "dojo/domReady!" ], function(WebMap, MapView, Basemap, BasemapGallery, LocalBasemapsSource, Expand, Point, Locator, Home, Zoom, Compass, Search, ScaleBar, Attribution, FeatureLayer, TileLayer, MapImageLayer, LayerList, GroupLayer, Collapse, Dropdown, CalciteMaps, CalciteMapArcGISSupport) { /****************************************************************** * * Create the map, view and widgets * ******************************************************************/ // Basemaps Esr Nederland var lightGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"}}); //Lichtgrijze Canvas RD var darkGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "62a3befb579e4d9f9c5c51576c8a7c25"}}); //Donkergrijze Canvas RD var topo_RD_EsriNL = new Basemap({portalItem: {id: "7aea6fa913a94176a1074edb40690318"}}); //Topo RD var open_Topo_RD_EsriNL = new Basemap({portalItem: {id: "0698b71eb7cf47898086d072e574ac32"}}); //Open Topo RD var stratenkaart_RD_EsriNL = new Basemap({portalItem: {id: "9fe1a753955f418fa1cbaf1c47610a47"}}); //Stratenkaart RD var luchtfoto_RD_EsriNL = new Basemap({portalItem: {id: "38e1a1c6ee2c421290622400d22ecf57"}}); //Luchtfoto RD var localBasemaps = new LocalBasemapsSource({ basemaps : [topo_RD_EsriNL, open_Topo_RD_EsriNL, stratenkaart_RD_EsriNL, luchtfoto_RD_EsriNL, lightGrayCanvas_RD_EsriNL, darkGrayCanvas_RD_EsriNL] }); var municipalitiesRenderer = { "type": "simple", "symbol": { "type": "simple-fill", "style": "none", "outline": { "width": 3, "color": [255,0,0,255] }, } } var tilburgLayer = new FeatureLayer({ url: "https://services.arcgis.com/nSZVuSZjHpEZZbRo/arcgis/rest/services/Bestuurlijke_Grenzen_Gemeenten_2019/FeatureServer/0", definitionExpression: "Gemeentenaam = 'Tilburg'", renderer: municipalitiesRenderer, title: "Gemeente Tilburg (grens)" }); var baseUrlTilburg = "https://geo.tilburg.nl/server2/rest/services/"; //ArcGIS REST Services Directory van de Gemeente Tilburg var urlHistKaartTilburg = baseUrlTilburg.concat("HistorischeKaart/MapServer") // Historische kaarten Tilburg var hist_kaart_Tilburg_1976 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 11, title: "1976"}], title: "Kaart Tilburg 1976", visible: false}); var hist_kaart_Tilburg_1969 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 10, title: "1969"}], title: "Kaart Tilburg 1969", visible: false}); var hist_kaart_Tilburg_1953 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 9, title: "1953"}], title: "Kaart Tilburg 1953", visible: false}); var hist_kaart_Tilburg_1950 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 8, title: "1950"}], title: "Kaart Tilburg 1950", visible: false}); var hist_kaart_Tilburg_1945 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 7, title: "1945"}], title: "Kaart Tilburg 1945", visible: false}); var hist_kaart_Tilburg_1934 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 6, title: "1934"}], title: "Kaart Tilburg 1934", visible: false}); var hist_kaart_Tilburg_1924 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 5, title: "1924"}], title: "Kaart Tilburg 1924", visible: false}); var hist_kaart_Tilburg_1921 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 4, title: "1921"}], title: "Kaart Tilburg 1921", visible: false}); var hist_kaart_Tilburg_1914 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 3, title: "1914"}], title: "Kaart Tilburg 1914", visible: false}); var hist_kaart_Tilburg_1880 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 2, title: "1880"}], title: "Kaart Tilburg 1880", visible: false}); var hist_kaart_Tilburg_1792 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 1, title: "1792"}], title: "Kaart Tilburg 1792", visible: true}); var hist_kaart_Tilburg_1760 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 0, title: "1760"}], title: "Kaart Tilburg 1760", visible: false}); var histkaartenGroupLayerTitle = "Historische Kaarten Tilburg"; var histkaartenGroupLayer = new GroupLayer({ title: histkaartenGroupLayerTitle, visible: true, visibilityMode: "exclusive", layers: [hist_kaart_Tilburg_1976,hist_kaart_Tilburg_1969,hist_kaart_Tilburg_1953,hist_kaart_Tilburg_1950,hist_kaart_Tilburg_1945,hist_kaart_Tilburg_1934,hist_kaart_Tilburg_1924,hist_kaart_Tilburg_1921,hist_kaart_Tilburg_1914,hist_kaart_Tilburg_1880,hist_kaart_Tilburg_1792,hist_kaart_Tilburg_1760] }); // Historische Luchtfoto's Tilburg var lufo_Tilburg_2018 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2018/MapServer"), title: "Luchtfoto Tilburg 2018", visible: false}); var lufo_Tilburg_2017 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2017/MapServer"), title: "Luchtfoto Tilburg 2017", visible: false}); var lufo_Tilburg_2016 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2016/MapServer"), title: "Luchtfoto Tilburg 2016", visible: false}); var lufo_Tilburg_2015 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2015/MapServer"), title: "Luchtfoto Tilburg 2015", visible: false}); var lufo_Tilburg_2014 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2014/MapServer"), title: "Luchtfoto Tilburg 2014", visible: false}); var lufo_Tilburg_2013 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2013/MapServer"), title: "Luchtfoto Tilburg 2013", visible: false}); var lufo_Tilburg_2012 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2012/MapServer"), title: "Luchtfoto Tilburg 2012", visible: false}); var lufo_Tilburg_2011 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2011/MapServer"), title: "Luchtfoto Tilburg 2011", visible: false}); var lufo_Tilburg_2010 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2010/MapServer"), title: "Luchtfoto Tilburg 2010", visible: false}); var lufo_Tilburg_2008 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2008/MapServer"), title: "Luchtfoto Tilburg 2008", visible: false}); var lufo_Tilburg_2006 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2006/MapServer"), title: "Luchtfoto Tilburg 2006", visible: false}); var lufo_Tilburg_2002 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2002/MapServer"), title: "Luchtfoto Tilburg 2002", visible: false}); var lufo_Tilburg_1992 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto1992/MapServer"), title: "Luchtfoto Tilburg 1992", visible: false}); var lufo_Tilburg_1976 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto1976/MapServer"), title: "Luchtfoto Tilburg 1976", visible: false}); var lufo_Tilburg_1955 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto1955/MapServer"), title: "Luchtfoto Tilburg 1955", visible: false}); var lufo_Tilburg_1944 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto1944/MapServer"), title: "Luchtfoto Tilburg 1944", visible: false}); var lufo_Tilburg_1934 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto1934/MapServer"), title: "Luchtfoto Tilburg 1934", visible: true}); var luchtfotoGroupLayerTitle = "Historische Luchtfoto's Tilburg"; var luchtfotoGroupLayer = new GroupLayer({ title: luchtfotoGroupLayerTitle, visible: true, visibilityMode: "exclusive", layers: [lufo_Tilburg_2018,lufo_Tilburg_2017,lufo_Tilburg_2016,lufo_Tilburg_2015,lufo_Tilburg_2014,lufo_Tilburg_2013,lufo_Tilburg_2012,lufo_Tilburg_2011,lufo_Tilburg_2010,lufo_Tilburg_2008,lufo_Tilburg_2006,lufo_Tilburg_2002,lufo_Tilburg_1992,lufo_Tilburg_1976,lufo_Tilburg_1955,lufo_Tilburg_1944,lufo_Tilburg_1934] }); // Map var map = new WebMap({ basemap: topo_RD_EsriNL }); // View var mapView = new MapView({ spatialReference: 28992, container: "mapViewDiv", map: map, center: new Point({x: 134000, y: 400000, spatialReference: 28992}), zoom: 7, padding: { top: 50, bottom: 0 }, ui: {components: []} }); // Popup and panel sync mapView.when(function(){ CalciteMapArcGISSupport.setPopupPanelSync(mapView); }); // Search - add to navbar var searchWidget = new Search({ container: "searchWidgetDiv", view: mapView, includeDefaultSources: false }); searchWidget.sources = [{ locator: new Locator({ url: "https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer"}), // GeocodeServer van Esri Nederland singleLineFieldName: "SingleLine", // Deze optie zorgt er voor dat je kunt zoeken op postcode/huisnummer combinatie, bijvoorbeeld: 4181 AE 38 placeholder: searchWidget.allPlaceholder // "Find address or place" voor de English locale, "Adres of plaats zoeken" voor de Nederlandse locale }] CalciteMapArcGISSupport.setSearchExpandEvents(searchWidget); var basemapGallery = new BasemapGallery({ container: document.createElement("div"), view: mapView, source: localBasemaps }); basemapGalleryExpand = new Expand({ expandIconClass: "esri-icon-basemap", expandTooltip: basemapGallery.label, view: mapView, content: basemapGallery.domNode, group: "top-right" }); var layerList = new LayerList({ container: document.createElement("div"), view: mapView, 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" && event.item.layer.title !== luchtfotoGroupLayerTitle) { // If the information action is triggered, then open the item details page of the service layer. window.open(event.item.layer.url); } else { window.open(baseUrlTilburg); } }); layerListExpand = new Expand({ expandIconClass: "esri-icon-layer-list", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/ expandTooltip: layerList.label, // optional, defaults to "Expand" for English locale view: mapView, content: layerList.domNode, expanded: true, group: "top-right" }); var home = new Home({ view: mapView, group: "top-right" }); var zoom = new Zoom({ view: mapView, group: "top-right" }); var compass = new Compass({ view: mapView, group: "top-right" }); mapView.ui.add([layerListExpand, basemapGalleryExpand, home, zoom, compass], "top-right"); var scaleBar = new ScaleBar({ view: mapView, unit: "metric" }); mapView.ui.add(scaleBar, "bottom-left"); var attribution = new Attribution({ view: mapView }); mapView.ui.add(attribution, "manual"); map.layers.addMany([luchtfotoGroupLayer, histkaartenGroupLayer, tilburgLayer]); }); </script> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

‎12-06-2019

https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/02/aan-de-slag-met-arcgis-javascript-inleiding Swipe Widget Met de Swipe widget kun je, met behulp van een schuifbalk, twee kaartbeelden over elkaar heen schuiven om ze visueel met elkaar te vergelijken. Deze widget is beschikbaar in de ArcGIS API for Javascript 4, vanaf versie 4.13. In dit voorbeeld maken we gebruik van twee lagen - 1925 en 1980 - uit de Topotijdreis van het Kadaster en van Esri Nederland. De broncode staat hieronder. Klik hier om de applicatie in actie te zien. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Aan de slag met ArcGIS JavaScript - Swipe</title> <link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/css/main.css"> <script src="https://js.arcgis.com/4.13/"></script> <style> html, body { padding: 0; margin: 0; height: 100%; width: 100%; font-family: sans-serif; } #header { width: 100%; height: 70px; background-color: #113395; 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; } td { padding: 15px; } .dialogDiv { background-color: white; width: 480px; } .dialogHeader { color: white; font-weight: bolder; width: auto; background-color: #113395; padding: 5px; } .esri-basemap-gallery__item-thumbnail { width: auto; } </style> <script> require([ "esri/Map", "esri/widgets/Zoom", "esri/widgets/Home", "esri/widgets/Compass", "esri/geometry/Point", "esri/views/MapView", "esri/layers/WMTSLayer", "esri/widgets/Search", "esri/tasks/Locator", "esri/Basemap", "esri/widgets/BasemapGallery", "esri/widgets/BasemapGallery/support/LocalBasemapsSource", "esri/widgets/Expand", "esri/widgets/LayerList", "esri/widgets/Swipe", "esri/layers/TileLayer", "dojo/domReady!" ], function(Map, Zoom, Home, Compass, Point, MapView, WMTSLayer, Search, Locator, Basemap, BasemapGallery, LocalBasemapsSource, Expand, LayerList, Swipe, TileLayer) { document.getElementById("aboutDiv").style.display = "block"; // BRT Achtergrondkaart van PDOK als achtergrondkaart let brtachtergrondkaart = new Basemap({ baseLayers: [ new WMTSLayer({ url: "https://geodata.nationaalgeoregister.nl/tiles/service/wmts?request=GetCapabilities&service=WMTS", 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_pdok", thumbnailUrl: "images/map.jpg" }); // Basiskaarten Esr Nederland let lightGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"}}); //Lichtgrijze Canvas RD let darkGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "62a3befb579e4d9f9c5c51576c8a7c25"}}); //Donkergrijze Canvas RD let topo_RD_EsriNL = new Basemap({portalItem: {id: "7aea6fa913a94176a1074edb40690318"}}); //Topo RD let open_Topo_RD_EsriNL = new Basemap({portalItem: {id: "0698b71eb7cf47898086d072e574ac32"}}); //Open Topo RD let stratenkaart_RD_EsriNL = new Basemap({portalItem: {id: "9fe1a753955f418fa1cbaf1c47610a47"}}); //Stratenkaart RD let luchtfoto_RD_EsriNL = new Basemap({portalItem: {id: "38e1a1c6ee2c421290622400d22ecf57"}}); //Luchtfoto RD let dutchBasemaps = new LocalBasemapsSource({ basemaps : [brtachtergrondkaart, topo_RD_EsriNL, open_Topo_RD_EsriNL, stratenkaart_RD_EsriNL, luchtfoto_RD_EsriNL, lightGrayCanvas_RD_EsriNL, darkGrayCanvas_RD_EsriNL] }); let map = new Map({ basemap: open_Topo_RD_EsriNL }); const nl_1925 = new TileLayer({ url: "https://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_1925/MapServer" }); const nl_1980 = new TileLayer({ url: "https://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_1980/MapServer" }); map.addMany([nl_1980,nl_1925]) let view = new MapView({ spatialReference: 28992, container: "viewDiv", map: map, center: new Point({x: 92556, y: 437534, spatialReference: 28992}), zoom: 8 }); view.ui.components = [ "attribution" ]; let aboutDlg = document.getElementById("aboutDiv"); let aboutExpand = new Expand({ expandIconClass: "esri-icon-lightbulb", expandTooltip: "Over deze applicatie", view: view, expanded: true, content: aboutDlg, group: "top-left" }); let searchWidget = new Search({ view: view, includeDefaultSources: false }); searchWidget.sources = [{ locator: new Locator({ url: "https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer"}), // BAG GeocodeServer van Esri Nederland singleLineFieldName: "SingleLine", // Deze optie zorgt er voor dat je kunt zoeken op postcode/huisnummer combinatie, bijvoorbeeld: 4181 AE 38 name: "Adres in Nederland", placeholder: "Zoek adres" }] searchWidgetExpand = new Expand({ expandIconClass: "esri-icon-search", expandTooltip: searchWidget.label, view: view, content: searchWidget, group: "top-left" }); let basemapGallery = new BasemapGallery({view: view, source: dutchBasemaps}); basemapGalleryExpand = new Expand({ expandIconClass: "esri-icon-basemap", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/ expandTooltip: basemapGallery.label, view: view, content: basemapGallery, group: "top-left" }); let 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); } }); layerListExpand = new Expand({ expandIconClass: "esri-icon-layers", expandTooltip: layerList.label, view: view, content: layerList, group: "top-left" }); let zoom = new Zoom({view: view}); let homeWidget = new Home({view: view}); let compass = new Compass({view: view}); // create a new Swipe widget const swipe = new Swipe({ leadingLayers: [nl_1925], trailingLayers: [nl_1980], position: 35, // set position of widget to 35% view: view }); // add the widget to the view view.ui.add(swipe); view.ui.add([aboutExpand, searchWidgetExpand, zoom, homeWidget, compass, basemapGalleryExpand, layerListExpand], "top-left"); }); </script> </head> <body> <div id="header"> <div id="headertext" class="stretch">Schuif door de tijd: 1925, 1980, nu...</div> </div> <div id="viewDiv"></div> <div class="dialogDiv" id="aboutDiv" style="display:none"> <div class="dialogHeader">Swipe widget</div> <table> <tr> <td> <h3>Kaartlagen over elkaar heen schuiven</h3> <p>Voorbeeld met de <a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Swipe.html" target="blank">Swipe widget</a> in de ArcGIS API for JavaScript 4.13.</p> <p><div class="esri-widget--button"><span title="Schuif de balk heen en weer over de kaartlagen." class="esri-icon-drag-vertical"></span></div>Schuif de balk heen en weer over de kaartlagen om een vergelijking te maken tussen 1925 en 1980.</p> <p><div class="esri-widget--button"><span title="Zie lijst met lagen voor aanvullende informatie." class="esri-icon-layers"></span></div>In deze demo wordt gebruik gemaakt van twee lagen uit de <a href="https://www.topotijdreis.nl/" target="blank">Topotijdreis</a> van het Kadaster en Esri Nederland.</p> <p>Open de <b>Lijst met lagen</b> voor meer informatie. Als je één van de lagen uitzet, dan kun je ook een vergelijking maken met de huidige tijd.</p> <p>Deze applicatie is samengesteld door:<br><a href="https://www.tensing.com/" target="blank">Tensing GIS Consultancy B.V.</a></p> </td> </tr> </table> </div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

‎12-04-2019

Re-bonsoir Eric DUCOS, Ce sont des bonnes nouvelles ! Votre problème a donc été résolu, n'est-ce pas ? Pourriez-vous s'il vous plaît fermer votre question pour indiquer qu'elle a été résolue ? BR, Egge-Jan

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

My Ideas

Latest Contributions by Egge-Jan_Pollé

Re: Remove highlight from all layer

Re: Remove highlight from all layer

Re: Best IDE's for ArcGIS

Re: How to increase data limit on add features using rest API

Re: hello, I am a young intern working with a fibre optic company as a GIS analyst. I discovered the professional exams, and I'll really want to take a professional ESRI exam to be the best I can be. I saw some things as regards having up to four years of

Aan de slag met ArcGIS JavaScript - Labels aan/uit

Re: Could you possibly add an error message when the app is opened in IE?

Re: Shapefile to JSON

Re: How can I create a system or function that triggers an automatic email when a state of a column in my database changes in SQL server, the form is developed in AppBuilder, JavaScript

Re: How to get the coordinates of the pin/marker?

Re: how to organise and store gisdata

Re: Display KML File in 4.X API

Aan de slag met ArcGIS JavaScript - Lagen groeperen

Aan de slag met ArcGIS JavaScript - Swipe

Re: exporter la liste du contenu arcgisonline

ArcGIS API for Python: set an Area of Interest on...

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