panTo() duration not working?

Question

I would simply like to pan to a coordinate on my map using:

earth.panTo([0,0], {animate: true, duration: 2.0});

But the duration option is being ignored -- it seems the default duration is 10 seconds and can't be changed.

For what it's worth, I'm using Wrld's (eegeo) 3D globe plugin built on top of Leaflet, and I'm accessing it via:

<script src="https://cdn-webgl.wrld3d.com/wrldjs/dist/latest/wrld.js"></script>

Here is my html file:

<!DOCTYPE HTML>
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> 

    <script src="https://cdn-webgl.wrld3d.com/wrldjs/dist/latest/wrld.js"></script>
    <title></title>
  </head>
  <body onload="App.createGlobe()">
      <div id="earth_div"></div>
      <script src="js/app.js"></script>
  </body>
</html>

And here is my app.js file:

App = {
  createGlobe: function() {
    var options = {zoom: 3, center: [40.3461, -94.8725]};
    var earth = new L.Wrld.map('earth_div', "insert_api_key_here", options);

    customMarker = L.Marker.extend({
          options: {
            markerID : ''
          }
    });

    $.getJSON('../causes.json', function(data) {   

          for (i = 0; i < data.length; i ++) { 
            var newMarkerOptions = {riseOnHover: true, markerID: data[i].id};
            var newMarker = new customMarker([], newMarkerOptions);
            newMarker.setLatLng(data[i].mapCoord);
            newMarker.addTo(earth); 
            markerClicked(newMarker);
          }

          function markerClicked(marker) {
            marker.on('click', function() {
              earth.panTo(data[marker.options.markerID].mapCoord, {animate: true, duration: 2.0});
            });
          };
    });
  }
};

Could you provide a minimum example of your code? Maybe on [blockbuilder](http://blockbuilder.org/) can work for you? — Camilo, Oct 13 '17 at 13:59

score 0 · Answer 1 · answered Oct 15 '17 at 15:46

0

Despite I don't know how exactly the wrld.js API works, it seems that the method you need is map.setView() as shown in the API example.

See it in action here.

answered Oct 15 '17 at 15:46

Camilo

169
1
19

Thank you so much! All I needed was the right call. – jeff Oct 18 '17 at 03:16
@jeff Glad you solved your problem. If the answer was useful, don't forget to accept it as the answer. – Camilo Oct 18 '17 at 11:09

panTo() duration not working?

1 Answers1