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 do I create a hyperlink in a popup template that will zoom the map to another feature?

DarinRodberg

I'm building a map that shows sites (points) connected by conduits (polylines). On the conduits, I have a popup template that shows some information about the conduit, as well as the names of the sites on either end of it. I want to make those site names links, so the user can click on them and the map will zoom/pan to the sites.

First off, let me state that this is my first time doing professional web development. I've written numerous services, and desktop applications for windows, linux and the JVM, but never really gotten into web development until now. I'm quite the newb at it. I do have some limited experience with a LAMP stack I used to make a site for my home network, but PHP is so much simpler and easier to use than asp.net, which is what I have to build this site in.

I've tried calling map.goTo() and passing it the appropriate graphic and/or point, but the map just doesn't respond. The console tells me that the object "map" is not defined, so apparently I'm out of scope. It's occurred to me that this might be due to the location of the script element (see my last paragraph). I considered defining an event handler that would be compiled while still in scope and hopefully continue listening, but I can't find a way to pass the argument (the name of the site) back to the event handler when raising the event.

One curious thing I've found is that I can't get any of the javascript to run properly if I embed it directly in the head or in the body of the page. Instead, I have to write a <script></script> element directly to the top of the page (above even the <!DOCTYPE> tag) in order for the javascript to run. I'm currently looking into that, as I suspect it's something to do with asp.net not allowing the script to run, but truth be told, I really don't know what is causing it. I do know that when I hand-write an html file with an ArcMap script in the header, that runs just fine. I can't write static pages, though. I need the page to get the info from a database every time it's loaded or refreshed.

Any help would be greatly appreciated.

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Darin,

So you have:

grphc_SV_1007 <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
  geometry<SPAN class="punctuation token">:</SPAN> pnt_SV_1007<SPAN class="punctuation token">,</SPAN>
  symbol<SPAN class="punctuation token">:</SPAN> SV<SPAN class="punctuation token">,</SPAN>
  popupTemplate<SPAN class="punctuation token">:</SPAN> site8Template
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
view<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>grphc_SV_1007<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>

Which is fine as grphc_SV_1007 is a simple object that view.graphics.add and auto cast to a graphic. But grphc_SV_1007 is still just a global simple object and Not a graphic as the view.goTo is expecting. You need grphc_SV_1007 to be an actual graphic object so modify your code like this:

grphc_SV_1007 <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
  geometry<SPAN class="punctuation token">:</SPAN> pnt_SV_1007<SPAN class="punctuation token">,</SPAN>
  symbol<SPAN class="punctuation token">:</SPAN> SV<SPAN class="punctuation token">,</SPAN>
  popupTemplate<SPAN class="punctuation token">:</SPAN> site8Template
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
view<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>grphc_SV_1007<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>

All comments

RobertScheitlin__GISP

Darin,

Unless you have the object map set to a MapView then you are calling the goTo method on the wrong object. A view (i.e. a MapView for 2D and SceneView for 3D) are the classes that have a goTo method. As far as your issue with getting any JS code to run in your asp.net, that is strange indeed and I dont' knwo what it going wrong with out seeing your code.

DarinRodberg

Robert, thank you for responding.

I tried calling goTo() on the MapView object, and I get the same reference error (I believe my first time trying this I had called it on the MapView as well, and changed it to the Map during troubleshooting).

Here's the JS that defines my MapView:

<SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
	container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
	map<SPAN class="punctuation token">:</SPAN> map<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">80.2807416961724</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">26.9095216535089</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
	zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">17</SPAN><SPAN class="punctuation token">,</SPAN>
	popup<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
		dockEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
		dockOptions<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
			buttonEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
			breakpoint<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</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>

For the record: this code, indeed the whole script element working with ArcMap is produced by the Page_Load() handler.

Here's the HTML of the link:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>a</SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>#<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">onclick</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>view.goTo(grphc_SV_1007);<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>SV_1007<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>a</SPAN><SPAN class="punctuation token">></SPAN></SPAN>‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

And here's the error that gets logged in the console when I click the link:

The console error that

RobertScheitlin__GISP

Darin,

OK then it is definitely a scope issue. The scope of onclick does not know about the view object. You will have to globally declare the view var first thing in your script block.

<SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
    <SPAN class="keyword token">var</SPAN> view<SPAN class="punctuation token">;</SPAN>
    <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
      <SPAN class="string token">"esri/WebMap"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/views/MapView"</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>

    view <SPAN class="operator 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>

DarinRodberg

Okay, after smacking myself in the head for not realizing that to begin with (I had actually realized that my scope should have been limited to the require statement, but it just never occurred to me to declare my vars outside of it), I tried it. I instead got a context error on the graphic I was passing to it. So I declared those before the require statement as well, and now my map vanishes when I click on one of the links. The widgets remain, but the actual imagery (including the polylines and points I'd drawn) just disappears. Panning and zooming don't cause the imagery to re-appear.In fact, the only thing I can do to make the imagery re-appear is clicking on the "Zoom To" link that appears by default in the popup, which which bring me back to being centered on the polyline.

Any thoughts on that?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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