Here is a step-by-step Tutorial for creating a simple Web App using the ArcGIS Online version of the Experience Builder.
You can view this Tutorial in HTML format.
http://davidapps.net/exb/EXBTutorial
You may download the entire Tutorial as a single PDF File.
http://davidapps.net/exb/EXBTutorial.pdf
You will be using the following widgets.
Here is a preview of the Web App you will be creating:
https://experience.arcgis.com/experience/eace3c015bed4ddfbaf20f61a3ddbffe/
If you want to add Custom Widgets, you will need to use the Developer Edition of the Experience Builder.
You can view this Tutorial in HTML format.
http://davidapps.net/exb/EXBDevTutorial
You may download the entire Tutorial as a single PDF File.
http://davidapps.net/exb/EXBDevTutorial.pdf
You will learn how to add the following Custom Widgets designed by Robert Scheitlin.
Here is a preview:
Note: You must use Firefox to open this.
http://davidapps.net/exb/ParcelMapV2
Best regards,
David Das
@DavidDas__GISP thank you very much for the tutorial and efforts! What you put together helps fills a big gap in Esri's Experience Builder documentation, namely, the lack of examples to help clarify the implementation and use of the various features, including the widgets. ESRI - TAKE NOTE PLEASE!!!!
Question: I implemented the Query widget for a couple of parcel feature layers we use. In Spatial filter, for "Geometries from a map," it will show the features which intersect the shape drawn (as documented). Is there a way to just return those >>within<< a shape drawn (e.g. rectangle or polygon)?
Also, in "Selected features from data source" (n the Query widget), there is "Spatial relationship rules." I cannot find an example which clarifies the use of such, and how it would be helpful. Do you have anything to add to this, based on your experience?
Thanks!
Hi John,
Thanks for the kind words!
Question 1: I implemented the Query widget for a couple of parcel feature layers we use. In Spatial filter, for "Geometries from a map," it will show the features which intersect the shape drawn (as documented). Is there a way to just return those >>within<< a shape drawn (e.g. rectangle or polygon)?
Answer: You are correct. The Query Widget will only return features that intersect your drawn shape.
You would like to see an enhancement to return features that are within your drawn shape.
Explanation: When you select Geometries from a map
Check Drawn graphic
It will only select features that intersect your drawn graphic.
The Query Widget will return all the Parcels that are intersected by the Rectangle.
You would like to add an option to return only the parcels that are within your Rectangle.
I would like to have this enhancement added as well!
I can use the Point Tool to add a point on the map.
This will return a single parcel which is intersected by the point.
Question 2:
Also, in "Selected features from data source" (n the Query widget), there is "Spatial relationship rules." I cannot find an example which clarifies the use of such, and how it would be helpful. Do you have anything to add to this, based on your experience?
Answer:
I agree with you. There are no examples to showcase the power of the advanced capabilities of the Query Widget.
What the Query Widget allows you to do is find features on your map that Intersect, Cross, Overlap, Touch another feature on the map.
For example:
This is classic Spatial Analysis.
The Query Widget that was recently added to the Experience Builder encapsulates the power of GIS in performing Spatial Searches.
Explanation:
Turn on Spatial Filter | Filter by | Selected features from data source
Add Filter Layer
Add all the layers you have in your Web Map
Select all the Layers
Open your Parcel Query
By default only 1 Spatial Relation Rule is enabled.
Expand the drop down and enable all 8 rules
Now you are ready to run your Spatial Analysis.
You can set your Spatial Filter to Selecting Features from a data source
Or, you can set your Spatial Filter to Drawn Graphic
Example 1:
Find all the Parcels Contained in Zip Code 85322
Select Zip Code 85322 from the List Widget
Set your Filter Layer = Zip Code
Set your Spatial Relationship = Contain
Apply
The Spatial Search returns 1108 parcels
The results are shown 100 per page.
You have to page through to see all the 1108 parcels.
Clicking on a result will zoom to the Parcel.
Example 2:
Find all parcels that Overlap the boundary of Zip Code 85322
Apply
There are 127 Parcels that Overlap Zip Code 85322
This is due to inaccuracies in the geometry of our Zip Code and Parcel Boundary Layers.
Zip Codes do not normally intersect Parcel Boundaries.
But you get the idea.
You will soon have an alternative solution to the Query widget
The Enhanced Search Widget by Robert Scheitlin.
Robert designed the Enhanced Search Widget for the Web AppBuilder Developer Edition that combines all the Attribute Search, Graphical Search and Spatial Search into a single widget that is simple and intuitive to use.
Here is a demo on how it works:
https://gis.maricopa.gov/GIO/HistoricalAerial/
Search for the example Parcel 211-67-062E
The map zooms to the selected Parcel
Example 1:
Let’s say you want to find all the Parcels within 300 ft of your selected Parcel.
Open the Spatial Tab
Click on the Buffer Tool
This draws a 300 ft green buffer around your selected Parcel
Click on the Intersected By Tool.
Choose Buffer
There are 15 Parcels within 300 ft of your selected Parcel
Example 2:
Find all the Parcels within 300 ft of a point on the map
Open the By Shape Tab
Engage the Point Tool.
Drop a point on a Street Intersection.
8 Parcels are found
Example 3:
Find all the Parcels that Touch these 8 Parcels
Open the By Spatial Tab
Click on the Touched By Tool
This time choose Selection
There are 14 Parcels that touch your original selection of 8 Parcels
Example 4:
Find all the Zip Codes that are within 0.5 miles of a City
Open the By Value Tab
Select City of Chandler
Search
Open the By Spatial Tab
Draw a 0.5 mile Buffer around the City of Chandler
Select Zip Code from the drop-down list.
Engage the Intersected By Tool
Select Buffer
There are 18 Zip Codes within 0.5 miles of the City of Chandler
For a more detailed explanation of the features and capabilities of Robert’s Enhanced Search Widget see this User Guide:
http://www.davidapps.net/docs/parcel/help/enhanced_search_widget.htm
Robert is in the process of migrating his Custom Widgets from the Web AppBuilder platform to the Experience Builder platform.
The Enhanced Search Widget is the centerpiece of all our Web AppBuilder Apps.
We are anxiously waiting for this widget to be ported to the Experience Builder Developer Edition.
Until this happens, you can always develop your Web Apps using the Web AppBuilder Developer Edition and then embed that into an Experience Builder Website.
For example, here are 4 Web AppBuilder Apps within a multi-page Experience Builder website.
https://experience.arcgis.com/experience/c26b108e31444e45bdc2f24559fb03ec/
The Web AppBuilder and Experience Builder platforms offer an elegant solution for creating beautiful, interactive and responsive web apps and websites without writing a single line of code!
Best regards,
David Das
@DavidDas__GISP thank you very much for clarifying things with examples, esp with the spatial analysis. They answered more of my questions than Esri's documentation did.
Regarding the issue of the lack of a feature which would allow you to select parcels Contained in a drawn polygon (as opposed to intersecting such), I thought I had a scheme but, after testing, it did not work. Let me explain, and perhaps you have an answer ...
First, for my web map, I created 3 simple geometry feature layers: a point layer, a line layer, and a polygon layer.
Next, I added all 3 geometry feature layers to my web map.
Next, in Experience Builder, I added the Edit(beta) widget and tied it to the three geometry feature layers. This allows me to add points/lines/polygons to the map while using the web app, or modify such, or delete such. This works like a charm.
Following your info above, I added a Query tied to my Parcel feature layer. During configuration, in the Select data pane of Add Filter Layer, I figure I would select the point, line, and polygon layers which I added to my map. However, when I descend into my map's layer "tree" I do not see them! In fact, there is only a small subset of geometry feature layers I see which I can select in my web map. I have no idea why this is.
Well, be that as it may, I clicked on "Add Data" at the bottom and separately selected the 3 feature layers.
When I bring up my web app, I turn on the parcel feature layer as well as the point, line, and polygon feature layers in my map. With the Edit(beta) widget, I draw a polygon around a set of parcels (again, this polygon is tied to the polygon feature layer). Next, I select the drawn polygon (yes, it becomes highlighted).
Next, I bring up the Query widget. While the polygon feature layer appears in the pull-down list, the text below the list says 0 features are selected (eh? the polygon is selected). I set the spatial filter to Contain, then run. No parcels selected. I then tried using Within. Still no go.
My suspicion of why my scheme did not work is that, when configuring the Query widget, I selected the polygon feature as a separate layer outside of my web map, rather than a feature layer within my web map
Hi John,
Thanks for that detailed explanation of how you created your Web Map, and added the Edit Widget in Experience Builder that allows you to draw points, lines and polygons.
Let me set up a test case and see if I can reproduce the problem and explore if there is a solution.
I understand all you want to do is draw a rectangle, circle or polygon and find all the Parcels that are fully contained.
At the moment the Query Widget allows you do draw any shape and return features that intersect them.
Best regards,
David
Hi John,
Success!!
It is possible to select polygons that are Contained in a drawn polygon within the Query Widget.
I followed your idea of drawing a polygon with the Edit Widget and then running a Spatial Search using the Contained Rule.
All the Spatial Relationships within the Query Tool are honored including Contain.
I made this simple Experience Builder Project for you to try out.
https://experience.arcgis.com/experience/826295ea0a7344699360f284308e7456/
This has 4 layers:
First, try out the basics.
Example 1:
Find the Parcel that Intersects Desert Mountain School
Select Desert Mountain School from the List Widget.
Open the Query Widget and Select Parcel as your Search Layer
Set your Filter Layer = Schools
Relationship = Intersect
1 Parcel is found
Set Relationship = Within
Again 1 Parcel is found.
This is working.
Example 2:
Find all Parcels within 30 ft of a Street.
Select a Street by using the Selection Tool.
Use the Rectangle Tool.
Set your Selection Mode to Partially or completely within.
You have selected a Street
Set the Filter Layer = Street
Relationship = Intersect
Set Buffer Distance = 30 ft
19 Parcels lie within 30 ft of this Street Segment.
So, this is working as expected.
Notice that you can set the Selection Mode in the Selection Tool to Completely Contained.
Draw a Rectangle around a Parcel
1 Parcel is Selected.
Ideally, you want this Selection Mode added to the Query Widget as an Enhancement.
So, here is the workaround.
Clear the Selection
Notice the Green Polygon added as a Test Feature.
Select Poly1 from the List
Set Filter Layer = Polygon
Set Relationship = Contain
Leave the Buffer Distance blank
It finds the Parcel within the Green Polygon.
Now add your own polygon using the Edit Widget
Open the Edit Widget.
Add Feature
Add a Polygon Feature
Draw a Polygon around 2 Parcels.
Name this new Polygon = Poly2
Add
Notice, that a new Polygon has been added to your List.
Select Poly2 from the List
Open the Query Widget.
Set Filter Layer = Polygon
Relationship = Contain
The Query Wizard correctly returns 2 parcels.
This is exactly what you wanted.
Although this method would work, it is overkill for wanting to do such a simple task as changing the Selection Mode in the Query Widget.
As you can see, the option to change the Selection Mode is already present in the Selection Tool.
It should not be too difficult to add a Selection Mode for the Drawn Graphic in the Query Widget.
Jianxia Song is the Product Manager. She is the ultimate expert. It would be her decision to add this enhancement request.
I would like to point out that the By Shape Tab in Robert Scheitlin’s Enhanced Search Widget also does not include the option to change Selection Mode. It defaults to Partially or Completely within. The reason being this is the most commonly used mode.
Here is a screenshot of the By Shape Tab in Robert’s Enhanced Search Widget.
This is the By Value Tab
This is the By Spatial Tab
Notice, the collection of Spatial Relationship Rules.
You can select which Spatial Relationship Rules you want to keep during configuration.
As you can see the new Query Widget in the Experience Builder was heavily inspired by the Enhanced Search Widget in the Web AppBuilder.
The ESRI Development Team has done a terrific job in bringing this powerful functionality to the Experience Builder platform.
They share quite the same functionality. The GUI in the Enhanced Search Widget is more compact and intuitive.
The Query Wizard allows the user to do a regular search by Attributes plus perform a graphical search and a Spatial Search with Buffer capabilities.
This certainly took a lot of complex programming!
Many thanks to the developers who worked on this.
Cheers!
David Das
@DavidDas__GISP am glad you were able to get things working. However, I cannot. Let me elaborate.
In my web map I have numerous layers. As shown below, I created 3 geometry layers which are grouped under 'Site Sketch Layer': 'Sketched Polygons for Sites,' 'Sketched Lines for Sites,' and 'Sketched points for Sites.' These are very simple ones I created.
In Experience Builder, in the Query widget and, specifically, for the Parcel layer, if I go to "Selected features from data source" and click on "Add filter layer," I see the entry for my web map but what i expand it out, I do not see the about three geometry layers. In fact, there are many other geometry layers (e.g municipal boundary layers) I do not see:
So what I ended up doing is adding those three feature layers separately (see below).
However, as I noted before, if I go into my live web app, draw a polygon via the Edit(beta) widget (see below) over a number of parcels, then bring up the Query widget, you can see it shows the polygon feature layer but, even tho said polygon is selected, the Query widget says "0 records are selected for the filter." Clicking Apply returns nothing.
I gather you are not seeing the same behavior as I am when configuring the Query widget?
Hi John,
Thanks so much for that detailed description of the problem with the screenshots. This makes it easier to grasp the scope of your Web App.
The test web app that I created with a small dataset is shared with Everyone so you can follow along.
If you open this URL:
https://experience.arcgis.com/experience/826295ea0a7344699360f284308e7456/
You should see this initial view with all layers turned on.
At the bottom right, the status box should say 0 features selected.
Open the Layers Widget and turn off every layer except the Polygon Layer.
The reason being, you want to select a Single Polygon from the Polygon Layer.
Open the Selection Tool on the Top Left.
Select the Rectangle Tool to select a Single Polygon like so:
The status box should now indicate that 1 feature is selected.
Note: This is the key!
The Spatial Search in the Query Widget will not work unless that Status Box says that 1 or more features have been selected.
Can you repeat the same steps on your Web App to see if the Status Box says 1 feature selected?
If so, then the rest will work.
Turn on the Parcel Layer.
Open the Query Widget and Select Parcel.
Set Filter Layer = Polygon
It should indicate that 1 Record has been selected in the Polygon Layer.
Set Relationship = Contain
The Query Widget correctly returns 1 Parcel within the selected Green Polygon.
So, you see the key is it to getting the Status Box on the bottom right to indicate that 1 or more features from the Filter Layer has been selected.
If the status box says 0 features, then nothing will work.
I have shared the hosted feature service = EditFeatures with Everyone.
https://services.arcgis.com/ykpntM6e3tHvzKRJ/arcgis/rest/services/EditFeatures/FeatureServer
This has 4 editable layers
You can use this to set up a test Web Map.
I have shared my Test Web Map = EditFeaturesMap with Everyone.
https://maricopa.maps.arcgis.com/home/webmap/viewer.html?webmap=8bd93b0c206d4c40b50876b9655fc919
What works for a simple test case may not always translate to a real world scenario where multiple layers are involved with hundreds of attributes.
I see that you have a pretty complex collection of data layers in your Web Map.
You have indicated that many of the layers do not show up when you attempt to Add Filter Layers.
This may be a design limitation.
Then again, what you are trying to do is very simple. All you wish is to have an additional Selection Method to the Query Widget.
So this can be implemented as a user selectable choice during the configuration of Geometries from a Map like so:
Add Selection Mode
If you add this Enhancement Request I am sure Jianxia Song will take care of it.
Best regards,
David Das
@DavidDas__GISP I did exactly the first set of steps you noted, which allowed the rectangle on the right to be selected and confirmed that 1 feature and record are selected. See below. I click Apply, and I get "Features displayed: 0 - 0 / 0", the same as on my web app