Листовка JS с настольным JS меню боковой панели для карты - PullRequest
Новая
       31

Листовка JS с настольным JS меню боковой панели для карты

0 голосов
/ 05 января 2019

Я очень новичок в leaflet.js, и я искал по всей сети, но не смог найти пример этого. Я пытаюсь получить боковое меню для работы с tabletop.js. Мне бы хотелось, чтобы на карте не было никаких маркеров, пока кто-нибудь не нажмет на элемент меню боковой панели. Карта должна затем переместиться, чтобы приблизить этот маркер или центрировать его в окне.

Моя страница примера находится по адресу: https://codepen.io/justawebbie/pen/LMdyNv

Вот мой HTML: 

<div id="mapwrap">
 <div id="toolbar">
    <div class="hamburger">
      <span>Tour&nbsp;Stops</span>
    </div>
    <div id="tourstops">
      <h2>Tour Stops</h2>
      <ul>
      </ul>
    </div>
     </div>
  <div id="leafletmap"></div>
</div>

Вот мой буклет и настольный js: 

 $('#toolbar .hamburger').on('click', function() {
     $(this).parent().toggleClass('open');
 });

 var a;
 var code_1 = '1rw2Dsm4AbNx6RihhXXxaCIipSH0n09iHYaMoDWLGe38';

 var mymap = L.map('leafletmap', {
     zoomControl: false
 });
 var mapTiles = 
   L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });

 mapTiles.addTo(mymap);
 mymap.setView([64.856426,-147.834147], 12);
 new L.Control.Zoom({
    position: 'topright'
  }).addTo(mymap);

 var buildingLayers = L.layerGroup().addTo(mymap);
 var markers = L.layerGroup();        
 a = Tabletop({
     key: code_1,
     callback: function(sheet, tabletop){ 
         for (var i in sheet){
            var place = sheet[i];
            var $listItem = $('<li>').html(place.title).appendTo('#toolbar ul');
            $listItem.on('click', function(){
                markers.clearLayers();
                const marker = L.marker([place.lat, place.lon])
                .bindPopup("<div class='row' style='width:300px;'><div class='col'><p><span style='font-size:1.2em;color: #236192;font-weight:bold;'>" + place.title + "</span><br />" + place.address + "</p><p><a href='" + place.weburl + "'>View more</a></p></div></div>")
                markers.addLayer(marker).addTo(mymap);
              })
           }
      },
      simpleSheet: true 
});

1 Ответ

0 голосов
/ 05 января 2019

Вы можете взглянуть на это: http://franceimage.github.io/

Вы найдете несколько советов о том, как это работает (нажмите на букву I на боковой панели)

Используется боковая панель и листовка, но не столешница.

Данные обслуживаются как файлы json (поэтому вся фильтрация выполняется на стороне клиента)

Приложение является старомодным JavaScript: http://franceimage.github.io/map/explore.js

Когда вы нажимаете на элемент на боковой панели, он не центрирует карту автоматически. Это делается путем нажатия на значок во всплывающем окне. Вы можете легко автоматизировать это действие.

...