title: Mapbox markers disappearing when too far away from map center
body: <p>I have a Mapbox map with markers (I also use MarkerCluster). I get these HTML markers in JavaScript to determine their position (from viewport, not their coordinates), so I can add some indicators of markers that are not in viewport. But I realized that when I'm too far away from a marker (when zooming or dragging the map for example), the markers just doesn't appear in the HTML! It seems it's the normal behaviour because I can see the same thing happening in the official examples.</p>
  
  <p>So, here's the question: is there any way to prevent this behaviour and always have the markers in the HTML?</p>
  
  <p>Here is the JavaScript: (I use mapbox.js and leaflet.markercluster)</p>
  
  <pre><code>var places = {
      "type": "FeatureCollection",
      "features": [{
          "type": "Feature",
          "properties": {
              "description": "&gt;Test 1"
          },
          "geometry": {
              "type": "Point",
              "coordinates": [-1.6313898, 47.2005156]
          }
      }, {
          "type": "Feature",
          "properties": {
              "description": "Test 2"
          },
          "geometry": {
              "type": "Point",
              "coordinates": [2.3279346, 48.8960698]
          }
      }, {
          "type": "Feature",
          "properties": {
              "description": "Test 3"
          },
          "geometry": {
              "type": "Point",
              "coordinates": [2.7391394, 48.7238554]
          }
      }, {
          "type": "Feature",
          "properties": {
              "description": "Test 4"
          },
          "geometry": {
              "type": "Point",
              "coordinates": [55.4933757, -20.9034031]
          }
      }]
  };
  
  L.mapbox.accessToken = 'pk.eyJ1Ijoic3RlcmVvc3VwZXIiLCJhIjoiY2lyM2JnMDIwMDAxM2k0bWNndmUzeTFhbSJ9.UZ-XuPASxGVtYFSqdVyppg';
  
  var map = L.mapbox.map('map', null, {minZoom: 3, maxZoom: 16, center: [46, 8], zoom: 5, scrollWheelZoom: false, maxBounds: [[-100.0,-100.0],[100.0,100.0]]});
  L.mapbox.styleLayer('mapbox://styles/stereosuper/cir3bgtaz001wjcnntu6n2axw').addTo(map);
  
  var markers = L.mapbox.featureLayer(places);
  var icon = L.divIcon({ iconSize: [30, 30], popupAnchor: [0, -20] });
  markers.eachLayer(function(l){ l.setIcon(icon); });
  
  var clusterPlaces = new L.MarkerClusterGroup({
      iconCreateFunction: function(cluster){
          return new L.DivIcon({ iconSize: [30, 30], html: '&lt;div class="marker-cluster"&gt;&lt;span&gt;'+cluster.getChildCount()+'&lt;/span&gt;&lt;/div&gt;' });
      }
  });
  clusterPlaces.addLayer(markers).addTo(map);
  
  map.on('moveend', function(e){
      var htmlMarkers = $('.leaflet-marker-icon'),
          xCenter = $(window).width()/2, yCenter = $(window).height()/2;
  
      if($('.map-indicator').length){
          $('.map-indicator').remove();
      }
  
      htmlMarkers.each(function(i){
          var thisMarker = $(this),
              thisCluster = thisMarker.find('span').length,
              thisMarkerHtml = thisCluster ? thisMarker.find('span').html() : 1;
          var top = thisMarker.offset().top, left = thisMarker.offset().left;
          var indicator = '&lt;button class="map-indicator map-indicator-'+i+'"&gt;&lt;span&gt;'+thisMarkerHtml+'&lt;/span&gt;&lt;/button&gt;';
          var newLeft, newTop, angle, distance;
          var mapHtml = $('#map');
  
          if(top + thisMarker.height() &lt; 0){
              mapHtml.append(indicator)
              if(left &gt; xCenter){
                  distance = (left-xCenter) * (yCenter/(yCenter-top));
                  angle = Math.atan(distance/yCenter)*180/Math.PI;
                  newLeft = xCenter + distance;
                  if(newLeft &gt; $(window).width() - 40) newLeft = $(window).width() - 40;
              }else{
                  distance = (xCenter-left) * (yCenter/(yCenter-top));
                  angle = - Math.atan(distance/yCenter)*180/Math.PI;
                  newLeft = xCenter - distance;
                  if(newLeft &lt; 40) newLeft = 40;
              }
              $('.map-indicator-'+i).css({'top': '10px', 'left':  newLeft + 'px', 'bottom': 'auto', 'right': 'auto', '-webkit-transform': 'rotate('+angle+'deg)', 'transform': 'rotate('+angle+'deg)'}).addClass('top').removeClass('bottom', 'left', 'right');
          }else if(top &gt; $(window).height()){
              mapHtml.append(indicator)
              if(left &gt; xCenter){
                  distance = (left-xCenter) * (yCenter/(yCenter+(top-$(window).height())));
                  angle = - Math.atan(distance/yCenter)*180/Math.PI;
                  newLeft = xCenter + distance;
                  if(newLeft &gt; $(window).width() - 40) newLeft = $(window).width() - 40;
              }else{
                  distance = (xCenter-left) * (yCenter/(yCenter+(top-$(window).height())));
                  angle = Math.atan(distance/yCenter)*180/Math.PI;
                  newLeft = xCenter - distance;
                  if(newLeft &lt; 40) newLeft = 40;
              }
              $('.map-indicator-'+i).css({'bottom': '10px', 'left':  newLeft + 'px', 'top': 'auto', 'right': 'auto', '-webkit-transform': 'rotate('+angle+'deg)', 'transform': 'rotate('+angle+'deg)'}).addClass('bottom').removeClass('top', 'left', 'right');
          }else if(left + thisMarker.width() &lt; 0){
              mapHtml.append(indicator)
              if(top &lt; yCenter){
                  distance = (yCenter-top) * (xCenter/(xCenter-left));
                  angle = Math.atan(distance/xCenter)*180/Math.PI;
                  newTop = yCenter - distance;
                  if(newTop &lt; 0) newTop = 0;
              }else{
                  distance = (top-yCenter) * (xCenter/(xCenter-left));
                  angle = - Math.atan(distance/xCenter)*180/Math.PI;
                  newTop = yCenter + distance;
                  if(newTop &gt; $(window).height()) newTop = $(window).height() - thisMarker.height();
              }
              $('.map-indicator-'+i).css({'top': newTop, 'left': '10px', 'bottom': 'auto', 'right': 'auto', '-webkit-transform': 'rotate('+angle+'deg)', 'transform': 'rotate('+angle+'deg)'}).addClass('left').removeClass('bottom', 'top', 'right');
          }else if(left &gt; $(window).width()){
              mapHtml.append(indicator)
              if(top &lt; yCenter){
                  distance = (yCenter-top) * (xCenter/(xCenter+(left-$(window).width())));
                  angle = - Math.atan(distance/xCenter)*180/Math.PI;
                  newTop = yCenter - distance;
                  if(newTop &lt; 0) newTop = 0;
              }else{
                  distance = (top-yCenter) * (xCenter/(xCenter+(left-$(window).width())));
                  angle = Math.atan(distance/xCenter)*180/Math.PI;
                  newTop = yCenter + distance;
                  if(newTop &gt; $(window).height()) newTop = $(window).height() - thisMarker.height();
              }
              $('.map-indicator-'+i).css({'top': newTop, 'left': 'auto', 'bottom': 'auto', 'right': '10px', '-webkit-transform': 'rotate('+angle+'deg)', 'transform': 'rotate('+angle+'deg)'}).addClass('right').removeClass('bottom', 'left', 'top');
          }
  
          $('.map-indicator-'+i).on('click', function(e){
              var coordinates = map.layerPointToLatLng(thisMarker.context._leaflet_pos);
              map.panTo(coordinates);
          });
      });
  });
  </code></pre>
  
  <p>Thanks in advance</p>