Загрузите больше плиток в маленьком div

Question

Я пытаюсь достичь того, что было сделано с их интерфейсом! Смещение центра карты влево https://foursquare.com/.
Я обнаружил, что они сделали одну часть, но не могут реализовать вторую часть.
Первой частью было загрузить карту внутри небольшого div (тот, который будет содержать маркеры), затем с overflow:visible, другие плитки заполнят родительский div, который имеет width:100%.
Проблема, с которой я сталкиваюсь прямо сейчас, заключается в том, что показано только несколько фрагментов, когда я делаю переполнение: видимо.
Мой вопрос: как я могу загрузить больше плиток внутри маленького div?
На следующем рисунке показано, как плитки не заполняют весь контейнер. Спасибо.

EDIT

Это полная карта отображается на главной странице Foursquare в это называется отображение подсказок. BUT Эта карта показана только для контейнера overflow:visible. Если переполнение было скрыто, у вас было бы:

потому что размер div составляет всего 600 пикселей.

Answer 1

На самом деле очень классный учебник/статья по теме «Аспект списка» от Young Hahn from Mapbox, который вы можете прочитать здесь: http://alistapart.com/article/hack-your-maps Вы можете увидеть конечный результат здесь: https://www.mapbox.com/tutorial-sherlock/ Он использует Mapbox, но это почти то же самое, что и используя «Листовку» (Mapbox - это расширение Листовки), поэтому все, что там сделано, также работает на Лифлете. Он использует обертку вокруг элемента карты и относительного и абсолютного позиционирования:

#pane { 
    position:fixed; 
    top:0px; 
    bottom:0px; 
    right:0px; 
    width:66.6666%; 
} 
#map { 
    position:absolute; 
    top:0px; 
    bottom:0px; 
    width:200%; 
    left:-50%; 
} 

Вот небольшой TestCase с помощью листовки на Plunker: http://plnkr.co/edit/vkTvRi?p=preview