Hello, we have come across a seemingly novel issue in our Vue 3 app that uses `@arcgis/core`, where for whatever reason both of the selection tools will start at the top left corner of the map, instead of where the cursor is.
Here's a sample of how we use the Sketch widget:
// All of this is inside of the body of
// mapView.value.when() statement
//
// Anything with .value is a Vue 3 ref
// https://vuejs.org/api/reactivity-core.html#ref
const graphicLayer = new GraphicsLayer({
id: 'our-graphics-layer',
title: 'Graphics',
parent: map.value?.basemap
});
const sketch = new Sketch({
layer: graphicLayer,
layout: 'horizontal',
view: mapView.value,
creationMode: "update",
defaultCreateOptions: {
mode: "hybrid",
},
snappingOptions: {
enabled: true,
featureSources: [{ layer: graphicLayer, enabled: true }]
}
});
mapView.value.map.add(graphicLayer);
// isBlank is a utility function that just checks if a variables value is
// undefine, null or ''
graphicLayer.when(() => {
mapView.value.extent = graphicLayer.fullExtent;
if (!isBlank(mapView.value?.graphics) && mapView.value?.graphics?.length > 0) {
graphicLayer.graphics.addMany(mapView.value?.graphics);
}
});
mapView.value.ui.add(sketch, "bottom-left");
We've tried with on `@arcgis/core` version `4.29.7` and `4.29.10`.
As of note, we can draw points, lines, rectangles, circles and polygons just fine, as well as move them around just fine.
The only issue is that the selection tools will start a selection in the top-left most corner of the map, and not at the cursors position.
EDIT: As a note, this is happening on recent versions of both Firefox and Chrome.
Solved! Go to Solution.
Hi @DavidDrennan it sounds like this could be a CSS issue. Did it work in previous versions of the API? Try to repro in a codepen using vanillaJS. Otherwise, you'll need to provide a simple, focused StackBlitz or GitHub repo.
Hi @DavidDrennan it sounds like this could be a CSS issue. Did it work in previous versions of the API? Try to repro in a codepen using vanillaJS. Otherwise, you'll need to provide a simple, focused StackBlitz or GitHub repo.
It ended up being CSS, we still had the CSS for an older version of the library loaded. Thanks!