|
BLOG
|
https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/02/aan-de-slag-met-arcgis-javascript-inleiding Watch Het is mogelijk om met de ArcGIS API for JavaScript te reageren op een verandering in de eigenschap van een instance. Dit kun je doen door dergelijke wijzigingen bij te houden (of te bewaken) met de watch() method. In het voorbeeld hieronder houden we op deze manier de schaal van de view in de gaten. Dit doen wij in dit voorbeeld om te bepalen welke basiskaart getoond moet worden. Op verzoek van de eindgebruikers tonen we bij een kleine schaal een rustige basiskaart (Topo RD van Esri Nederland), terwijl we op grote schaal een basiskaart met meer detail laten zien (Open Topo van Jan-Willem van Aalst, die ook door Esri Nederland wordt aangeboden). De grens voor het wisselen van de basiskaart is gelegd bij schaal 1:20.000. Dus elke keer als de gebruiker in- of uitzoomt wordt de schaal gecheckt, en zodra de schaal groter is dan 1:20:000 wordt de Open Topo basiskaart getoond. (Let op: scale geeft het schaalgetal terug, en hoe groter het schaalgetal, hoe kleiner de schaal! Dus zodra het schaalgetal groter is dan 20.000 wordt de Topo RD basiskaart getoond.) De volledige code staat hieronder en hier kun je het voorbeeld in actie 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 - Wijzigingen bijhouden</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/Map",
"esri/Basemap",
"esri/geometry/Point",
"esri/views/MapView"
], function(Map, Basemap, Point, MapView) {
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 map = new Map({
basemap: topo_RD_EsriNL
});
var rdOrigin = new Point({
x: 155000,
y: 463000,
spatialReference: 28992
});
var view = new MapView({
spatialReference: 28992,
container: "viewDiv",
map: map,
center: rdOrigin,
zoom: 3
});
// watch handler: the callback fires each time the scale of the view changes
var handle = view.watch('scale', function(newScale) {
console.log("Scale: ", newScale);
console.log("Basemap: ", map.basemap.title);
if (newScale > 20000) {
map.basemap = topo_RD_EsriNL;
} else {
map.basemap = open_Topo_RD_EsriNL;
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
... View more
06-12-2019
05:27 AM
|
0
|
0
|
486
|
|
POST
|
Hi simo xu, Maybe this is what you are looking for: map.basemap = "satellite"; See example below where the basemap changes, depending on the scale of the view. What do you think? 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>Watching property changes</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css" />
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require(["esri/WebMap", "esri/views/MapView"], function(WebMap, MapView) {
var map = new WebMap({
basemap: "satellite"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65]
});
// watch handler: the callback fires each time the scale of the view changes
var handle = view.watch('scale', function(newScale) {
console.log("Scale: ", newScale);
console.log("Basemap: ", map.basemap.title);
if (newScale > 10000000) {
map.basemap = "satellite";
} else {
map.basemap = "streets";
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
... View more
06-12-2019
02:18 AM
|
1
|
3
|
3287
|
|
POST
|
Hi Robert Pollock, Following the link you provided I was able to download a valid item.pitemx file and open it up in ArcGIS Pro (version 2.3.3) - see screendump below. So: no, I do not have the same problem... 🙂 Please tell us a little more about your issue. Could you open the item.pitemx file in a proper text editor (e.g. Notepad++)? What does it look like? What error messages do you get when trying to open it with ArcGIS Pro? Again, everything works fine for me. HTH, Egge-Jan
... View more
06-11-2019
01:01 PM
|
0
|
4
|
2013
|
|
POST
|
Has your question been answered? You might consider to mark it as such 🙂
... View more
06-11-2019
08:35 AM
|
0
|
0
|
3473
|
|
POST
|
Hi Angela Deegan, Following the instructions from the AGOL Help (Organize layers—ArcGIS Online Help | ArcGIS), it looks like you have to delete each layer individually... You may wish to vote on this Idea: https://community.esri.com/ideas/12426 HTH, Egge-Jan
... View more
06-11-2019
03:20 AM
|
2
|
2
|
3473
|
|
POST
|
Hi Michael Vetter, Yes, that statement is correct, I would say. You should really only use React with the ArcGIS for JavaScript API if you're building an application that isn't necessarily map-centric. And why is that? React is a JavaScript library for building user interfaces. But most of the UI elements you possibly want to have in your map view - like the zoom in, zoom out and home button, the layer control and the legend, the print button, etc. etc. - can be created with widgets in the ArcGIS API for JavaScript. So, for any map-centric application I would stick with just the ArcGIS API in combination with VanillaJS (i.e. plain, regular JavaScript) as long as possible and only mix in React when really necessary. BTW, if you think your question has been answered you could mark it as such 🙂 Cheers, Egge-Jan
... View more
06-11-2019
02:22 AM
|
2
|
0
|
1658
|
|
POST
|
Hi Michael Vetter, My good old friend G came up with the following suggestions: Using React with the ArcGIS API for JavaScript Bootstrap your React Apps for the ArcGIS API for JavaScript Video | Esri Using widgets with React | ArcGIS API for JavaScript 4.11 Using the ArcGIS API for JavaScript in React Applications HTH, Egge-Jan
... View more
06-06-2019
01:34 AM
|
0
|
2
|
1658
|
|
POST
|
Hi Natalie Martinkus, Why shapefile? (There has been a time, way back in the days, that Esri was very proud of it's shapefile format, but these days are over now, I would say...) Alternatives: As mentioned above: you should be able to access the Feature Layer directly from within your desktop application (using your client's credentials) Or you can download the Feature Layer as a FGDB and open this one in ArcMap or ArcGIS Pro HTH, Egge-Jan
... View more
06-06-2019
01:07 AM
|
0
|
1
|
2727
|
|
BLOG
|
https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/02/aan-de-slag-met-arcgis-javascript-inleiding Compass Widget Ja, een goede kaart hoort noordgericht te zijn... maar soms is het ook leuk of nuttig om de plattegrond te draaien, om deze vanuit een ander perspectief te bekijken. Met de ArcGIS API for JavaScript 4.x maak je een web map die door de gebruiker gedraaid kan worden (dit is standaardfunctionaliteit). De kaart draaien, hoe doe je dat? Met de cursor op de kaart, de rechter muisknop ingedrukt houden en dan slepen. (Ja, misschien moet je dat even aan de eindgebruikers uitleggen. Het is immers niet heel intuïtief; het heeft bij mij ook een tijdje geduurd voordat ik dit in de gaten had...) In deze oefening voegen we een Compass widget toe, die de gebruiker in staat stelt om de kaart weer naar het noorden te draaien nadat men de kaart gedraaid heeft ("Kompasoriëntatie resetten"). Let op: met deze knop kan men de kaart dus niet roteren, dat moet met een rechter-muisknop-sleepactie gedaan worden. Alleen als men de kaart weer naar het noorden wil draaien, dan moet men op de kompasknop klikken. Hieronder staat de broncode. Klik hier om te zien hoe het draaien van de kaart werkt. <!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 - Kaart draaien</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/Map",
"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/Compass"
], function(Map, Point, MapView, WMTSLayer, Search, Locator, Basemap, BasemapGallery, LocalBasemapsSource, Expand, Compass) {
// 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: topo_RD_EsriNL
});
var view = new MapView({
spatialReference: 28992,
container: "viewDiv",
map: map,
center: new Point({x: 155000, y: 463000, spatialReference: 28992}),
zoom: 3
});
var compass = new Compass({
view: view
});
view.ui.add(compass, "top-left");
var basemapGallery = new BasemapGallery({
container: document.createElement("div"),
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.domNode,
group: "top-right"
});
var searchWidget = new Search({
container: document.createElement("div"),
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.domNode,
expanded: true,
group: "top-right"
});
view.ui.add([searchWidgetExpand, basemapGalleryExpand], "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
... View more
06-05-2019
06:37 AM
|
0
|
0
|
802
|
|
POST
|
Hi Natalie Martinkus, Could it be that your shapefile does contain geometry (points), but these points do not show up where you expect them to be? Test: Could you please double-click on one of the records in your attribute table to zoom in to it on the map? What happens now? Do you see a point on the map? Where is it located? Questions: Which desktop application are you using, ArcGIS ArcMap or ArcGIS Pro? And why are you downloading your data to a shapefile first, instead of accessing the Feature Layer directly from within your desktop application? BR, Egge-Jan
... View more
06-05-2019
05:55 AM
|
0
|
2
|
2727
|
|
POST
|
Hi Bram, You did not really describe the architecture of your application, but while you mentioned a map in ArcGIS Online, I supposed you have a basemap with a Feature Layer on top of it. This Feature Layer should contain the subtypes and domains, as explained above. You can manually prepare or use a Python script to create a Feature Class with subtypes and domains in ArcGIS ArcMap (or ArcGIS Pro, if you wish to) and publish it from there to ArcGIS Online. (Personally, I have written a Python script to prepare a FGDB with Feature Classes with the relevant functionality, just in case I have to ever implement it again...) P.S. Als je wilt kun je buiten dit forum om contact opnemen om e.e.a. nader te bespreken. Cheers, Egge-Jan
... View more
06-03-2019
05:16 AM
|
0
|
2
|
2024
|
|
POST
|
Hi IB Gemeente Amsterdam, Yes, this can be done by using subtypes with applied coded domains in your feature service. Introduction to subtypes—Geodatabases | ArcGIS Desktop Subtypes are a subset of features in a feature class, or objects in a table, that share the same attributes. They are used as a method to categorize your data. Subtypes allow you to do the following: Apply coded (or ranged) domains to the fields of a subtype, enabling you to constrain input information to a valid set of values. So, in your case, comments about either parking or traffic would be the subtypes, both showing a different range of domain values (subcategories) in a pull down list. Recently implemented this (for a customer in the Netherlands) and it was exactly what they wanted. Hope this helps, Egge-Jan
... View more
06-03-2019
04:34 AM
|
0
|
4
|
2024
|
|
BLOG
|
In deze serie blogposts verkennen we - stapje voor stapje - de mogelijkheden van de ArcGIS API for JavaScript van Esri. Het uiteindelijke doel is om zelfstandig een interactieve en gebruiksvriendelijke web mapping applicatie te kunnen bouwen. De voertaal bij deze cursus is Nederlands, en ook de data die we gebruiken hebben betrekking op Nederland. Dit zijn vaak data die door Esri Nederland via ArcGIS Online aangeboden worden. De bijzonderheid bij alle oefeningen is dus, dat de kaart niet in Web Mercator is geprojecteerd, maar in RD_New (EPSG:28992). Je bent van harte uitgenodigd om onderstaande voorbeelden te bestuderen, te kopiëren en naar eigen behoefte aan te passen. De lijst met oefeningen zal in de loop der tijd nog langer worden, dus kom gerust af en toe kijken of er nog iets nieuws is toegevoegd. Start: Instellen basiskaart:https://community.esri.com/people/EPolle_TensingInternational/blog/2019/05/11/aan-de-slag-met-arcgis-javascript-nederlandse-basiskaart Widgets: BasemapGallery: https://community.esri.com/people/EPolle_TensingInternational/blog/2019/05/13/aan-de-slag-met-arcgis-javascript-nederlandse-basiskaartgalerij Compass: https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/05/aan-de-slag-met-arcgis-javascript-kaart-draaien Expand: https://community.esri.com/people/EPolle_TensingInternational/blog/2019/05/22/aan-de-slag-met-arcgis-javascript-widgets-inklappen GroupLayer: https://community.esri.com/people/EPolle_TensingInternational/blog/2019/12/06/aan-de-slag-met-arcgis-javascript-lagen-groeperen Home: https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/25/aan-de-slag-met-arcgis-javascript-thuisknop Search: Locator I: https://community.esri.com/people/EPolle_TensingInternational/blog/2019/05/13/aan-de-slag-met-arcgis-javascript-adres-zoeken (met de BAG Geocoder van Esri Nederland) Locator II: https://community.esri.com/people/EPolle_TensingInternational/blog/2019/10/17/aan-de-slag-met-arcgis-javascript-dkk-geocoder (met de DKK Geocoder van Esri Nederland) FeatureLayer: https://community.esri.com/people/EPolle_TensingInternational/blog/2019/05/31/aan-de-slag-met-arcgis-javascript-feature-zoeken sources: https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/02/aan-de-slag-met-arcgis-javascript-meerdere-zoekbronnen Swipe: https://community.esri.com/people/EPolle_TensingInternational/blog/2019/12/06/aan-de-slag-met-arcgis-javascript-swipe Verschillende typen lagen toevoegen: CSVLayer: https://community.esri.com/people/EPolle_TensingInternational/blog/2019/05/20/aan-de-slag-met-arcgis-javascript-csv-bestand-toevoegen FeatureLayer: https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/19/aan-de-slag-met-arcgis-javascript-featurelayer-toevoegen WMTSLayer: https://community.esri.com/people/EPolle_TensingInternational/blog/2019/05/22/aan-de-slag-met-arcgis-javascript-wmts-laag-toevoegen Reageren op muisbewegingen (events): pointer-move : https://community.esri.com/people/EPolle_TensingInternational/blog/2019/05/12/aan-de-slag-met-arcgis-javascript-toon-cursorlocatie click : https://community.esri.com/people/EPolle_TensingInternational/blog/2019/05/11/aan-de-slag-met-arcgis-javascript-reverse-geocoding In- en uitzoomen: https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/12/aan-de-slag-met-arcgis-javascript-wijzigingen-bijhouden met de watch() method LayerList widget met actie: https://community.esri.com/people/EPolle_TensingInternational/blog/2020/01/19/aan-de-slag-met-arcgis-javascript-labels-aanuit
... View more
06-02-2019
07:37 AM
|
0
|
0
|
1081
|
|
BLOG
|
Search Widget Aan een Search widget kun je één of meerdere zoekbronnen toevoegen. In de web mapping applicatie hieronder combineren we de twee zoekbronnen die we in eerdere oefeningen afzonderlijk hebben behandeld. Voor de oefening https://community.esri.com/people/EPolle_TensingInternational/blog/2019/05/13/aan-de-slag-met-arcgis-javascript-adres-zoeken hebben we een Locator, namelijk de BAG Geocoder van Esri Nederland, als zoekbron gebruikt; Met de oefening https://community.esri.com/people/EPolle_TensingInternational/blog/2019/05/31/aan-de-slag-met-arcgis-javascript-feature-zoeken laten we zien hoe je een laag kunt doorzoeken op één of meerdere kolommen met attribuutwaarden. In de code hieronder zie je hoe we beide bronnen aan één Search widget toevoegen, zodat de eindgebruiker zowel op een adres als op een record uit een FeatureLayer kan zoeken. Klik hier om de gecombineerde zoekbalk 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 - Meerdere zoekbronnen</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/Map",
"esri/geometry/Point",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Search",
"esri/tasks/Locator"
], function(Map, Point, MapView, FeatureLayer, Search, Locator) {
var map = new Map({
basemap: {
portalItem: {
id: "7aea6fa913a94176a1074edb40690318" // Topo RD
}
}
});
var rdOrigin = new Point({
x: 155000,
y: 463000,
spatialReference: 28992
});
var view = new MapView({
spatialReference: 28992,
container: "viewDiv",
map: map,
center: rdOrigin,
zoom: 3
});
var featureLayerGemeenten = new FeatureLayer({
url: "https://services.arcgis.com/nSZVuSZjHpEZZbRo/arcgis/rest/services/Bestuurlijke_Grenzen_Gemeenten_2019/FeatureServer/0",
popupTemplate: {
// autocasts as new PopupTemplate()
title: "Gemeente {Gemeentenaam} </br>CBS Code: {GM_Code}",
overwriteActions: true
}
});
var searchWidget = new Search({
view: view,
allPlaceholder: "Gemeente of Adres",
sources: [
{
layer: featureLayerGemeenten,
searchFields: ["Gemeentenaam", "GM_Code"],
suggestionTemplate: "{Gemeentenaam} ({GM_Code})",
exactMatch: false,
outFields: ["Gemeentenaam", "GM_Code"],
name: "Gemeente in Nederland (2019)",
placeholder: "bijvoorbeeld: Vijfheerenlanden"
},
{
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: "Adres zoeken", // "Find address or place" voor de English locale, "Adres of plaats zoeken" voor de Nederlandse locale
name: "Adres in Nederland"
}
],
includeDefaultSources: false
});
view.ui.add([searchWidget], "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
... View more
06-02-2019
05:51 AM
|
0
|
0
|
504
|
| 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 |
| Online Status |
Offline
|
| Date Last Visited |
11-19-2025
02:25 AM
|