topic Re: Access ArcGIS JS API from external JS file? in Web AppBuilder Custom Widgets Questions

Access ArcGIS JS API from external JS file?

BrettKruger — Wed, 02 Nov 2016 12:17:35 GMT

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:

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

Re: Access ArcGIS JS API from external JS file?

RobertScheitlin__GISP — Wed, 02 Nov 2016 12:42:12 GMT

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?

Re: Access ArcGIS JS API from external JS file?

BrettKruger — Wed, 02 Nov 2016 13:05:56 GMT

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 )

Re: Access ArcGIS JS API from external JS file?

RobertScheitlin__GISP — Wed, 02 Nov 2016 13:10:17 GMT

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.

Re: Access ArcGIS JS API from external JS file?

BrettKruger — Wed, 02 Nov 2016 13:21:02 GMT

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:

The user logs into the system.
Chooses a filter e.g. Africa - the map opens then with Africa's extent.
Dropdown is above the map with a list of African countries.
As soon as a country is chosen the system zooms to that country and a list of mines appear on the next dropdown.
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.

Re: Access ArcGIS JS API from external JS file?

RobertScheitlin__GISP — Wed, 02 Nov 2016 13:44:01 GMT

Brett,

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

Re: Access ArcGIS JS API from external JS file?

BrettKruger — Wed, 02 Nov 2016 13:56:22 GMT

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.

Re: Access ArcGIS JS API from external JS file?

RobertScheitlin__GISP — Wed, 02 Nov 2016 14:09:49 GMT

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 Developers

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.

Re: Access ArcGIS JS API from external JS file?

BrettKruger — Thu, 03 Nov 2016 06:44:07 GMT

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?

Re: Access ArcGIS JS API from external JS file?

BrettKruger — Thu, 03 Nov 2016 09:14:45 GMT

HI Robert,

So I have got it working in the way which I originally wanted to.

For my marker I was using this page on the API: https://developers.arcgis.com/javascript/3/jsapi/simplemarkersymbol-amd.html

SimpleMarkerSymbol | API Reference | ArcGIS API for JavaScript 3.18

After including it like this from the legacy example it actually became a JS object and I could start using and adding to the map.

marker = new esri.symbol.SimpleMarkerSymbol();

I know you are not encouraging the way I am using the API (outside of widgets) but perhaps if you ever get a gap in your schedule I can perhaps show you the system and how I am coding it. I am sure you could perhaps give me extremely valuable pointers and tips on how to rather improve my coding and where/what I should rather have done instead of how I have done it.

Thanks as always for you're rapid responses and valuable input. Please do let me know if you would like to see the system and code.

Brett Kruger

Re: Access ArcGIS JS API from external JS file?

RobertScheitlin__GISP — Thu, 03 Nov 2016 11:52:16 GMT

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.

Re: Access ArcGIS JS API from external JS file?

RobertScheitlin__GISP — Thu, 03 Nov 2016 12:48:11 GMT

Brett,

I have a custom JS API sample already created to use a .net service to get US state names and their counties that I can easily convert to a widget or I can update it to use a map service instead.