Открытие bootstrap modal с leafletsjs

Question

Я использую карту и leafletjs, на карте у меня есть несколько маркеров, когда пользователь нажимает маркер, мода загрузочного мода должна отображаться с диаграммой высоких диаграмм. примерно так: http://leafletjs.com/examples/custom-icons-example.html но с модальным. Как я могу это достичь?

Было бы лучше, если использовать угловые.

я сделал быструю скрипку http://jsfiddle.net/kLLcetev/

Это код, где предполагается открыть модальный:

function markerFunction(){ 
     for (var i in markers){ 
      var markerID = markers[i].options.title; 

       markers[i].openPopup(); 

     $("#Modal").modal("show"); 
     $("#Modal").modal("open"); 
     $("#Modal").modal(); 
     } 
    } 

Answer 1

Если вы хотите сделать это с Угловое, UI-Bootstrap очень хороший вариант:

компоненты Bootstrap написаны в чисто AngularJS по AngularUI Team

https://angular-ui.github.io/bootstrap/

Инжектируйте ui-bootstrap модуль в ваше приложение и $uibModal обслуживания в контроллер:

angular.module('app', [ 
    'ui.bootstrap' 
]) 

angular.module('app').controller('leaflet', [ 
      '$uibModal', 
    function ($uibModal) { 

    } 
]) 

Открытие модальность в случае листовка клик:

new L.Marker([n, n]).on('click', function() { 
    $uibModal.open({ 
     template: '<div highchart></div>', 
    }) 
}) 

Простая Highcharts директива:

angular.module('app').directive('highchart', [ 
    function() { 
     return { 
      link: function (scope, element, attributes) { 
       $(element[0]).highcharts(...) 
      } 
     } 
    } 
]) 

Демо-версия на Plunker: http://embed.plnkr.co/ZiHMFC/preview

Answer 2

Я думаю, что наблюдая за событие щелчка, а затем создать модальное HTML по требованию будет работайте, как показано ниже.

var markerGroup = L.featureGroup; 
markerGroup.addTo(map) 
//For each marker, .addTo(markerGroup) 
markerGroup.on('click', function (event) { 
    var modalDiv = "<div class='modal fade'.... [(docs)][1] 
    $(modalDiv).modal({}) 
}) 

Answer 3

Вы можете настроить модальность в начале и не показать его с помощью

$("#Modal").modal({show:false});

Затем привязать к событию щелчка каждых маркеров и показать модальный в вызываемой функции.

for (var i in markers){ 
    var markerID = markers[i].options.title; 
    markers[i].openPopup(); 
    markers[i].on('click', function() { 
     $("#Modal").modal("show"); 
    }); 
} 

Живой пример здесь: http://jsfiddle.net/0x7v8gkd/