0

I am trying to resolve an issue with the accuracy of a selected point using queryRenderedFeatures. The accuracy is fine when zoomed out, but when zooming in it appears off.

I am using the coordinates from the results of the queryRenderedFeatures to set the coordinates of a separate selection layer. This is the "blip" underneath the "properties" layer.

Here is the basic structure of my code:

const features = map.queryRenderedFeatures(e.point);

const selected = features[0].toJSON() // "properties" layer is at index 0

map.addSource('propertySelect', { // source for the selected property
                "type": "geojson",
                selected
            });

map.addLayer({"id": "propertySelect", // layer for the selected property. The "blip"
              "source": "propertySelect",
              "type": "circle"
              "circle-radius-transition": {duration: 0},
              "circle-opacity-transition": {duration: 0},
              "circle-radius": 0,
            }, 'properties');

TLDR

Setting a features coordinates based on an existing feature does not seem to match the same coordinates when zoomed in. See image below.

GIF of issue

0

When you first called queryRenderedFeatures you're getting the coordinates generalised to the zoom level your map was initially at, which as you can see is a bit off the source data coordinates.

You'll either need to take the ID of the selected feature and lookup the geometry directly, or re-do your queryRenderedFeatures or querySourceFeatures after you've zoomed in.

  • Is there documentation that says coordinate values get generalized based on zoom level? The X Y values aren't any different when I log them at different zoom levels. – its30 Mar 23 at 14:36
  • 1
    Are you using GeoJSON to load the data initially? If so, mapbox-gl-js converts the data to vector tiles using the geojson-vt library making some choices to improve performance. There is some info here docs.mapbox.com/help/troubleshooting/… and some of the settings from geojson-vt are exposed in mapbox-gl docs.mapbox.com/mapbox-gl-js/style-spec/#sources-geojson – Kristofor Carle Mar 28 at 6:24
  • @KristoforCarle yes the data is loaded from geojson. Adding the data to the map at "zoom end" has resolved this issue for me. I'll refer to those links for future reference. – its30 Apr 11 at 0:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.