topic Re: How do I create a hyperlink in a popup template that will zoom the map to another feature? in ArcGIS JavaScript Maps SDK Questions

How do I create a hyperlink in a popup template that will zoom the map to another feature?

DarinRodberg — Fri, 19 Apr 2019 19:03:36 GMT

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.

Re: How do I create a hyperlink in a popup template that will zoom the map to another feature?

RobertScheitlin__GISP — Fri, 19 Apr 2019 19:25:15 GMT

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.

Re: How do I create a hyperlink in a popup template that will zoom the map to another feature?

DarinRodberg — Fri, 10 Dec 2021 23:31:31 GMT

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:

var view = new MapView({
	container: "viewDiv",
	map: map,
	center: [-80.2807416961724, 26.9095216535089],
	zoom: 17,
	popup: {
		dockEnabled: true,
		dockOptions: {
			buttonEnabled: false,
			breakpoint: false
		}
	}
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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:

<a href="#" onclick="view.goTo(grphc_SV_1007);">SV_1007</a>‍‍

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

Re: How do I create a hyperlink in a popup template that will zoom the map to another feature?

RobertScheitlin__GISP — Fri, 10 Dec 2021 23:31:33 GMT

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.

<script>
    var view;
    require([
      "esri/WebMap",
      "esri/views/MapView",
....

    view = .....‍‍‍‍‍‍‍‍

Re: How do I create a hyperlink in a popup template that will zoom the map to another feature?

DarinRodberg — Tue, 23 Apr 2019 12:23:44 GMT

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?

Re: How do I create a hyperlink in a popup template that will zoom the map to another feature?

RobertScheitlin__GISP — Tue, 23 Apr 2019 12:52:17 GMT

Darin,

Please post your latest full code sample for review.

Re: How do I create a hyperlink in a popup template that will zoom the map to another feature?

DarinRodberg — Fri, 10 Dec 2021 23:31:43 GMT

Robert,

Here's the entire script element containing my code. I've cut out the PopupTemplate declarations for the sake of brevity.

<script>
	var grphc_CAB_1000;
	var pnt_CAB_1000;
	var grphc_CAB_1003;
	var pnt_CAB_1003;
	var grphc_CAB_1006;
	var pnt_CAB_1006;
	var grphc_CAB_1009;
	var pnt_CAB_1009;
	var grphc_CAB_1015;
	var pnt_CAB_1015;
	var grphc_SV_1001;
	var pnt_SV_1001;
	var grphc_SV_1004;
	var pnt_SV_1004;
	var grphc_SV_1007;
	var pnt_SV_1007;
	var grphc_SV_1010;
	var pnt_SV_1010;
	var grphc_SV_1011;
	var pnt_SV_1011;
	var grphc_SV_1016;
	var pnt_SV_1016;
	var grphc_PB_1002;
	var pnt_PB_1002;
	var grphc_PB_1005;
	var pnt_PB_1005;
	var grphc_PB_1008;
	var pnt_PB_1008;
	var grphc_PB_1012;
	var pnt_PB_1012;
	var grphc_PB_1014;
	var pnt_PB_1014;
	var grphc_HUB_1013;
	var pnt_HUB_1013;
	var view;
	require([
		"esri/Map",
		"esri/views/MapView",
		"esri/Graphic",
		"esri/widgets/BasemapToggle",
		"esri/geometry/Point",
		"esri/geometry/Polygon",
		"esri/geometry/Polyline",
		"esri/symbols/SimpleMarkerSymbol",
		"esri/symbols/SimpleLineSymbol",
		"esri/symbols/SimpleFillSymbol",
		"esri/symbols/PictureMarkerSymbol",
		"dojo/domReady!"
	], function (Map, MapView, Graphic, BasemapToggle, Point, Polygon, Polyline, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol) {
		var map = new Map({
			basemap: "hybrid"
		});

		view = new MapView({
			container: "viewDiv",
			map: map,
			center: [-80.2807416961724, 26.9095216535089],
			zoom: 17,
			popup: {
				dockEnabled: true,
				dockOptions: {
					buttonEnabled: false,
					breakpoint: false
				}
			}
		});

		var toggle = new BasemapToggle({
			view: view,
			nextBasemap: "streets"
		});

		view.ui.add(toggle, "bottom-right");


		/************
		* Conduits *
		************/
		var line12Symbol = new SimpleLineSymbol({
			color: [255, 0, 0],
			width: 2,
			style: "short-dash"
		});
		var conduit7Line = new Polyline({
			paths: [
				[-80.2869078649064, 26.9092680013661],
				[-80.2869244565752, 26.9092932249974],
				[-80.2869669019229, 26.9092985260083]
			]
		});

		var conduit7Graphic = new Graphic({
			geometry: conduit7Line,
			symbol: line12Symbol,
			popupTemplate: conduit7Template
		});
		view.graphics.add(conduit7Graphic);

		var conduit8Line = new Polyline({
			paths: [
				[-80.2851041785193, 26.9107050682386],
				[-80.2851193850894, 26.9107253359353],
				[-80.2851667414073, 26.9107188483843]
			]
		});

		var conduit8Graphic = new Graphic({
			geometry: conduit8Line,
			symbol: line12Symbol,
			popupTemplate: conduit8Template
		});
		view.graphics.add(conduit8Graphic);

		var conduit9Line = new Polyline({
			paths: [
				[-80.2822981597301, 26.9090321207826],
				[-80.2822758000313, 26.9090363155782],
				[-80.2822605577848, 26.9090138477886]
			]
		});

		var conduit9Graphic = new Graphic({
			geometry: conduit9Line,
			symbol: line12Symbol,
			popupTemplate: conduit9Template
		});
		view.graphics.add(conduit9Graphic);

		var conduit10Line = new Polyline({
			paths: [
				[-80.2784348487162, 26.9083697074665],
				[-80.2784201050952, 26.9084110794888],
				[-80.2783805329889, 26.908432788646]
			]
		});

		var conduit10Graphic = new Graphic({
			geometry: conduit10Line,
			symbol: line12Symbol,
			popupTemplate: conduit10Template
		});
		view.graphics.add(conduit10Graphic);

		var conduit11Line = new Polyline({
			paths: [
				[-80.2745740225301, 26.908515533502],
				[-80.2745304073167, 26.9085181354187],
				[-80.2745164904219, 26.9085409801832]
			]
		});

		var conduit11Graphic = new Graphic({
			geometry: conduit11Line,
			symbol: line12Symbol,
			popupTemplate: conduit11Template
		});
		view.graphics.add(conduit11Graphic);

		var line24Symbol = new SimpleLineSymbol({
			color: [128, 128, 0],
			width: 4,
			style: "short-dash"
		});
		var conduit6Line = new Polyline({
			paths: [
				[-80.2851041785193, 26.9107050682386],
				[-80.2851444274087, 26.9106795088265],
				[-80.2851919301878, 26.910639340661],
				[-80.2852311715371, 26.9105960647922],
				[-80.2852677437516, 26.910550908097],
				[-80.285294139711, 26.9104917440682],
				[-80.2853146346965, 26.9104250630685],
				[-80.285330762397, 26.9102990620467],
				[-80.2853459873975, 26.9097050205169],
				[-80.285359940597, 26.909321928122],
				[-80.2853653444255, 26.9092914802792],
				[-80.2853823851299, 26.9092603463873],
				[-80.2854096713979, 26.9092425222597],
				[-80.2854460568604, 26.9092345956618],
				[-80.2868385756375, 26.9092601216986],
				[-80.2869078649064, 26.9092680013661]
			]
		});

		var conduit6Graphic = new Graphic({
			geometry: conduit6Line,
			symbol: line24Symbol,
			popupTemplate: conduit6Template
		});
		view.graphics.add(conduit6Graphic);

		var conduit5Line = new Polyline({
			paths: [
				[-80.2822981597301, 26.9090321207826],
				[-80.2822895562053, 26.9102220614598],
				[-80.2823023694525, 26.9103171378964],
				[-80.2823294308276, 26.9104122867489],
				[-80.2823677939416, 26.9105029548934],
				[-80.2824166814734, 26.9105840616051],
				[-80.2825096214247, 26.9106485234253],
				[-80.2826026291607, 26.9107022793445],
				[-80.2827072346172, 26.9107373113239],
				[-80.2828186631176, 26.9107603262367],
				[-80.2847370840028, 26.9107828067218],
				[-80.2848321112435, 26.910779715752],
				[-80.2849271881421, 26.9107686947042],
				[-80.2850198981256, 26.9107412855594],
				[-80.2851041785193, 26.9107050682386]
			]
		});

		var conduit5Graphic = new Graphic({
			geometry: conduit5Line,
			symbol: line24Symbol,
			popupTemplate: conduit5Template
		});
		view.graphics.add(conduit5Graphic);

		var conduit4Line = new Polyline({
			paths: [
				[-80.2784348487162, 26.9083697074665],
				[-80.2793012917047, 26.9085279935804],
				[-80.2802139280173, 26.9086904549297],
				[-80.2809436728925, 26.9088082876661],
				[-80.2821880431479, 26.9089758431654],
				[-80.2822306852073, 26.9089892820763],
				[-80.2822696345411, 26.9090109449708],
				[-80.2822981597301, 26.9090321207826]
			]
		});

		var conduit4Graphic = new Graphic({
			geometry: conduit4Line,
			symbol: line24Symbol,
			popupTemplate: conduit4Template
		});
		view.graphics.add(conduit4Graphic);

		var conduit3Line = new Polyline({
			paths: [
				[-80.2780172067706, 26.9083275376867],
				[-80.2784348487162, 26.9083697074665]
			]
		});

		var conduit3Graphic = new Graphic({
			geometry: conduit3Line,
			symbol: line24Symbol,
			popupTemplate: conduit3Template
		});
		view.graphics.add(conduit3Graphic);

		var conduit1Line = new Polyline({
			paths: [
				[-80.2773154379058, 26.909658765336],
				[-80.2775313151532, 26.9096595487263],
				[-80.2775588746386, 26.9096596484675],
				[-80.2775971235291, 26.9096522178681],
				[-80.2776344769431, 26.9096373775626],
				[-80.2776638684254, 26.9096140281851],
				[-80.277688670611, 26.9095807592818],
				[-80.2778751524889, 26.9092792072908],
				[-80.277907929948, 26.9092024119424],
				[-80.2779203546244, 26.9091695432229],
				[-80.277939556013, 26.9090930236778],
				[-80.2780522073434, 26.9084373563159],
				[-80.2780521213104, 26.9084088663011],
				[-80.2780458422098, 26.9083825040707],
				[-80.2780329436397, 26.9083602304777],
				[-80.2780196450054, 26.9083453764597],
				[-80.2780178657047, 26.9083419862455],
				[-80.2780172067706, 26.9083275376867]
			]
		});

		var conduit1Graphic = new Graphic({
			geometry: conduit1Line,
			symbol: line24Symbol,
			popupTemplate: conduit1Template
		});
		view.graphics.add(conduit1Graphic);

		var conduit2Line = new Polyline({
			paths: [
				[-80.2780172067706, 26.9083275376867],
				[-80.2778897906924, 26.9083146722255],
				[-80.277688465302, 26.9082843334899],
				[-80.2775364419622, 26.9082716639674],
				[-80.2773873546671, 26.9082639383478],
				[-80.2771521020112, 26.908260500296],
				[-80.276891258722, 26.9082685557872],
				[-80.2764781329088, 26.9083025477936],
				[-80.276285297313, 26.9083196687145],
				[-80.2755822570048, 26.9083820853741],
				[-80.2746257003493, 26.9084784658616],
				[-80.2746070002476, 26.9084832339184],
				[-80.2745903297125, 26.9084915387611],
				[-80.2745792653399, 26.9085035211785],
				[-80.2745740225301, 26.908515533502]
			]
		});

		var conduit2Graphic = new Graphic({
			geometry: conduit2Line,
			symbol: line24Symbol,
			popupTemplate: conduit2Template
		});
		view.graphics.add(conduit2Graphic);

		/******************
		 * Marker Symbols *
		/******************/
		var AIRSPLICE = {
			type: "picture-marker",
			url: "/icons/AIRSPLICE.png",
			width: "24px",
			height: "24px"
		};
		var AIRTEE = {
			type: "picture-marker",
			url: "/icons/AIRTEE.png",
			width: "24px",
			height: "24px"
		};
		var BCAB = {
			type: "picture-marker",
			url: "/icons/BCAB.png",
			width: "24px",
			height: "24px"
		};
		var DEFAULT = {
			type: "picture-marker",
			url: "/icons/DEFAULT.png",
			width: "24px",
			height: "24px"
		};
		var DEMARC = {
			type: "picture-marker",
			url: "/icons/DEMARC.png",
			width: "24px",
			height: "24px"
		};
		var FOSC = {
			type: "picture-marker",
			url: "/icons/FOSC.png",
			width: "24px",
			height: "24px"
		};
		var HEADEND = {
			type: "picture-marker",
			url: "/icons/HEADEND.png",
			width: "24px",
			height: "24px"
		};
		var IconStyle00 = {
			type: "picture-marker",
			url: "/icons/IconStyle00.png",
			width: "24px",
			height: "24px"
		};
		var IconStyle10 = {
			type: "picture-marker",
			url: "/icons/IconStyle10.png",
			width: "24px",
			height: "24px"
		};
		var IconStyle20 = {
			type: "picture-marker",
			url: "/icons/IconStyle20.png",
			width: "24px",
			height: "24px"
		};
		var LOOP_WINDOW = {
			type: "picture-marker",
			url: "/icons/LOOP_WINDOW.png",
			width: "24px",
			height: "24px"
		};
		var NODE = {
			type: "picture-marker",
			url: "/icons/NODE.png",
			width: "24px",
			height: "24px"
		};
		var NODE_A = {
			type: "picture-marker",
			url: "/icons/NODE_A.png",
			width: "24px",
			height: "24px"
		};
		var NODE_B = {
			type: "picture-marker",
			url: "/icons/NODE_B.png",
			width: "24px",
			height: "24px"
		};
		var NODE_D = {
			type: "picture-marker",
			url: "/icons/NODE_D.png",
			width: "24px",
			height: "24px"
		};
		var NODE_E = {
			type: "picture-marker",
			url: "/icons/NODE_E.png",
			width: "24px",
			height: "24px"
		};
		var PB = {
			type: "picture-marker",
			url: "/icons/PB.png",
			width: "24px",
			height: "24px"
		};
		var PB_EL = {
			type: "picture-marker",
			url: "/icons/PB_EL.png",
			width: "24px",
			height: "24px"
		};
		var PB_LOOP = {
			type: "picture-marker",
			url: "/icons/PB_LOOP.png",
			width: "24px",
			height: "24px"
		};
		var PB_TRAFFIC = {
			type: "picture-marker",
			url: "/icons/PB_TRAFFIC.png",
			width: "24px",
			height: "24px"
		};
		var PED_XING = {
			type: "picture-marker",
			url: "/icons/PED_XING.png",
			width: "24px",
			height: "24px"
		};
		var POLE = {
			type: "picture-marker",
			url: "/icons/POLE.png",
			width: "24px",
			height: "24px"
		};
		var POLE_EL = {
			type: "picture-marker",
			url: "/icons/POLE_EL.png",
			width: "24px",
			height: "24px"
		};
		var POLE_PED = {
			type: "picture-marker",
			url: "/icons/POLE_PED.png",
			width: "24px",
			height: "24px"
		};
		var POLE_STRAIN = {
			type: "picture-marker",
			url: "/icons/POLE_STRAIN.png",
			width: "24px",
			height: "24px"
		};
		var SCHOOL_ZONE = {
			type: "picture-marker",
			url: "/icons/SCHOOL_ZONE.png",
			width: "24px",
			height: "24px"
		};
		var SNOSHOE = {
			type: "picture-marker",
			url: "/icons/SNOSHOE.png",
			width: "24px",
			height: "24px"
		};
		var SV = {
			type: "picture-marker",
			url: "/icons/SV.png",
			width: "24px",
			height: "24px"
		};


		/********
		 * Sites *
		/********/
		pnt_CAB_1000 = {
			type: "point",
			longitude: -80.2869669019229,
			latitude: 26.9092985260083
		};

		grphc_CAB_1000 = {
			geometry: pnt_CAB_1000,
			symbol: BCAB,
			popupTemplate: site1Template
		};
		view.graphics.add(grphc_CAB_1000);

		pnt_CAB_1003 = {
			type: "point",
			longitude: -80.2851667414073,
			latitude: 26.9107188483843
		};

		grphc_CAB_1003 = {
			geometry: pnt_CAB_1003,
			symbol: BCAB,
			popupTemplate: site2Template
		};
		view.graphics.add(grphc_CAB_1003);

		pnt_CAB_1006 = {
			type: "point",
			longitude: -80.2822605577848,
			latitude: 26.9090138477886
		};

		grphc_CAB_1006 = {
			geometry: pnt_CAB_1006,
			symbol: BCAB,
			popupTemplate: site3Template
		};
		view.graphics.add(grphc_CAB_1006);

		pnt_CAB_1009 = {
			type: "point",
			longitude: -80.2783805329889,
			latitude: 26.908432788646
		};

		grphc_CAB_1009 = {
			geometry: pnt_CAB_1009,
			symbol: BCAB,
			popupTemplate: site4Template
		};
		view.graphics.add(grphc_CAB_1009);

		pnt_CAB_1015 = {
			type: "point",
			longitude: -80.2745164904219,
			latitude: 26.9085409801832
		};

		grphc_CAB_1015 = {
			geometry: pnt_CAB_1015,
			symbol: BCAB,
			popupTemplate: site5Template
		};
		view.graphics.add(grphc_CAB_1015);

		pnt_SV_1001 = {
			type: "point",
			longitude: -80.2869078649064,
			latitude: 26.9092680013661
		};

		grphc_SV_1001 = {
			geometry: pnt_SV_1001,
			symbol: SV,
			popupTemplate: site6Template
		};
		view.graphics.add(grphc_SV_1001);

		pnt_SV_1004 = {
			type: "point",
			longitude: -80.2851041785193,
			latitude: 26.9107050682386
		};

		grphc_SV_1004 = {
			geometry: pnt_SV_1004,
			symbol: SV,
			popupTemplate: site7Template
		};
		view.graphics.add(grphc_SV_1004);

		pnt_SV_1007 = {
			type: "point",
			longitude: -80.2822981597301,
			latitude: 26.9090321207826
		};

		grphc_SV_1007 = {
			geometry: pnt_SV_1007,
			symbol: SV,
			popupTemplate: site8Template
		};
		view.graphics.add(grphc_SV_1007);

		pnt_SV_1010 = {
			type: "point",
			longitude: -80.2784348487162,
			latitude: 26.9083697074665
		};

		grphc_SV_1010 = {
			geometry: pnt_SV_1010,
			symbol: SV,
			popupTemplate: site9Template
		};
		view.graphics.add(grphc_SV_1010);

		pnt_SV_1011 = {
			type: "point",
			longitude: -80.2780172067706,
			latitude: 26.9083275376867
		};

		grphc_SV_1011 = {
			geometry: pnt_SV_1011,
			symbol: SV,
			popupTemplate: site10Template
		};
		view.graphics.add(grphc_SV_1011);

		pnt_SV_1016 = {
			type: "point",
			longitude: -80.2745740225301,
			latitude: 26.908515533502
		};

		grphc_SV_1016 = {
			geometry: pnt_SV_1016,
			symbol: SV,
			popupTemplate: site11Template
		};
		view.graphics.add(grphc_SV_1016);

		pnt_PB_1002 = {
			type: "point",
			longitude: -80.2854460568604,
			latitude: 26.9092345956618
		};

		grphc_PB_1002 = {
			geometry: pnt_PB_1002,
			symbol: PB,
			popupTemplate: site12Template
		};
		view.graphics.add(grphc_PB_1002);

		pnt_PB_1005 = {
			type: "point",
			longitude: -80.2828186631176,
			latitude: 26.9107603262367
		};

		grphc_PB_1005 = {
			geometry: pnt_PB_1005,
			symbol: PB,
			popupTemplate: site13Template
		};
		view.graphics.add(grphc_PB_1005);

		pnt_PB_1008 = {
			type: "point",
			longitude: -80.2802139280173,
			latitude: 26.9086904549297
		};

		grphc_PB_1008 = {
			geometry: pnt_PB_1008,
			symbol: PB,
			popupTemplate: site14Template
		};
		view.graphics.add(grphc_PB_1008);

		pnt_PB_1012 = {
			type: "point",
			longitude: -80.2775313151532,
			latitude: 26.9096595487263
		};

		grphc_PB_1012 = {
			geometry: pnt_PB_1012,
			symbol: PB,
			popupTemplate: site15Template
		};
		view.graphics.add(grphc_PB_1012);

		pnt_PB_1014 = {
			type: "point",
			longitude: -80.276285297313,
			latitude: 26.9083196687145
		};

		grphc_PB_1014 = {
			geometry: pnt_PB_1014,
			symbol: PB,
			popupTemplate: site16Template
		};
		view.graphics.add(grphc_PB_1014);

		pnt_HUB_1013 = {
			type: "point",
			longitude: -80.2773154379058,
			latitude: 26.909658765336
		};

		grphc_HUB_1013 = {
			geometry: pnt_HUB_1013,
			symbol: NODE_A,
			popupTemplate: site17Template
		};
		view.graphics.add(grphc_HUB_1013);


	});
</script>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How do I create a hyperlink in a popup template that will zoom the map to another feature?

RobertScheitlin__GISP — Fri, 10 Dec 2021 23:31:46 GMT

Darin,

So you have:

grphc_SV_1007 = {
  geometry: pnt_SV_1007,
  symbol: SV,
  popupTemplate: site8Template
};
view.graphics.add(grphc_SV_1007);‍‍‍‍‍‍

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 = new Graphic({
  geometry: pnt_SV_1007,
  symbol: SV,
  popupTemplate: site8Template
});
view.graphics.add(grphc_SV_1007);‍‍‍‍‍‍‍‍‍‍‍‍

Re: How do I create a hyperlink in a popup template that will zoom the map to another feature?

DarinRodberg — Tue, 23 Apr 2019 14:12:48 GMT

Robert,

Thank you so much! That worked like a charm.