CODEWITHSUNDEEP
javascriptjqueryjvectormap
Alex Murray
Alex Murray

Reputation: 275

Making jVectormap not draggable

Is there a way to make the viewport of the map locked (not draggable)? I've got a map on my page but I can still scroll it up and down when I click and drag with the mouse...

<div class="map-container">
  <div id="nz-map" style="width: 600px; height: 400px"></div>
</div>

and the js using to create map 

/* map parameters */
    var wrld = {
            map: 'nz_mill_en',
            backgroundColor: '#fff',
            regionStyle: {
      initial: {
        fill: '#012051'
      },
      hover: {
          "fill-opacity" : 1
      }},
            onMarkerClick: function(events, index) {
            $(location).attr('href', markers[index].weburl);
            },
            onRegionLabelShow: function(e, el, code){
                e.preventDefault();
            },
            colors:{
        "Northern": '#012051',
                "East Coast": '#012051',
                "Central": '#012051',
                "Upper South Island": '#012051',
                "South Canterbury": '#012051',
                "Otago": '#012051',
                "Southland": '#012051'
            },
            series: {
      regions:
      [{
        attribute: 'fill'
      }]
    },
            zoomButtons: false,
            zoomOnScroll: false,
            focusOn: {
                x: 0.3,
                y: 0.7,
                scale: 3
            },
            markerStyle: {
                initial: {
                    fill: '#F8E23B',
                    stroke: '#383f47'
                }
            },
            markers: markers,
    };

    $('#nz-map').vectorMap(wrld);

Upvotes: 1

Views: 916

Answers (1)

Mike Vranckx
Mike Vranckx

Reputation: 5577

You set the panOnDrag parameter on false to disable panning of the map

var wrld = {
    map: 'nz_mill_en',
    backgroundColor: '#fff',
    panOnDrag: false, // disable panning of the map
    ...
}

Upvotes: 2

Related Questions