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

393
9
04-08-2019 01:41 PM
Arne_Gelfert
Regular Contributor

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?

0 Kudos
9 Replies
Arne_Gelfert
Regular Contributor

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...

0 Kudos
Arne_Gelfert
Regular Contributor

Okay, there are some good examples after all but it's still not working for me. I've amalgamated a few (Robert Scheitlin, GISPRene 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?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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;
0 Kudos
Arne_Gelfert
Regular Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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).

0 Kudos
Arne_Gelfert
Regular Contributor

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.

0 Kudos
Arne_Gelfert
Regular Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Arne,

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

0 Kudos
Arne_Gelfert
Regular Contributor

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.

0 Kudos