topic Re: load map and 'goto' specific feature (polyline) in ArcGIS JavaScript Maps SDK Questions

load map and 'goto' specific feature (polyline)

AwesomeEvan — Sun, 07 Nov 2021 15:47:37 GMT

Hey I'm simply looking to load a map and pan/zoom to a feature.

Here is the actual page. https://data.orangeville.ca/Apps/CrossingGuards/index.html?objectid=1

I'm looking for help to get the inline map to 'goto' or pan and zoom a feature based on object id

I'm getting the objectid from a url parameter using

and calling it using >>> getUrlParameter('objectid')

also the map has 4 layers, the one to search is layer 3 of 4 called 'Crossing Guards VIEW'

here is my codepen code just for the map for testing, with the api key removed...

<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>ArcGIS API for JavaScript Tutorials: Display a map</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.21/"></script> <script> require(["esri/config","esri/WebMap", "esri/views/MapView","esri/widgets/ScaleBar","esri/widgets/Legend"], function (esriConfig,WebMap, MapView, ScaleBar, Legend) { esriConfig.apiKey = "API_KEY_HERE"; const webmap = new WebMap({ portalItem: { id: "4170f5e65bd8409896a906264e4c2c87" } }); const view = new MapView({ map: webmap, container: "viewDiv" // Div element }); const scalebar = new ScaleBar({ view: view }); view.ui.add(scalebar, "bottom-left"); var parcelExtent = response.features[0].geometry.extent.clone().expand(0.5); view.goTo(parcelExtent); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

thanks for any assistance

Re: load map and 'goto' specific feature (polyline)

MichaelBoschert — Mon, 08 Nov 2021 11:09:19 GMT

Hey,

@AwesomeEvan

1. Add the Layer to map while using a definitionExpression
2. Wait for the LayerView and use the queryExtent Function

view.whenLayerView(layer).then(function(layerView) { layerView.watch("updating", function(val) { if (!val) { layerView.queryExtent().then(function(response) { view.goTo(response.extent); }); } }); });

Re: load map and 'goto' specific feature (polyline)

KenBuja — Mon, 08 Nov 2021 16:38:25 GMT

Is your response geometry a point? The goTo method won't zoom to its extent, since a point doesn't have an extent. You'll have to set the scale for the zoom.

view.goTo({ target: geometry, scale: yourScale, });

Re: load map and 'goto' specific feature (polyline)

MichaelBoschert — Mon, 08 Nov 2021 16:43:10 GMT

Hey @KenBuja

no, my response is a area...

Thanks for the supplement.

Re: load map and 'goto' specific feature (polyline)

AwesomeEvan — Mon, 08 Nov 2021 19:31:25 GMT

So, I had this solution previously, however there is then only the one layer on the map...

The reason I'm trying to add the whole map is because I want all the layers and stylings from it. Then zoom to the one feature in the specific layer using the url parameter value.

Any suggestions for this setup?

Otherwise, I can just add the other layers to the map as well, but then styling them also just seems like way more effort than if I would just query and zoom on an existing layer in the map.

Re: load map and 'goto' specific feature (polyline)

MichaelBoschert — Tue, 09 Nov 2021 07:20:30 GMT

Why don't you use the map and additionally add the layer? After zooming in or any other action just remove the layer again.

Re: load map and 'goto' specific feature (polyline)

AwesomeEvan — Fri, 12 Nov 2021 17:46:33 GMT

Awesome that was enough advice to get me there... here's what worked for me... it adds the layer to the map, zooms to it, then removes it... which also creates a better user experience because it doesn't snap back the map everytime you try to pan or zoom away...

require(["esri/config","esri/Map","esri/WebMap", "esri/views/MapView","esri/layers/FeatureLayer","esri/widgets/ScaleBar","esri/widgets/Legend"], function (esriConfig,Map,WebMap, MapView, FeatureLayer, ScaleBar, Legend) { esriConfig.apiKey = "YOUR_KEY_HERE"; const webmap = new WebMap({ portalItem: { id: "4170f5e65bd8409896a906264e4c2c87" } }); const view = new MapView({ map: webmap, container: "viewDiv" // Div element }); const layer = new FeatureLayer({ // URL to the service url: "https://services3.arcgis.com/pCmV4YWmyIH9CmGq/ArcGIS/rest/services/Crossing_Guards_VIEW/FeatureServer/0", definitionExpression: "OBJECTID = " + getUrlParameter('objectid') }); view.map.add(layer); const scalebar = new ScaleBar({ view: view }); view.ui.add(scalebar, "bottom-left"); view.whenLayerView(layer).then(function(layerView){ layerView.watch("updating", function(val){ // wait for the layer view to finish updating if(!val){ layerView.queryExtent().then(function(response){ // go to the extent of all the graphics in the layer view view.goTo({target:response.extent, zoom: 17}); view.map.remove(layer); }); } }); }); });