title: Leaflet zoom onto location using link and map.setView
body: <p>I've run into a little problem regarding the awesome leaflet map. I want to display a map with a couple of markers on it. Below this map I want to place some content, including a link once in a while that, when clicked, will move and zoom to one of those markers. I found some code on Stack Overflow that supposedly should do the trick, but it doesn't work for me and I cannot figure out where I've taken a wrong turn.</p>
  
  <p>This is the code I'm using for the map and zooming onclick:</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      var map = L.map('map').setView([48.45653, 8.90068], 8);
  
      L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
          maxZoom: 18,
          attribution: 'Map data &amp;copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, ' +
              '&lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, ' +
              'Imagery © &lt;a href="http://mapbox.com"&gt;Mapbox&lt;/a&gt;',
          id: 'examples.map-i86knfo3'
      }).addTo(map);
  
  
  
      var circle = L.circle([48.06591, 7.67221], 80, {
          color: 'red',
              fillColor: '#f03',
              fillOpacity: 0.3
      }).addTo(map)
          .bindPopup("Popup").openPopup();
  
      L.marker([48.06633, 7.67268]).addTo(map)
          .bindPopup("&lt;b&gt;Popup&lt;/b&gt;&lt;br /&gt;Text");
      L.marker([48.8098, 9.44223]).addTo(map)
          .bindPopup("&lt;b&gt;Popup&lt;/b&gt;&lt;br /&gt;Text");
  
      document.getElementById('map-navigation').onclick = function(abc) {
          var pos = abc.target.getAttribute('data-position');
          var zoom = abc.target.getAttribute('data-zoom');
          if (pos &amp;&amp; zoom) {
              var locat = pos.split(',');
              var zoo = parseInt(zoom);
              map.setView(locat, zoo, {animation: true});
              return false;
          }
      }       
  
      var popup = L.popup();
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the html I'm using as a link:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="map"&gt;
      &lt;div id="map-navigation" class="map-navigation"&gt;
          &lt;a href="#" data-zoom="12" data-position="48.06633,7.67268"&gt;
              Link
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>