How do I disable trackpad scrolling in customized StoryMap?

[MarissaAltmann]

Good afternoon! I'm trying to disable trackpad scrolling in my custom hosted StoryMap. We have embedded it in our website but it's very distracting to users that panning and zoom are enabled. We'd like to pan and zoom using the zoom buttons and click/dragging only. 

I've tried recommendations from a couple of years ago but they seem to no longer work. So far I've tried the following in my custom scripts. I'm not sure if I'm just doing it wrong or if there's no way to disable this functionality.

Thank you!!!

Marissa

define(["dojo/topic"], function(topic) {
     /*
     * Custom Javascript to be executed while the application is initializing goes here
     */
  app.map.smartNavigation: false


     // The application is ready
     topic.subscribe("tpl-ready", function(){
          /*
          * Custom Javascript to be executed when the application is ready goes here
          */

          map.on("load", function() {
         map.disableScrollWheel();
       });

          view.on("mouse-wheel", function(evt){
            evt.stopPropagation();
          });

          view.surface.addEventListener("wheel", function(event) {
  event.stopImmediatePropagation();
}, true);

     });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RupertEssinger]

By trackpad scrolling do you also mean mouse wheel scrolling too? 

Rupert

[MarissaAltmann]

Hello! If necessary, then yes. The biggest issue is that users using laptops with trackpads are unable to scroll down the page where we have embedded the map using the inherent trackpad navigation without causing panning and zooming of the map. I don't have a mouse accessible to test whether the feature is an issue with that as well, but I imagine so. 

Ideally, users would:

- Pan the map by clicking and dragging the basemap itself only

- Zoom the map by using the zoom buttons in the upper lefthand of the map only

Thank you!

Marissa

[RupertEssinger]

Could you share a link to your page that contains the embedded story (assuming it is public) so we can take a look?

Rupert

[MarissaAltmann]

Hello Rupert,

I've pasted the links below. The links are: 

Link here: Wildlife Friendly Enterprise Network » Buy Wild!  

Hosted link here: Buy Wild! 

Thank you!

Marissa

[StephenSylvia]

Marissa, it would be best to modify the map navigation options by overriding the createMap options. This needs to be done within the code where the map first loads. If you share which story map you're using, we can point you to the correct location in the code.

[MarissaAltmann]

Thank you! I'm using the Shortlist App. Link here: Wildlife Friendly Enterprise Network » Buy Wild!  

Hosted link here: Buy Wild! 

I think I fudged up the js because it's loading really slow, so once I figure out what to do I think I'm going to re-host it. Thank you! I'm still not the best at the js stuff

Marissa

[StephenSylvia]

Marissa, it order to set the map options when the map first loads, you'll need to use the developer version of the code. That version will give you full access to the source code before it has been minified for production use. Once you make the changes, the app provides scripts to minify and concatenate your code to prepare it to put on your own web server for production use. The Readme on the github repo provides instructions: GitHub - Esri/storymap-shortlist: The Shortlist story map application template by Esri.

In the Shortlist, the createMap method is available here: storymap-shortlist/MainView.js at ea33cfd3bea616a8fd57ca8a0970429ea8592028 · Esri/storymap-shortlist.... A full list of options is available here: Map | API Reference | ArcGIS API for JavaScript 3.23. You'll probably want to disable smartNavigation and  isScrollWheel.

[KurtAdams]

It doesn't look like this was ever resolved. 

Seem obvious to me Marissa had the github version as she had already tried to implement some JS. Fair play though because she never responded.

I've tried to implement the prevent panning code from the developers support page without success. Any ideas?