CODEWITHSUNDEEP
javascriptgoogle-sheetsleaflettabletop.js
dreamweaver
dreamweaver

Reputation: 303

Leaflet js with tabletop js sidebar menu for map

I am very new to leaflet.js and I searched all over the web but could not find an example of this. What I am trying to get is a sidebar menu to work with tabletop.js. I would like to be able to have no markers on the map until someone clicks on the sidebar menu item. The map should then pan zoom over to that marker or center it in window.

My example page is at: https://codepen.io/justawebbie/pen/LMdyNv

Here is my 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>

Here is my leaflet and tabletop 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 
});

Upvotes: 0

Views: 1276

Answers (1)

YaFred
YaFred

Reputation: 10008

You can take a look at this: http://franceimage.github.io/

You will find a few hints on how it works (click on letter I in the sidebar)

It uses sidebar and leaflet but not tabletop.

The data are served as json files (so all the filtering is done on the client side)

The application is old fashioned javascript: http://franceimage.github.io/map/explore.js

When you click on an item in the sidebar, it does not center the map automatically. It is done by clicking on an icon in the popup. You can easily automate this action.

Upvotes: 1

Related Questions