2016-10-12 2 views
0

Ich versuche Scroll-Zoom auf Mapbox Map zu deaktivieren, aber es funktioniert nicht. Kann mir jemand sagen, was mit meinem Code nicht stimmt? Der Fehler, den ich bekommen ist "Uncaught Typeerror: kann Eigenschaft 'disable' undefinierten lesen"Disable scroll zoom on mapbox

<script> 
    L.mapbox.accessToken = 'pk.token'; 
    var map = L.mapbox.map('map', 'mapbox.streets', { 
     legendControl: { 
      position: 'topright' 
     } 
    }) 
     .setView([56.3, 11.5], 7); 

     var popup = new L.Popup({ autoPan: false }); 

     // statesData comes from the 'us-states.js' script included above 
     var statesLayer = L.geoJson(statesData, { 
      style: getStyle, 
      onEachFeature: onEachFeature 
     }).addTo(map); 

     function getStyle(feature) { 
      return { 
       weight: 2, 
       opacity: 0.1, 
       color: 'black', 
       fillOpacity: 0.7, 
       fillColor: getColor(feature.properties.density) 
      }; 
     } 

     // get color depending on population density value 
     function getColor(d) { 
      return d > 1000 ? '#512b00' : 
       d > 500 ? '#8E4C01' : 
       d > 200 ? '#cc4c02' : 
       d > 100 ? '#ec7014' : 
       d > 50 ? '#fe9929' : 
       d > 20 ? '#fec44f' : 
       d > 10 ? '#fee391' : 
       d > 5 ? '#fff7bc' : 
       '#ffffe5'; 
     } 

     function onEachFeature(feature, layer) { 
      layer.on({ 
       mousemove: mousemove, 
       mouseout: mouseout, 
       click: zoomToFeature 
      }); 
     } 

     var closeTooltip; 

     function mousemove(e) { 
      var layer = e.target; 

      popup.setLatLng(e.latlng); 
      popup.setContent('<div class="marker-title">' + layer.feature.properties.name + '</div>' + 
       layer.feature.properties.density + ' feriehuse'); 

      if (!popup._map) popup.openOn(map); 
      window.clearTimeout(closeTooltip); 

      // highlight feature 
      layer.setStyle({ 
       weight: 3, 
       opacity: 0.3, 
       fillOpacity: 0.9 
      }); 

      if (!L.Browser.ie && !L.Browser.opera) { 
       layer.bringToFront(); 
      } 
     } 

     function mouseout(e) { 
      statesLayer.resetStyle(e.target); 
      closeTooltip = window.setTimeout(function() { 
       map.closePopup(); 
      }, 100); 
     } 

     function zoomToFeature(e) { 
      map.fitBounds(e.target.getBounds()); 
     } 

     map.legendControl.addLegend(getLegendHTML()); 

     function getLegendHTML() { 
     var grades = [0, 5, 10, 20, 50, 100, 200, 500, 1000], 
     labels = [], 
     from, to; 

     for (var i = 0; i < grades.length; i++) { 
      from = grades[i]; 
      to = grades[i + 1]; 

      labels.push(
      '<li><span class="swatch" style="background:' + getColor(from + 1) + '"></span> ' + 
      from + (to ? '&ndash;' + to : '+')) + '</li>'; 
     } 

     return '<span>Antal feriehuse</span><ul>' + labels.join('') + '</ul>'; 
     } 

     // disable map zoom when using scroll 
     map.scrollZoom.disable(); 
    </script> 

Antwort

5

Dies ist eine mapbox.js/Faltblatt Karte, nicht MapBox-gl-js, so ist der Unterschied in Leaflet die Scroll Zoomsteuerung heißt scrollWheelZoom nicht scrollZoom. Wenn Sie die letzte Zeile Ihres Skripts durch die folgende ersetzen, sollte es funktionieren. http://jsfiddle.net/x5j669zj/

if (map.scrollWheelZoom) { 
    map.scrollWheelZoom.disable(); 
} 
+0

Vielen Dank Kumpel! – Wessi