CODEWITHSUNDEEP
javascriptjqueryhtml
BIlly
BIlly

Reputation: 427

Jquery calling javascript function

this is my code. i have a trouble calling javascript function inside jquery. hope someone can help. All jquery source is in my desktop

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Heatmaps</title>
    <link rel="stylesheet" href="/Users/billy.sutomo/Desktop/jQRangeSlider-5.7.2/css/iThing.css" type="text/css" />
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="/Users/billy.sutomo/Desktop/ion.rangeSlider.js"></script>

    <script>
// Adding 500 Data Points
$("#example_id").ionRangeSlider({
    type: "double",
    min: 0,
    max: 1000,
    from: 200,
    to: 500,
    grid: true
});
var map, pointarray, heatmap;

var dataCoba = [
[-6.3101575, 106.8866042,1,5000],
[-6.3207277, 106.7199845,1,5000],
[-6.3347923, 106.8960634,1,5000],
[-6.3385232, 106.887307,1,5000],
[-6.3398398, 106.8518703,1,5000],
[-6.3416666, 106.7769226,1,5000],
[-6.346902, 106.93247,1,6000],
[-6.3478682, 106.8636581,1,6000],
[-6.3588784, 106.8845249,1,6000]];

function initialize() {
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(-6.187595, 106.823713),
    mapTypeId: google.maps.MapTypeId.MAP
  };

  var dataTes = []

    for(i=0 ; i < dataCoba.length ; i++){
        //if(dataCoba[i][3]==6000)
        dataTes.push({location: new google.maps.LatLng(dataCoba[i][0], dataCoba[i][1]), weight :dataCoba[i][2]});
    }

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var pointArray = new google.maps.MVCArray(dataTes);

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray,
    radius: 22
  });

  heatmap.setMap(map);
}

function gantiNilai(o){
    var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(-6.187595, 106.823713),
    mapTypeId: google.maps.MapTypeId.MAP
  };

  var dataTes = []

    for(i=0 ; i < dataCoba.length ; i++){
        if(dataCoba[i][3]==o)
        dataTes.push({location: new google.maps.LatLng(dataCoba[i][0], dataCoba[i][1]), weight :dataCoba[i][2]});
    }

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var pointArray = new google.maps.MVCArray(dataTes);

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray,
    radius: 22
  });

  heatmap.setMap(map);
}

function toggleHeatmap() {
  heatmap.setMap(heatmap.getMap() ? null : map);
}

function changeGradient() {
  var gradient = [
    'rgba(0, 255, 255, 0)',
    'rgba(0, 255, 255, 1)',
    'rgba(0, 191, 255, 1)',
    'rgba(0, 127, 255, 1)',
    'rgba(0, 63, 255, 1)',
    'rgba(0, 0, 255, 1)',
    'rgba(0, 0, 223, 1)',
    'rgba(0, 0, 191, 1)',
    'rgba(0, 0, 159, 1)',
    'rgba(0, 0, 127, 1)',
    'rgba(63, 0, 91, 1)',
    'rgba(127, 0, 63, 1)',
    'rgba(191, 0, 31, 1)',
    'rgba(255, 0, 0, 1)'
  ]
  heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}

function changeRadius(r) {
      /* This was the original line in the example code.
         It simply toggles between default and radius=20
         when a button is clicked. */
      //heatmap.set('radius', heatmap.get('radius') ? null : 20);

      /* I've replaced it with this. */
      heatmap.set('radius', r);
}

function changeOpacity(min,max) {
      var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(-6.187595, 106.823713),
    mapTypeId: google.maps.MapTypeId.MAP
  };

  var dataTes = []

    for(i=0 ; i < dataCoba.length ; i++){
        if(dataCoba[i][3]==o > min && dataCoba[i][3]==o < max)
        dataTes.push({location: new google.maps.LatLng(dataCoba[i][0], dataCoba[i][1]), weight :dataCoba[i][2]});
    }

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var pointArray = new google.maps.MVCArray(dataTes);

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray,
    radius: 22
  });

  heatmap.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>

  <body>
    <div id="panel">
      <button onclick="toggleHeatmap()">Toggle Heatmap</button>
      <button onclick="changeGradient()">Change gradient</button>

      <!-- The next two lines are the original buttons -->
      <!--button onclick="changeRadius()">Change radius</button-->
      <!--button onclick="changeOpacity()">Change opacity</button-->

      <!-- These are the sliders I added.  Opacity works fine.  Radius does not. -->
      Radius
      <input type="range" id="radiusSlider" onchange="changeRadius(radiusSlider.value)"  min="1" max="40" step="1" value="12">
      Value
      <input type="range" id="opacitySlider" onchange="gantiNilai(opacitySlider.value)"  min="1000" max="6000" step="1000" value="1000">
      <div id="editSlider"></div>
      <input type="text" id="example_id" name="example_name" value="" />

    </div>
    <div id="map-canvas"></div>
    <script src="/Users/billy.sutomo/Desktop/jquery-2.2.1.min.js"></script>
    <script src="/Users/billy.sutomo/Desktop/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
    <script src="/Users/billy.sutomo/Desktop/jQRangeSlider-5.7.2/jQEditRangeSlider-min.js"></script>
     <script>
    $("#editSlider").rangeSlider({bounds: {min: 1000, max: 6000}, defaultValues:{min: 2000, max: 3000}});
     </script>
  </body>
</html>

how can i call this javascript function

changeOpacity(min,max)

inside this jquery function

$("#editSlider").rangeSlider({bounds: {min: 1000, max: 6000}, defaultValues:{min: 2000, max: 3000}});

thx before

Upvotes: 0

Views: 87

Answers (2)

ryan
ryan

Reputation: 197

Wait, your using the ion range slider..which is:

$("#editSlider").rangeSlider({
    bounds: {min: 1000, max: 6000}, 
    defaultValues:{min: 2000, max: 3000},
    onChange: changeOpacity(min, max)
});

Upvotes: 0

ryan
ryan

Reputation: 197

you have to use

$("#slider").bind("valuesChanging", function(e, data){
  changeOpacity(min,max)
});

the function you place as the value of slide gets called every interval on your slider

Upvotes: 1

Related Questions