|
BLOG
|
Search Widget In deze oefening implementeren we een zoekfunctie voor records in een dataset, met als voorbeeld Nederlandse gemeenten in een FeatureLayer. Hiervoor voegen we een Search widget toe aan de basiskaart die we eerder gemaakt hebben. De hier gebruikte laag Gemeenten (Bestuurlijke Grenzen 2019) komt uit de Living Atlas of the World en wordt aangeboden door Esri Nederland. Aandachtspunten: In de configuratie van de Search widget kun je één of meerdere kolommen opgeven waarop gezocht moet worden. In ons voorbeeld gebruiken we twee kolommen: searchFields: ["Gemeentenaam", "GM_Code"] En je kunt aangeven of het zoekresultaat precies moet matchen of niet. Door exactMatch: false te zetten kun je zeer flexibel, ook op een gedeelte van een woord. Hieronder staat de volledige code van de applicatie. En kijk hier om de zoekbalk in actie te zien. Gerelateerde oefening: https://community.esri.com/people/EPolle_TensingInternational/blog/2019/05/13/aan-de-slag-met-arcgis-javascript-adres-zoeken <!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 - Feature zoeken</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"
], function(Map, Point, MapView, FeatureLayer, Search) {
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,
sources: [
{
layer: featureLayerGemeenten,
searchFields: ["Gemeentenaam", "GM_Code"],
suggestionTemplate: "{Gemeentenaam} ({GM_Code})",
exactMatch: false,
outFields: ["Gemeentenaam", "GM_Code"],
placeholder: "Zoek gemeente (naam of code)"
}
],
includeDefaultSources: false
});
view.ui.add([searchWidget], "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
... View more
05-31-2019
08:35 AM
|
0
|
0
|
540
|
|
POST
|
Hi Jack, Thanks for providing this additional example. I zoomed out to make sure the full dataset was visible (i.e. all the records were within the view extent). According to my explanation above, in this case, both the Layer View Count and the Layer Count should return the same result. But apparently, as you do proof in your example, they don't... Sorry, I can not explain this behavior 😞 Maybe someone from Esri can jump in here? Kelly Hutchins? BR, Egge-Jan
... View more
05-31-2019
02:59 AM
|
0
|
4
|
5354
|
|
POST
|
Hi Tom, Yes, [Date_Refined] = "Medieval". Did you try that already? If it doesn't work, it should be 'Medieval'. (I always forget whether it should be single or double quotes.) The Field Calculator only affects the selected records (unless there is no selection; in that case all records will be updated). Please let me know how you are proceeding. If you think your issue is solved, don't forget to mark the question as being answered. Cheers, Egge-Jan
... View more
05-31-2019
02:18 AM
|
0
|
0
|
1807
|
|
POST
|
Hi Jack, No, maybe I don't really get what you are after...? In the example you included you are accessing a Feature Service with all Census Tracts for all of the United States, including Puerto Rico, while you are zoomed in to New York. So I can imagine that the FeatureLayerView does not contain all 73,642 Tracts, but only those needed to visualize New York... You want to query more than is actually visible, you say, so I think you should not query the FeatureLayerView, but something else (the FeatureLayer itself....). Does this make sense?
... View more
05-30-2019
01:33 PM
|
0
|
6
|
5354
|
|
POST
|
Hi Jack Fairfield, From the documentation (ArcGIS API for JavaScript 4.11): A FeatureLayerView represents the LayerView of a FeatureLayer after it has been added to a Map in either a MapView or SceneView. Apparently, as you code sample shows, this FeatureLayerView is updated every time you zoom in or out and the queryFeatureCount() only returns the number of features within the view extent. Solution: If you want to query more than just the features within the view extent you should not query the FeatureLayerView, but instead the FeatureLayer itself. See the code snippet (modified from your sample) below: querying the layerView will return a limited number of features (depending on the zoom level) whereas querying the featureLayer will always return 73,642, i.e. the total number of Census Tracts in the Feature Service. So, accessing the FeatureLayer itself will allow you to query more features than currently present in the view extent. Does this solve your issue? Egge-Jan view.whenLayerView(featureLayer).then(function (layerView) {
layerView.watch("updating", function (value) {
if (!value) {
featureLayer
.queryFeatureCount()
.then(function (results) {
console.log(results);
})
layerView
.queryFeatureCount()
.then(function (results) {
console.log(results);
})
.catch(function (error) {
console.error("query failed: ", error);
});
}
});
});
... View more
05-30-2019
05:07 AM
|
0
|
8
|
5354
|
|
POST
|
DataCamp? Writing Functions and Stored Procedures in SQL Server | DataCamp HTH, E-J
... View more
05-29-2019
07:26 AM
|
0
|
0
|
5303
|
|
POST
|
Hi Tom Piggott, Workflow (manual process): Select records WHERE "Layer" IN ('_med',' _m',' med','MED') Use Field Calculator to update field "Date_Refined" with value 'medieval' (only selected records will be affected) Change selection and update (using Field Calculator) with other value Repeat until all records have a value for "Date_Refined" Does this work for you? Egge-Jan
... View more
05-29-2019
04:28 AM
|
0
|
0
|
1807
|
|
POST
|
Hi Zahid, You might login to ArcGIS Online Assistant, look for your item and click I want to... > View an Item's JSON Under popupInfo you will find a JSON description of the popup in the Map Viewer. But I don't think you can use this description in your JavaScript application... I think you have to do some additional configuration. Let's see what others say about this. HTH, Egge-Jan
... View more
05-29-2019
03:55 AM
|
0
|
0
|
3226
|
|
POST
|
Hi Zahid Mia, I have had a quick look at your parks map. Don't know if it is possible to turn on the popup as is. Think you have to have a look at popupTemplate. See below - full working example at the bottom. HTH, Egge-Jan I have tried two options: 1. // showing all fields, but hyperlink not working
var popupTemplate = { // autocasts as new PopupTemplate()
title: "{Name}",
content: "{*}"
}; 2. // html configuration of popup, with working hyperlink
var popupTemplate = { // autocasts as new PopupTemplate()
title: "{Name}",
content: "<p>Code: {CODE}</p><br><a target='blank' href='{HOTLINK}'>More info</a>"
};
Full working example: <html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>National Parks in England</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/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/LayerList"
], function (Map, MapView, FeatureLayer, LayerList) {
var map = new Map({
basemap: "topo-vector",
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-2.2297829, 53.0219186],
zoom: 7
});
// showing all fields, but hyperlink not working
<!-- var popupTemplate = { // autocasts as new PopupTemplate() -->
<!-- title: "{Name}", -->
<!-- content: "{*}" -->
<!-- }; -->
// html configuration of popup, with working hyperlink
var popupTemplate = { // autocasts as new PopupTemplate()
title: "{Name}",
content: "<p>Code: {CODE}</p><br><a target='blank' href='{HOTLINK}'>More info</a>"
};
var parksLayer = new FeatureLayer({
url: "https://services.arcgis.com/JJzESW51TqeY9uat/ArcGIS/rest/services/National_Parks_England/FeatureServer/0",
popupTemplate: popupTemplate
});
map.add(parksLayer);
// Following section for showing layer list. You need a require "esri/widgets/LayerList" and function LayerList
var layerList = new LayerList({
view: view,
// This section is for adding legend to each layer
listItemCreatedFunction: function (event) {
const item = event.item;
if (item.layer.type != "group") {
item.panel = {
content: "legend",
open: false
};
}
}
});
// Adds widget below other elements in the top right corner of the view
view.ui.add(layerList, "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
... View more
05-29-2019
02:00 AM
|
1
|
2
|
3226
|
|
POST
|
Hi Brian Bulla, Here Microsoft provides some information that might be relevant to you, including tips on troubleshooting project compatibility issues: Porting, Migrating, and Upgrading Projects - Visual Studio 2015 | Microsoft Docs It looks like you will have to address all 195 errors. But as many of them will be related it might be the case that the moment you solve one of them a whole bunch of errors will be solved at once. Options to consider: Contact the IT department for help. After all it was them who decided to upgrade both your OS and your VS without warning you beforehand, right? Make a fresh start an rebuild your project from scratch in the 2015 environment. In the long run that might be easier to maintain than an old project that has been ported, migrated and upgraded from a previous version, I would think. BTW, Microsoft recommends upgrading to Visual Studio 2019... HTH, Egge-Jan
... View more
05-28-2019
01:39 PM
|
2
|
0
|
3353
|
|
POST
|
Hi Alice Elliott, Two suggestions: Did you try the Append geoprocessing tool? You could take the shapefile where the TXPYRS_NAME field has the greatest length (i.e. 35) as the Target Dataset and the other shapefiles as Input Datasets. In this way you will avoid the chance that a tax payers name will be too long for the destination field. Not sure if it will work, but you can give it a try... Workaround to increase the field length: Rename the original field (form TXPYRS_NAME to e.g. TXPYRS_NAME_BCK) Create a new field TXPYRS_NAME with the proper field length Use Field Calculator to populate TXPYRS_NAME with value from TXPYRS_NAME_BCK Drop field TXPYRS_NAME_BCK et voila... your done 🙂 Hope either of these will solve your issue. Egge-Jan
... View more
05-28-2019
08:43 AM
|
1
|
0
|
1865
|
|
POST
|
Hi Mark Norris-Rogers, You might also have a look at this discussion, and at the answers given there: arcpy - Loop for exporting shapefiles from an existing shapefile - Geographic Information Systems Stack Exchange HTH, Egge-Jan
... View more
05-28-2019
07:57 AM
|
1
|
1
|
4952
|
|
POST
|
Hi Maria Roquet Guàrdia, Did you have a look at this one? SQL reference for query expressions used in ArcGIS—ArcGIS Pro | ArcGIS Desktop It is not a formal training course, I know, but trying to apply the examples on your own data might be insightful. As with any language, the best way is to learn SQL step-by-step. HTH, Egge-Jan
... View more
05-28-2019
04:02 AM
|
1
|
1
|
5303
|
|
POST
|
Hi Brian Borg, Can you please show us the code you have written so far? It looks like your question is not specific enough to trigger people to answer. As soon as you show what you have got right now, someone might be able to come up with suggestions to improve your application. HTH, Egge-Jan
... View more
05-28-2019
01:46 AM
|
0
|
0
|
835
|
|
BLOG
|
https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/02/aan-de-slag-met-arcgis-javascript-inleiding Expand In eerdere oefeningen hebben we widgets toegevoegd aan onze web mapping application, zoals de Search widget om op adres te kunnen zoeken, en de BasemapGallery widget om de achtergrondkaart te kunnen wijzigen. Standaard is een widget uitgeklapt als deze wordt toegevoegd aan de view. Een nadeel hiervan is natuurlijk dat deze dan veel ruimte in beslag neemt op het scherm. Als oplossing hiervoor biedt de ArcGIS API for Javascript de Expand widget, waarmee je een widget onder een knop kunt verbergen, zodat de gebruiker deze zelf kan in- en uitklappen. De standaardprocedure hiervoor is: maak een widget aan maak vervolgens een Expand aan om deze widget in te stoppen voeg de Expand toe aan de view In het voorbeeld hieronder hebben we de Expand voor beide widgets ook nog in één en dezelfde groep gestoken (group: "top-right"), zodat de basiskaartgalerij automatisch dichtklapt als het zoekveld wordt geopend, en andersom. Deze methode kun je ook op andere widgets toepassen. Klik hier om het in- en uitklappen van widgets 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 - Widget inklappen</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"
], function(Map, Point, MapView, WMTSLayer, 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: "https://www.pdok.nl/o/iv-pdok-theme/images/pdok/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 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
05-22-2019
08:57 AM
|
0
|
0
|
687
|
| 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
|