Access ArcGIS JS API from external JS file?

[BrettKruger]

Hi Guys

So I have created my map with the webapp builder and plugged it into a system. When displaying the map I use the index.html file from the map.

I load my script like this at the bottom of the index.html file:

 <script type="text/javascript" src="*.js"></script>

My script does a basic thing like a zoom using the CentreAndZoom function of the map, but I do however create a point by using legacy code such as: point = new esri.geometry.Point(lng, lat);

But it seems I cannot access anything else in the JS api, any ideas why or how to enable my js file to have access to the functions provided by the API?

My js file:

//map object
var esriMap;

function zoomTo(lat, lng, factor) {
    var point;
    point = new esri.geometry.Point(lng, lat);
    esriMap.centerAndZoom(point, factor);
 
}

function setZoom(faktor) {
    esriMap.setZoom(faktor);
}

What happens so far is that I have dropdowns on my html page and this calls my zoomTo function which zooms to a point on the map. I am trying now to highlight the point with the SimpleMarkerSymbol function but I cannot get any access to it at all, says undefined now this could be that I do not declare it but if my point is declared in this matter and works should a markersymbol not work the same?

Looking forward to you're responses.

Brett

[RobertScheitlin__GISP]

Brett,

   I am pretty confused why you would go this route or still be using ANY legacy code. The issue may be that your script is getting added before the JS api is loaded but I can not say for sure. Why are you not just creating a widget t do this?

[BrettKruger]

Hi Robert,

thanks for the fast reply, the system itself is a .net system with the map created and downloaded from the webapp builder.

When the map gets loaded I have created dropdowns on the index.html page. I guess I followed this route because I am most probably not too sure how I would do it in a widget, I know widgets are the correct route to follow. I am still very inexperienced when it comes to the widgets interacting with dropdowns/buttons on a page as I have tried using JS to access them but always tend to not get it to work : / not in the html page of the widget itself but rather in the page where the map is loaded.

Basically what would happen is that after a dropdown option is selected I call my js file with my zoom function and use the map object to zoom to the point. I know in a widget this is very simple even the highlight it as I have done it in other widgets (which you actually helped me with the calculations of segments )

[RobertScheitlin__GISP]

Brett,

   OK so the index.html is not the WAB index.html then right? So you are using an iframe of something to load the WAB app or just the map to your index.html? So am still pretty confused on the workflow.

[BrettKruger]

Robert,

No the index.html is the page where the map is loaded in, so if you download you're map from the WAB the index.html page which is included there.

The workflow of the system to try and put it short is as follow:

1. The user logs into the system.
2. Chooses a filter e.g. Africa - the map opens then with Africa's extent.
3. Dropdown is above the map with a list of African countries.
4. As soon as a country is chosen the system zooms to that country and a list of mines appear on the next dropdown.
5. The user selects a mine and the system zooms to that mine.

So what I have done is the following, adding my script to this index.html page and then whenever the dropdowns change my .net server page responds with the filtered results for the next dropdown. So this is why I have followed this route and not a widget, if however you can tell me how I can use widgets here I would love to of course.

[RobertScheitlin__GISP]

Brett,

   Are you using .net to query the database because there is no ArcGIS service with the data that you can query?

[BrettKruger]

Robert,

No I am using .NET because that is my background and I am still new to widgets only recently really started getting into it and the methodology and how it works. Also because I have control then over my SQL queries to my DB - so its easier for me to populate the dropdowns with those results.

So to answer your question it is a feature service with points on the map.

[RobertScheitlin__GISP · Accepted solution]

Brett,

   OK no time like the present to dive in then. What you are wanting to do is not to hard in a custom widget. So start by following this page

Create a custom in-panel widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developer... 

to get a panel widget going or if you would like the comboboxes to be in the header of the Foldable theme then let me know that and I can provide guidance for that route.

[BrettKruger]

Hi Robert,

I have seen that tutorial and understand the basics such as those so far. Please correct me if I am not understanding you correct, so you suggest that I add my dropdowns into the widget's HTML page and have it as an in-panel widget? So what will happen then is to modify the config file to have the widget openAtStart? These dropdowns will then still query my .NET server pages and return with results to populate the values of the dropdowns?

[RobertScheitlin__GISP]

Brett,

So you suggest that I add my dropdowns into the widget's HTML page and have it as an in-panel widget? Yes

So what will happen then is to modify the config file to have the widget openAtStart? Yes

hese dropdowns will then still query my .NET server pages and return with results to populate the values of the dropdowns? I you have to but you said that you have this data available as a map service so you can use a QueryTask to get the info instead.