nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Sketch widget tools take time to display mouse cursor when it gets activated first time

BhavinSanghani

I have written my code to initiate the Sketch tools following way.

When the tool gets activated first time on click of the button (it's in my application, not the Sketch widget button) then it downloads several small javascript files and the tool related mouse cursor(crosshair) doesn't appear on the map immediately. This behavior is noticeable if you throttle the speed in Chrome to Slow 3G.

require(['esri/widgets/Sketch', 'esri/widgets/Sketch/SketchViewModel'], function(Sketch, SketchViewModel) {

var sketch = new Sketch({
defaultCreateOptions: {
mode: 'click'
},
layer: <graphic layer>,
updateOnGraphicClick: false,
view: mapView,
viewModel: new SketchViewModel({
pointSymbol: <pointSymbol>,
polylineSymbol: <polylineSymbol>
})
});

sketch.when(function(){
sketch.create(<tool>); //tool is point or polyline
});
});

Any idea on how to improve this performance or correct way to activate the tool so user doesn't require to wait?

Encontre mais publicações marcadas com

Accepted answers

JoelBennett

No, this is not a bug. It is by design that modules are not downloaded until they are imported via a call to "require" or "define". Therefore, it makes sense to import the modules you need when the application is starting up. It may make startup time a little bit longer, but the user expects some load time at the beginning.

All comments

JoelBennett

BhavinSanghani

Thanks @JoelBennett . I was thinking about it as a temporary fix. It looks like a workaround and I will try out.

Is there any idea if this is a bug with the API?

JoelBennett

Yes, but what I'm saying is that you should also include Sketch and SketchViewModel in the call to require in function A, even if you don't use them in function A. That way, Sketch and SketchViewModel will already be available on the client by the time function B is called. Otherwise function B executes, and then it has to wait until those modules download before the "real" execution takes place.

BhavinSanghani

@JoelBennett Thanks for replying. Map and MapView have already been initialized before I initialized Sketch widget in a separate function. So, they are already available on the client.

It is like when screen loads then

function A(){

require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {

});

}

Then call function B on a separate button click.

function B() {

require(['esri/widgets/Sketch', 'esri/widgets/Sketch/SketchViewModel'], function(Sketch, SketchViewModel) {

var sketch = new Sketch({
           defaultCreateOptions: {
                mode: 'click'
           },
          layer: <graphic layer>,
          updateOnGraphicClick: false,
         view: mapView,
          viewModel: new SketchViewModel({
             pointSymbol: <pointSymbol>,
             polylineSymbol: <polylineSymbol>
         })
    });

      sketch.when(function(){
           sketch.create(<tool>); //tool is point or polyline
      });
});}

JoelBennett

You could also require these modules when your application starts up, i.e. in the same call to require that includes your MapView:

require(["esri/Map", "esri/views/MapView", "esri/widgets/Sketch", "esri/widgets/Sketch/SketchViewModel"], function(Map, MapView, Sketch, SketchViewModel) {
	var map = new Map({
		//etc
	});

	//etc
});

That way, when your existing code executes, those modules will already be available on the client.

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Entrar
Registrar

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.