CODEWITHSUNDEEP
javascriptdom-eventshere-apiheremaps
Alexandru Baciu
Alexandru Baciu

Reputation: 21

Here Maps 3.1 Mouse wheel event using Here Maps

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?

Upvotes: 2

Views: 992

Answers (2)

Fenton
Fenton

Reputation: 250802

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.

Upvotes: 1

user3505695
user3505695

Reputation:

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.

Upvotes: 0

Related Questions