CODEWITHSUNDEEP
javascripthere-api
Titan
Titan

Reputation: 6040

HERE maps JS, disable mouse zoom but not panning

I would like the user to be able to pan the map with their mouse/finger. However I want to restrict zooming to only using HERE ui controls.

I have tried the following:

    // Since our marker is in the center of the map we need to make sure zooming occurs at center of map only
    // The user can zoom to their mouse position which may not be center, so we need to disable and allow zooming
    // via the +/- buttons only :(

    this.mapBehavior.disable(window.H.mapevents.Behavior.WHEELZOOM)
    this.mapBehavior.disable(window.H.mapevents.Behavior.PINCH_ZOOM)
    this.mapBehavior.disable(window.H.mapevents.Behavior.DBL_TAP_ZOOM)
    this.mapBehavior.enable(window.H.mapevents.Behavior.PANNING) <-- this renables zoom

Unfortunately if I disable WHEELZOOM, I also lose the ability to pan. If I re-enable PANNING, zooming is turned back on.

How do I disable zooming without disabling panning?

Upvotes: 1

Views: 869

Answers (2)

Tomas
Tomas

Reputation: 1887

The problem why dragging was disabled was that you try to disable the feature which doesn't exist in Behavior object (PINCH_ZOOM & DBL_TAP_ZOOM). Also the way how features should be disabled is different in API version 3.0 and API version 3.1 (latest). From the code above I see that you use older version 3.0, therefore:

In version 3.0 there are only 3 features you can disable/enable: H.mapevents.Behavior.DBLTAPZOOM,H.mapevents.Behavior.DRAGGING, H.mapevents.Behavior.WHEELZOOM

So your code to disable zooming should look like:

this.mapBehavior.disable(window.H.mapevents.Behavior.WHEELZOOM)
this.mapBehavior.disable(window.H.mapevents.Behavior.DBLTAPZOOM)

In version 3.1 there are more features you can disable/enable: H.mapevents.Behavior.Feature.PANNING, H.mapevents.Behavior.Feature.PINCH_ZOOM, H.mapevents.Behavior.Feature.WHEEL_ZOOM, H.mapevents.Behavior.Feature.DBL_TAP_ZOOM, H.mapevents.Behavior.Feature.FRACTIONAL_ZOOM, H.mapevents.Behavior.Feature.HEADING, H.mapevents.Behavior.Feature.TILT,

So your code to disable zooming would (if you used version 3.1) look like:

this.mapBehavior.disable(window.H.mapevents.Behavior.Feature.WHEEL_ZOOM)
this.mapBehavior.disable(window.H.mapevents.Behavior.Feature.PINCH_ZOOM)
this.mapBehavior.disable(window.H.mapevents.Behavior.Feature.DBL_TAP_ZOOM)

See simple jsfiddle example to disable zoom with API version 3.1.

Upvotes: 3

Michel
Michel

Reputation: 28219

Try the following (mind the last line):

this.mapBehavior.disable(window.H.mapevents.Behavior.WHEELZOOM)
this.mapBehavior.disable(window.H.mapevents.Behavior.PINCH_ZOOM)
this.mapBehavior.disable(window.H.mapevents.Behavior.DBL_TAP_ZOOM)
this.mapBehavior.enable(window.H.mapevents.Behavior.DRAGGING)

Upvotes: 1

Related Questions