Center Leaflet map from clicking a list item in jQuery nested popup

Question

I am trying to make a little Leaflet-based map for an academic conference. Essentially it shows the conference-goers the locations of various places of interest in Lexington, KY, USA. These places are split up into 6 categories: Conference Location, Restaurant, Bar, Coffee, Lodging, and Other.

I am able to successfully load and style an external geoJSON layer onto my map, but I am trying to add a little bit more functionality with a jQuery-mobile nested pop-up. The categories above are the headers and the place names are listed under the appropriate category.

Goal:When a user clicks/touches a place's name in the nested popup, the map centers on the lat/long of that point. Ideally the pop-up information on the point would show up too, but the re-centering is the most essential part.

Now, I have seen an example of the MapBox Cloudless Atlas Tour that is similar to what I am describing, but it has the location data for each point hard-coded as an array(?) within their HTML. I would rather continue loading my geoJSON layer from an external source, but am having trouble figuring out how to work that with my aforementioned goal. (It seems in my current set-up my variable for the geoJSON file is not global and I'm not connecting the dots very well to get around that.)

Question 1: How do I link the place names to their location in the map?

Question 2: How might I tell the map to re-center on a specific lat/long when it's place name is clicked in the nested pop-up?

Below is my code. It can also be accessed on github. The code below is test.html and the geoJSON file is dope-places.gejson. Thank you for any guidance. I am new to coding, but eager to learn more.

    <!DOCTYPE html>
<html>
<!--+++++++++++++++++++++++++++++++++++++++++++++++++++++-->
<head>
<meta charset=utf-8 />
<title>Leaflet Test</title>
<!--LIBRARIES & EXTERNAL SHIT-->
<!--INCLUDE LEAFLET CSS-->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    <!--INCLUDE LEAFLEET JS FILE-->
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
    <!--INCLUDE jQUERY-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!--INCLUDE jQUERY-MOBILE-->
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
    <script src="//code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>

<!--CSS-->
  <style>

  /*BODY STYLE*/
  body { 
    margin:0; 
    padding:0; 
  }
  /*MAP STYLE*/
    #dope-map { 
    position:absolute; 
    top:0; bottom:0;
    width:100%
  }
  </style>
</head>
<!--+++++++++++++++++++++++++++++++++++++++++++++++++++++-->
<body>
<!--DIV CONTAINER FOR MAP-->
  <div id="dope-map"></div>

<!--nav tabs-->
<a href="#popupNested" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-b" data-transition="pop">Choose a location...</a>
<div data-role="popup" id="popupNested" data-theme="none">
    <div data-role="collapsibleset" data-theme="b" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
        <div data-role="collapsible" data-inset="false">
        <h2>Conference Location</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog" id="18">Fine Arts Library</a></li>
                <li><a href="#" data-rel="dialog" id="15">Gaines Center</a></li>
                <li><a href="#" data-rel="dialog" id="17">Memorial Colliseum Parking</a></li>
                <li><a href="#" data-rel="dialog" id="16">Memorial Hall</a></li>
                <li><a href="#" data-rel="dialog" id="21">Parking Structure #5</a></li>
                <li><a href="#" data-rel="dialog" id="14">Student Center</a></li>
                <li><a href="#" data-rel="dialog" id="20">Student Center Parking</a></li>
                <li><a href="#" data-rel="dialog" id="19">White Hall Classroom Building</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
        <h2>Restaurant</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog" id="37">Alfalfa Restaurant</a></li>
                <li><a href="#" data-rel="dialog" id="47">Bangkok House</a></li>
                <li><a href="#" data-rel="dialog" id="44">Chipotle</a></li>
                <li><a href="#" data-rel="dialog" id="40">Doodles Restaurant</a></li>
                <li><a href="#" data-rel="dialog" id="35">Great Bagel</a></li>
                <li><a href="#" data-rel="dialog" id="45">Han Woo Ri</a></li>
                <li><a href="#" data-rel="dialog" id="46">Joe Bologna's</a></li>
                <li><a href="#" data-rel="dialog" id="43">King Tut</a></li>
                <li><a href="#" data-rel="dialog" id="34">Mellow Mushroom</a></li>
                <li><a href="#" data-rel="dialog" id="38">Oasis Mediterranean Restaurant</a></li>
                <li><a href="#" data-rel="dialog" id="42">Pazzo's</a></li>
                <li><a href="#" data-rel="dialog" id="39">Sam's Hot Dog Stand</a></li>
                <li><a href="#" data-rel="dialog" id="18">Sarah Mediterranean</a></li>
                <li><a href="#" data-rel="dialog" id="31">Stella's Kentucky Deli</a></li>
                <li><a href="#" data-rel="dialog" id="33">The Local Taco</a></li>
                <li><a href="#" data-rel="dialog" id="32">The Village Idiot</a></li>
                <li><a href="#" data-rel="dialog" id="30">Tolly-Ho</a></li>
                <li><a href="#" data-rel="dialog" id="41">Village Host Pizza</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
        <h2>Bar</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog" id="1">Al's Bar</a></li>
                <li><a href="#" data-rel="dialog" id="54">Arcadium</a></li>
                <li><a href="#" data-rel="dialog" id="3">The Beer Trappe</a></li>
                <li><a href="#" data-rel="dialog" id="7">Chevy Chase Inn</a></li>
                <li><a href="#" data-rel="dialog" id="6">Country Boy Brewing</a></li>
                <li><a href="#" data-rel="dialog" id="10">Green Lantern</a></li>
                <li><a href="#" data-rel="dialog" id="9">Grey Goose</a></li>
                <li><a href="#" data-rel="dialog" id="5">Lynagh's Irish Pub</a></li>
                <li><a href="#" data-rel="dialog" id="4">Side Bar Grill</a></li>
                <li><a href="#" data-rel="dialog" id="8">Soundbar</a></li>
                <li><a href="#" data-rel="dialog" id="2">West Sixth Brewery</a></li>
                <li><a href="#" data-rel="dialog" id="41">Wine and Market</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
        <h2>Coffee</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog" id="12">Coffea</a></li>
                <li><a href="#" data-rel="dialog" id="55">Common Grounds</a></li>
                <li><a href="#" data-rel="dialog" id="57">National Boulangerie</a></li>
                <li><a href="#" data-rel="dialog" id="11">North Lime Coffee &amp; Donuts</a></li>
                <li><a href="#" data-rel="dialog" id="13">Third Street Stuff &amp; Coffee</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
        <h2>Lodging</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog" id="26">Gratz Park Inn</a></li>
                <li><a href="#" data-rel="dialog" id="24">Holiday Inn Express Hotel &amp; Suites</a></li>
                <li><a href="#" data-rel="dialog" id="23">Hyatt Regency Lexington</a></li>
                <li><a href="#" data-rel="dialog" id="25">Spring Hill Suites</a></li>
                <li><a href="#" data-rel="dialog" id="22">University Inn</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
        <h2>Other</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog" id="27">Blue Grass Airport</a></li>
            </ul>
        </div><!-- /collapsible -->
    </div><!-- /collapsible set -->
</div><!-- /popup -->
<!--SCRIPTS-->
  <script>
    //TILES AS A VARIABLE
    var tiles = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.jpg', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.</a>',
    maxZoom: 18
    });

    //STYLE MARKERS
    var geojsonMarkerOptions = {
      radius: 8,
      color: "#000",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.8
    };

    //GET geoJSON USING jQUERY FUNCTION AND MAP IT
     $.getJSON("./dope-places.geojson", function(data) {
      var geojson = L.geoJson(data, {
        onEachFeature: function (feature, layer) {
          layer.bindPopup(feature.properties.Name + "<br>" + feature.properties.Add);
        },
        pointToLayer: function (feature, latlng) {
          return L.circleMarker(latlng, geojsonMarkerOptions);
        },
        style: function(feature) {
            switch (feature.properties.Type) {
                case 'Conference Location': return {color: "#4daf4a"}; //GREEN
                case 'Restaurant':   return {color: "#e41a1c"}; //RED
                case 'Bar': return {color: "#377eb8"}; //BLUE
                case 'Coffee':   return {color: "#984ea3"}; //PURPLE
                case 'Lodging': return {color: "#ff7f00"}; //ORANGE
                case 'Other':   return {color: "#ffff33"}; //YELLOW
                ;
              }
        }
      });

      //DRAW MAP IN DIV WITH BOUNDS, TILES, AND geoJSON
       var map = L.map('dope-map').fitBounds(geojson.getBounds());
        tiles.addTo(map);
        geojson.addTo(map);
        });
  </script>
</body>
<!--+++++++++++++++++++++++++++++++++++++++++++++++++++++-->
</html>

Thank you for your response.The "where" for my problem seems to be in the connection between the nested pop-up and the map. How can I make an interaction in the nested pop-up change a property of the map? In this case, I am having trouble coming up with a model where click the list items in the nested pop-up can be used to control the center positioning of the map, particularly while using geoJSON loaded from an external source. As for "what I've tried", I've been trying use the jQuery .click, but I'm afraid I don't understand how to integrate Leaflet with jQuery functions. — maptastik

matg matg · Accepted Answer · 2014-04-03T15:29:58

You could add your JQuery click event in the "onEachFeature"

onEachFeature: function (feature, layer) {
   var popup = layer.bindPopup(feature.properties.Name + "<br>" + feature.properties.Add);
   $('#'+feature.properties.ID).click(function() {
        map.panTo( 
           new L.LatLng( feature.properties.latitude, feature.properties.longitude)
        );
        popup.openPopup();
   });
},
pointToLayer: [...]

mg

Center Leaflet map from clicking a list item in jQuery nested popup

1 Answers