nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Arne_Gelfert

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?

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

Arne_Gelfert

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.

RobertScheitlin__GISP

Arne,

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

Arne_Gelfert

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.

RobertScheitlin__GISP

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

Arne_Gelfert

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

<SPAN class="keyword token">else</SPAN>
 <SPAN class="punctuation token">{</SPAN>
     view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">goTo</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>center <SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">90</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">35</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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.

RobertScheitlin__GISP

Arne,

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

query<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> <SPAN class="string token">"LOCNO = "</SPAN> <SPAN class="operator token">+</SPAN> params<SPAN class="punctuation token">.</SPAN>query<SPAN class="punctuation token">.</SPAN>LOCNO<SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

Arne_Gelfert

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<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
        
        <SPAN class="keyword token">let</SPAN> params <SPAN class="operator token">=</SPAN> urlUtils<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">default</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">urlToObject</SPAN><SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">.</SPAN>location<SPAN class="punctuation token">.</SPAN>href<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        
        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>params<SPAN class="punctuation token">.</SPAN>query <SPAN class="operator token">&&</SPAN> params<SPAN class="punctuation token">.</SPAN>query<SPAN class="punctuation token">.</SPAN>LOCNO<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">let</SPAN> query <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Query<SPAN class="punctuation token">.</SPAN>default</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            
            query<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> <SPAN class="string token">"LOCNO = '"</SPAN> <SPAN class="operator token">+</SPAN> params<SPAN class="punctuation token">.</SPAN>query<SPAN class="punctuation token">.</SPAN>LOCNO <SPAN class="operator token">+</SPAN> <SPAN class="string token">"'"</SPAN><SPAN class="punctuation token">;</SPAN>
            
            locLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryExtent</SPAN><SPAN class="punctuation token">(</SPAN>query<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="token function">setTimeout</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">goTo</SPAN><SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        locLayer<SPAN class="punctuation token">.</SPAN>definitionExpression <SPAN class="operator token">=</SPAN> query<SPAN class="punctuation token">.</SPAN>where<SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2000</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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?

Arne_Gelfert

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.