Select to view content in your preferred language

How to recreate this widget? Identifying ranked list of suitable patches

75
2
18 hours ago
Labels (1)
VaibhavChowdhary
New Contributor

Hi everyone,

I am seeking advice on the functionality on this tool called SiteRight (which I assume was made in Experience Builder) (https://tnc-ps-web.s3.amazonaws.com/India_SiteRight/Planning/index.html?state=ma)

There is a small button in the top left corner of the map that says "Run Analysis". It allows the user to type in a required energy capacity and then have the tool identify a ranked list of areas that are most suitable (see screenshot below).

Is there a specific widget for this? I'm guessing it's running a custom Locate function on a precomputed suitability raster. 

Any advice would be greatly appreciated. I am on a Creator account and would upload screenshots, but I'm getting a message saying I do not have permission to upload images.

Kind regards

0 Kudos
2 Replies
EMani
by Esri Contributor
Esri Contributor

Hi @VaibhavChowdhary 

It looks like this is an Experience Builder Developer Edition custom app.

If you open the console to the elements tab, you can see the widget container is using the ArcGIS Maps SDK for JavaScript Expand widget and a custom HTML/CSS/JavaScript analysis panel. The classes are not ArcGIS classes and likely come from custom CSS.

<div class="esri-expand__container">
...
<div class="esri-expand__content">
 

<div id="AnalysisDiv">

<input type="radio" name="resType" value="solar">
<input type="radio" name="resType" value="wind">

<input type="text" id="capacity">

<input id="RunAnalysis"
       type="button"
       value="Run Analysis"
       onclick="RunAnalysis();">
<div class="jro-light-grey">
    <div id="pBar" class="jro-green"></div>
</div>
 
You may be able to create a similar tool using the Analysis widget and/or the Filter widget if you are using the web edition of ArcGIS Experience Builder.

 

0 Kudos
JeffreyThompson2
MVP Frequent Contributor

It looks to me like this application was directly built on the JavaScript Maps SDK. I extracted their JavaScript file from their website. There is a named RunAnalysis function and the code seems decently commented.

GIS Developer
City of Arlington, Texas