goTo(features) not working on polines layer

417
9
Jump to solution
3 weeks ago
ChristopheS
New Contributor II

Hi all,

goTo(features) is not working on polines layer:

I have made a little sample to test this, with 2 layers of different geometries, one is points, the other is polylines.

When I left click on map, I execute a Query and then I display result features highlighted, then I goTo() this selection of features. Features are correctly highlighted, but unfortunatly goTo() do not move to a correct place, actually it zooms to a bundle of found features (randomly not always the same from time to time) and if I span to another place faraway and click again to perform the Query, then the highlighting works always fine, but goTo() do not move anymore atall. I can see no JavaScript error, nor in the catch event of the goTo() function.

If I do the same test with a mouse center-click on my example, which performs Query on second layer which is containing points, features are found, highlighted and Zoomed correctly anytime.

Reagrds,

Chris

Here is the code:

<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<title>Sketch widget | Sample | ArcGIS API for JavaScript 4.xx</title>
	<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
	<script src="https://js.arcgis.com/4.20/"></script>
	<style>
		html,
		body,
		#viewDiv
		{
			padding: 0;
			margin: 0;
			height: 100%;
			width: 100%;
		}
	</style>
	<script>
		require([
			"esri/widgets/Sketch",
			"esri/widgets/Editor",
			"esri/Map",
			"esri/layers/FeatureLayer",
			"esri/tasks/support/Query",
			"esri/views/MapView",
			"esri/PopupTemplate"
		], (Sketch, Editor, Map, FeatureLayer, Query, MapView, PopupTemplate) =>
		{
			//-------------------------
			var layerView1 = null;
			var layerView2 = null;
			var highlightSelect = null;
			//"point" layer:
			var aLayer1 = new FeatureLayer( "https://services5.arcgis.com/xxxxxxxxxxxxxxx/ArcGIS/rest/services/Captage/FeatureServer/0",
			{
				id: "CAPTAGE",
				outFields: ["*"]
			});
			//"polyline" layer:
			var aLayer2 = new FeatureLayer( "https://services5.arcgis.com/xxxxxxxxxxxxxxxxx/ArcGIS/rest/services/Canalisation/FeatureServer/0",
			{
				id: "CANAL",
				outFields: ["*"]
			});

			const map = new Map(
			{
				basemap: "dark-gray-vector",
				layers: [  aLayer1, aLayer2]
			});

			const view = new MapView(
			{
				container: "viewDiv",
				map: map,
				center: [1.824458, 42.696685 ],
				zoom: 11
			});

			view.when(() =>
			{
				view.popup.defaultPopupTemplateEnabled = true;
				view.whenLayerView( aLayer1 ).then(( layerView_) =>
				{
					layerView1 = layerView_;
				});
				view.whenLayerView( aLayer2 ).then(( layerView_) =>
				{
					layerView2 = layerView_;
				});
				view.on("click", function(ev)
				{
					if( ev.button == 2 ) //right click remove highlighted
					{
						if( highlightSelect != null )
							highlightSelect.remove();
						return;
					}
					else if( ev.button == 1 ) //center click choose points feature layer
					{
						var layerView = layerView1;//Choose here layer to use for search
						aLayerToUse = aLayer1;
					}
					else //left click choose polines feature layer
					{
						var layerView = layerView2;//Choose here layer to use for search
						aLayerToUse = aLayer2;
					}

					if( highlightSelect != null )
						highlightSelect.remove();

					//let queryString = "IDT like '%C%'";
					let queryString = "1=1";
					var query = new Query
					({
						returnGeometry: true, //we need geometries
						outFields: ['*'],//we dont need all data, but if only one attribute is specified, no highLight occurs !
						outSpatialReference: view.spatialReference,
						where: queryString
					});
					console.log("Search= " + queryString);

					aLayerToUse.queryFeatures( query ).then( function( results )
					{
						console.log("Results = " + results.features.length );
						if( results.features.length > 0 )
						{
							highlightSelect = layerView.highlight( results.features );
							view.goTo( results.features ).then(() => { //Goto not working with polines feature layer !?
								 console.log("ok");
							 }).catch((err) => {
								 console.log("Error: ", err);
                				});
						}
					})
					.catch(function(err)
					{
						console.log(err);
					});
				});
			});
		});
	</script>
</head>
<body>
	<div id="viewDiv"></div>
</body>
</html>

 

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

It looks like there is a problem with some of the features. These whereclauses work:

"FID <  670"
"FID > 675"
"FID <  670 OR FID > 675"
"FID = 669"
"FID = 671"
"FID = 673"
"FID = 674"

These whereclauses do not work

"FID = 670"
"FID = 672"
"FID = 675"

 

View solution in original post

9 Replies
KenBuja
MVP Honored Contributor

I tested this on another map service and would occasionally have a time where the query didn't work, but that was on the point layer, not the polyline layer. I set the query to "objectid < n" and tried various numbers and it usually worked for both left and middle click.

<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Intro to MapView - Create a 2D map | Sample | ArcGIS API for JavaScript 4.19</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>
    require([
      "esri/widgets/Sketch",
      "esri/widgets/Editor",
      "esri/Map",
      "esri/layers/FeatureLayer",
      "esri/tasks/support/Query",
      "esri/views/MapView",
      "esri/PopupTemplate"
    ], (Sketch, Editor, Map, FeatureLayer, Query, MapView, PopupTemplate) => {
      //-------------------------
      var layerView1 = null;
      var layerView2 = null;
      var highlightSelect = null;
      //"point" layer:
      var aLayer1 = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0",
        {
          id: "CAPTAGE",
          outFields: ["*"]
        });
      //"polyline" layer:
      var aLayer2 = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/1",
        {
          id: "CANAL",
          outFields: ["*"]
        });

      const map = new Map(
        {
          basemap: "dark-gray-vector",
          layers: [aLayer1, aLayer2]
        });

      const view = new MapView(
        {
          container: "viewDiv",
          map: map,
          center: [-90, 37],
          zoom: 5
        });

      view.when(() => {
        view.popup.defaultPopupTemplateEnabled = true;
        view.whenLayerView(aLayer1).then((layerView_) => {
          layerView1 = layerView_;
        });
        view.whenLayerView(aLayer2).then((layerView_) => {
          layerView2 = layerView_;
        });
        view.on("click", function (ev) {
          if (ev.button == 2) //right click remove highlighted
          {
            if (highlightSelect != null)
              highlightSelect.remove();
            return;
          }
          else if (ev.button == 1) //center click choose points feature layer
          {
            var layerView = layerView1;//Choose here layer to use for search
            aLayerToUse = aLayer1;
          }
          else //left click choose polines feature layer
          {
            var layerView = layerView2;//Choose here layer to use for search
            aLayerToUse = aLayer2;
          }

          if (highlightSelect != null)
            highlightSelect.remove();

          //let queryString = "IDT like '%C%'";
          let queryString = "objectid < 2";
          var query = new Query
            ({
              returnGeometry: true, //we need geometries
              outFields: ['*'],//we dont need all data, but if only one attribute is specified, no highLight occurs !
              outSpatialReference: view.spatialReference,
              where: queryString
            });
          console.log("Search= " + queryString);

          aLayerToUse.queryFeatures(query).then(function (results) {
            console.log("Results = " + results.features.length);
            if (results.features.length > 0) {
              highlightSelect = layerView.highlight(results.features);
              view.goTo(results.features).then(() => { //Goto not working with polines feature layer !?
                console.log("ok");
              }).catch((err) => {
                console.log("Error: ", err);
              });
            }
          })
            .catch(function (err) {
              console.log(err);
            });
        });
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>

 

0 Kudos
ReneRubalcava
Frequent Contributor

I'm not sure without real services to test, but are they non-mercator? I tried goTo with lines using Sketch Widget and it works.

https://codepen.io/odoe/pen/dyvzweE?editors=1000

0 Kudos
ChristopheS
New Contributor II

thanks for reply.

View spatial reference is on isWebMercator: true, wkid: 102100.

Here is a codepen showing the problem :

https://codepen.io/Chris_Siveco/pen/OJpjdJW

I see that will have to or paginate result set by 1000 features. By the way why I do not have access to objectid attribute in outfield?

0 Kudos
KenBuja
MVP Honored Contributor

Your layers use FID for the esriFieldTypeOID field

0 Kudos
ChristopheS
New Contributor II

Ok, thanks for that FID.

So, I noticed that with queryString = "1=1"; I get an issue (goTo() is not correct).

But if I use e.g. queryString = "FID < 10"; It seems to work.

However, with use e.g. queryString = "FID < 900"; I get the issue again.

You can check that on the codepen.

0 Kudos
KenBuja
MVP Honored Contributor

It looks like there is a problem with some of the features. These whereclauses work:

"FID <  670"
"FID > 675"
"FID <  670 OR FID > 675"
"FID = 669"
"FID = 671"
"FID = 673"
"FID = 674"

These whereclauses do not work

"FID = 670"
"FID = 672"
"FID = 675"

 

View solution in original post

ChristopheS
New Contributor II

So, may be the issue is the layer ? Maybe table indexes or else in AGOL ? Strange.

If it is so, I am going to publish a new version of these layers and see if the issue persists.

Thanks you guys for your help,

Regards

0 Kudos
KenBuja
MVP Honored Contributor

If you go to the service and query one of those faulty records, you'll see that it has no geometry:

674 (good record)

675 (bad record)

ChristopheS
New Contributor II

Brilliant ! This layer has NULL values geometries.

But then how do I tell the Query not to retrieve null geometries, as GEOMETRY is not a column name right ?

And also, this kind of behavior could happen with any layer, so it remains strange that the API goTo() takes into account null geometries by moving to anywhere. This looks like an API issue to me ?

 

0 Kudos