Центральная карта листовки при нажатии на элемент списка во вложенном jQuery-всплывающем окне

Question

Центральная карта листовки при нажатии на элемент списка во вложенном jQuery-всплывающем окне

0

Я пытаюсь сделать небольшую карту на основе лифлета для научной конференции. По сути, это показывает участникам конференции места различных достопримечательностей в Лексингтоне, штат Кентукки, США. Эти места разделены на 6 категорий: Место проведения Конференции, Ресторан, Бар, Кофе, Жилье и Другое.

Я могу успешно загрузить и создать внешний слой geoJSON на моей карте, но я пытаюсь добавить немного больше функциональности с помощью jQuery-мобильного вложенного всплывающего окна. Категории выше - это заголовки, а имена мест перечислены в соответствующей категории.

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

Теперь я видел пример MapBox Cloudless Atlas Tour, который похож на то, что я описываю, но у него есть данные о местоположении для каждой точки, жестко закодированные как массив (?) В пределах их HTML. Я предпочел бы продолжить загрузку моего слоя geoJSON из внешнего источника, но мне трудно понять, как работать с моей вышеупомянутой целью. (Кажется, в моей текущей настройке моя переменная для файла geoJSON не является глобальной, и я не очень хорошо соединяю точки, чтобы обойти это.)

Вопрос 1: Как связать имена мест с их местоположением на карте?

Вопрос 2: Как я могу показать карте, чтобы повторно сосредоточиться на определенной длине/длине, когда на нее нажимается имя во вложенном всплывающем окне?

Ниже мой код. Его также можно получить на github. Ниже приведен код test.html, а файл geoJSON - dope-places.gejson. Спасибо за любые рекомендации. Я новичок в кодировании, но хочу узнать больше.

    <!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 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 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 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 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>

maptastik 18 фев. 2014, в 05:23

Источник

0

Что вы пробовали до сих пор? Где твоя проблема?
Yoann 18 фев. 2014, в 11:00
0

Спасибо за ваш ответ. Кажется, что "где" для моей проблемы в связи между вложенным всплывающим окном и картой. Как сделать так, чтобы взаимодействие во вложенном всплывающем окне изменило свойство карты? В этом случае у меня возникают проблемы при разработке модели, в которой щелчок по элементам списка во вложенном всплывающем окне можно использовать для управления расположением карты по центру, особенно при использовании geoJSON, загруженного из внешнего источника. Что касается «того, что я пробовал», я пытался использовать jQuery .click, но, боюсь, я не понимаю, как интегрировать Leaflet с функциями jQuery.
maptastik 18 фев. 2014, в 13:19

Теги:

jquery

html

leaflet

mapbox

geojson

1 ответ

Ещё вопросы

Что вы пробовали до сих пор? Где твоя проблема?
Спасибо за ваш ответ. Кажется, что "где" для моей проблемы в связи между вложенным всплывающим окном и картой. Как сделать так, чтобы взаимодействие во вложенном всплывающем окне изменило свойство карты? В этом случае у меня возникают проблемы при разработке модели, в которой щелчок по элементам списка во вложенном всплывающем окне можно использовать для управления расположением карты по центру, особенно при использовании geoJSON, загруженного из внешнего источника. Что касается «того, что я пробовал», я пытался использовать jQuery .click, но, боюсь, я не понимаю, как интегрировать Leaflet с функциями jQuery.

matg · Answer 1 · 2014-04-03T12-40-00.000Z

Вы можете добавить свое событие JQuery click в "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: [...]

мг