2

I have implemented the new version for Here Maps Javascript API: 3.1 and I wand to disable the mouse wheel but only when scrolling the map itself, not all the page.

Please see the the following example: https://jsfiddle.net/ms57x34z/. I still want to be able to scroll the page down, while I'm over the map, so I can reach the footer content.

                  
/**
 * Moves the map to display over Berlin
 *
 * @param  {H.Map} map      A HERE Map instance within the application
 */
function moveMapToBerlin(map){
  map.setCenter({lat:52.5159, lng:13.3777});
  map.setZoom(14);
}

/**
 * Boilerplate map initialization code starts below:
 */

//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
  apikey: 'somevalue'
});

var defaultLayers = platform.createDefaultLayers();

//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
  defaultLayers.vector.normal.map,{
  center: {lat:50, lng:5},
  zoom: 4,
  pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());

//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
console.log(behavior);


behavior.disable(H.mapevents.Behavior.WHEELZOOM);

// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);

// Now use the map as required...
window.onload = function () {
  moveMapToBerlin(map);
}
#map {
  width: 95%;
  height: 450px;
  background: grey;
}

#panel {
  width: 100%;
  height: 400px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Map at a specified location</title>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <link rel="stylesheet" type="text/css" href="css/app.css" />
    <script type="text/javascript" src='../test-credentials.js'></script>    
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
    <script type="text/javascript" >window.ENV_VARIABLE = 'https://developer.here.com'</script>
    <script src='https://developer.here.com/javascript/src/iframeheight.js'></script>
  </head>
  <body id="markers-on-the-map">
    <div id="map" style="width: 500px; height: 800px"></div>
    <script type="text/javascript" src='js/app.js'></script>
    <div>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
        Footer content<br/><br/>
    </div>
  </body>
</html>

Is there a solution for this situation?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Alexandru Baciu
  • 21
  • 1
  • 1
    Hi please know that you have posted an API key that is just for you. – TessavWalstijn Aug 27 '20 at 13:24
  • How exactly are you going to enable scrolling over the map, while enabling scrolling inside the map? I think start by removing scrolling limitations `behavior.disable(H.mapevents.Behavior.WHEELZOOM);` - that's going to be closer to what you want - both scrolling in the map and on the page. – richardev Aug 27 '20 at 14:15
  • Thanks for your support. I think I did't make myself very clear with what I want to achieve: In the first example: https://d.pr/i/Qv7ev4 the event is disabled, I can scroll down the page to see the footer content only over the white background, where the map container is not present. In the second example: https://d.pr/i/WP9y8y, the event is not disabled anymore, when trying to scroll down, while the mouse position is over the map it changes the zoom, so either way I cannot reach the footer content when browsing. – Alexandru Baciu Aug 28 '20 at 13:36
  • So would it - on mouse over of map, disable wheel, on exit, re-enable? – Raymond Camden Aug 28 '20 at 15:30
  • Actually looking at Richard's comment above, did you try the behavior.disable? – Raymond Camden Aug 28 '20 at 15:31

2 Answers2

1

We have implemented a temporary fix for HERE Maps scroll issues, while we wait for the API update.

We add a non-visible element to the same container we add the map and position it so it will completely cover the map.

<div class="map-container">
    <div id="map-fixer" style="position: absolute; background-color: transparent; width: 100%; height: 100%; z-index: 1000; display: none;"></div>
</div>

We then show this when we detect the mouse wheel event.

(function () {
    var scrolling = false;
    var scrollEnd = null;

    function heremapScrollEnd() {
        scrolling = false;
        window.clearTimeout(scrollEnd);
        document.getElementById('map-fixer').style.display = 'none';
    }

    window.onwheel = function() {
        if (scrolling) {
            window.clearTimeout(scrollEnd);
            window.setTimeout(heremapScrollEnd, 200);
            return;
        }
        scrolling = true;
        document.getElementById('map-fixer').style.display = 'block';
        window.setTimeout(heremapScrollEnd, 1000);
    }
})();

This means the mouse wheel gets caught by our "spare element" and the scroll occurs normally. The invisible element is then removed when the scroll is finished, which means other map interactions still work.

We did try scrubbing the wheel event that is added by HERE Maps, but it's not possible to get a reliable handle on it (removing an event listener is tricky if you don't have the same function handle). We also tried applying the mouse delta to the scroll position, but this doesn't work with different mouse speeds and directions. The final experiment was a fixed overlay, but that prevents other features of the map being accessible (clicking, dragging, zooming). That's what lead us to using this approach.

Fenton
  • 241,084
  • 71
  • 387
  • 401
0

Right, the defination of

behavior.disable(H.mapevents.Behavior.Feature.WHEEL_ZOOM)

should have allowed the scrolling of whole page but currently this feature has not been implemented yet.

This feature (the scrolling of whole page) will be available later in HERE JS API for map.

  • Thanks for the answer. For the moment I've implement this using an overlay container over the map: 1. start scrolling over the map, cover the map with the overlay, so the scrolls works; 2. remove the overlay when you stop scrolling – Alexandru Baciu Oct 05 '20 at 05:50