topic Re: How to create an external link to JSAPI web map that zooms into a specific feature? in ArcGIS JavaScript Maps SDK Questions

How to create an external link to JSAPI web map that zooms into a specific feature?

Arne_Gelfert — Mon, 08 Apr 2019 20:41:06 GMT

How can build external links to an ArcGIS Javascript API map by, say including a unique key for a specific feature in a specific layer, so that the map opens up zoomed into said feature? Basically execute some search/find/query functionality when the page loads with parameters for this query coming from the external URL.

I'm seeing some examples for the the out-of-the-box WAB apps here. But are there any examples for doing this with JSAPI?

Re: How to create an external link to JSAPI web map that zooms into a specific feature?

Arne_Gelfert — Mon, 08 Apr 2019 20:49:01 GMT

Gosh, note to self: try geonet before googling next time... this here thread looks just like what I need. If you have something even better, please holler...

Re: How to create an external link to JSAPI web map that zooms into a specific feature?

Arne_Gelfert — Sat, 11 Dec 2021 18:44:14 GMT

Okay, there are some good examples after all but it's still not working for me. I've amalgamated a few (Robert Scheitlin, GISP, Rene Rubalcava) into this one here ...

view.when(function(){
        
        let params = urlUtils.default.urlToObject(document.location.href);
        
        if (params.query && params.query.LOCNO) {
            let query = new Query.default();
            
            query.where = "LOCNO = '" + params.query.LOCNO + "'";
            
            locLayer.queryExtent(query).then(function (results) {
                setTimeout(function () {
                    view.goTo(results.extent).then(function () {
                        locLayer.definitionExpression = query.where;
                    });
                }, 2000);
            });
        }
    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

So I would like to create a URL along the lines of "https://mygreatdomain.com/..../index.html?LOCNO=12345". But this isn't working. In fact, it doesn't do anything. No errors. What am I missing?

Re: How to create an external link to JSAPI web map that zooms into a specific feature?

RobertScheitlin__GISP — Tue, 09 Apr 2019 12:56:03 GMT

Arne,

Is the LOCNO field a string or a number? If it is a number then the where clause needs to be changed.

query.where = "LOCNO = " + params.query.LOCNO;‍

Re: How to create an external link to JSAPI web map that zooms into a specific feature?

Arne_Gelfert — Sat, 11 Dec 2021 18:44:17 GMT

Great point. Something I didn't consider. But the field is a string. So now I've tried:

app?LOC='12345', which the browser turns into ?LOC%2712345%27
app/index.htrml?LOC='12345'
- app/index.htrml?LOC=12345

It keeps ignoring this without errors.

So then I thought: "Hey, when I instantiate the new View, I'm still assigning a center = [x,y]. So I removed that and added a

else
 {
     view.goTo({center :[-90,35]});
 }‍‍‍‍

Now what happens is that, given a lack of x,y when view is created, the map zooms to 0,0,off the coast of West Africa. Grrrr... !

I think my whole "view.when" section is not working correctly, and the code block never really runs as expected. I will go ahead an redact it as needed and then add in the thread. Maybe I'm not seeing the forest for the trees.

Re: How to create an external link to JSAPI web map that zooms into a specific feature?

RobertScheitlin__GISP — Tue, 09 Apr 2019 15:35:36 GMT

Arne,

I would put some break points in your code so you can see if you are getting into the results function (or simple console.log is you prefer).

Re: How to create an external link to JSAPI web map that zooms into a specific feature?

Arne_Gelfert — Tue, 09 Apr 2019 16:31:28 GMT

Haha, that's what I was afraid... so back to Dev Tools it is. I hate to say it but every time I think I may be warming up to Javascript, the debugging still has me pulling out way too much hair.

Re: How to create an external link to JSAPI web map that zooms into a specific feature?

Arne_Gelfert — Sat, 11 Dec 2021 18:44:19 GMT

Okay, there was nothing wrong with the original code/syntax in this thread. Thanks to Robert for providing examples in his original post.

What's been tripping me up has been using Typescript for my latest web development explorations. I will have to fork this into another thread and seek some help.

When I write the following line in Typescript...

let params = urlUtils_1.urlToObject(document.location.href);‍‍

...it compiles to this in Javascript...

   let params = urlUtils_1.default.urlToObject(document.location.href);‍‍

and inserts a "default". Apparently, the browser doesn't care about the "_1" (underscore1). i've read a little about it and it seems to be innocuous. But it never assigns the URL info to params. If i tweak my compiled Javascript and remove the extra "default", it runs fine.

In the Dev Tools console, I see:

>query.where
<{__accessor__: b}
>query.where
<"LOCNO = '12345'>‍‍‍‍‍‍‍‍‍‍‍‍

So I need to learn a little more about compiling Typescript, I guess.

Re: How to create an external link to JSAPI web map that zooms into a specific feature?

RobertScheitlin__GISP — Wed, 10 Apr 2019 16:15:09 GMT

Arne,

Sorry I can not help with typeScript issue as I am not using it myself.

Re: How to create an external link to JSAPI web map that zooms into a specific feature?

Arne_Gelfert — Wed, 10 Apr 2019 16:17:08 GMT

No worries. Thanks for hanging in there though... you were right: I had to do some debugging in Dev Tools, and actually learned a couple new tricks.