Home » Jquery » javascript – How to insert a map into a popover – bootstrap

javascript – How to insert a map into a popover – bootstrap

Posted by: admin February 22, 2020 Leave a comment

Questions:

I need to have a popover which can present a map inside its body. I did this basic example:

    <!DOCTYPE html>
<html>

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

  <link rel="stylesheet" href="css/style.css">
  <script src="script/script.js"></script>
</head>

<body>
  <div class="container">
    <h3>Popover Example</h3>
    <a href="#" data-toggle="popover">Toggle popover</a>
  </div>

  <script>
    let script = `
    <script>
    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

    L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();
    <\/script>`;

    console.log(script);
    $(document).ready(function() {
      $('[data-toggle="popover"]').popover({
        title: 'A nice map inside a popover!',
        content: "<div id='map' style='background: gray;'></div>" + script,
        html: true
      });

    });
  </script>
</body>

</html>

It sends html content which contains a div and script for the leaflet map. It doesn’t work.
I am not sure this approach would work out and maybe you know a better way to have a map once a table cell or any other element is clicked.

How to&Answer:

You cannot append script tags directly on the content prop of the popover method. To make this, you will need listen to some event triggered after the popover is rendered, like shown.bs.popover:

$('[data-toggle="popover"]').on('shown.bs.popover', () => {});

Inside, you’ll be able to call Leaflet and create the map instance. I attach a CodePen with the concept (I applied some CSS to make adjustments on the popover layout to show the map correctly) https://codepen.io/geekzolanos-dev/pen/gOpwRrR

Answer:

Please check following code snippet:

      $(document).ready(function() {
           $('[data-toggle="popover"]').popover({
             title: 'A nice map inside a popover!',
             content: "<div id='map' style='background: gray;'></div>",
             html: true
           });
           
           $("[data-toggle=popover]").on('shown.bs.popover', function () {
         
         var map = L.map('map').setView([51.505, -0.09], 13);
         
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
         
         L.marker([51.5, -0.09]).addTo(map)
         .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
         .openPopup();
         });
         
         });
 #map{
         height:300px;
         width:300px;
         }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
      <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
  
      <div class="container">
         <h3>Popover Example</h3>
         <a href="#" data-toggle="popover">Toggle popover</a>
      </div>

Hope this will helps you.