0

I try to set different custom for my bootstraps popovers : "popup" and "popup_ancien".

I can change CSS of my popovers together, by .popover-content or .popover-title, but how can I have two distinct custom?

My code:

<!doctype html>
<html lang="fr">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/css">
    <style>
      .mapy{
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/build/ol.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
  <div id=coord>
      <input type="text" id="long" name="longitude">
      <input type="text" id="lati" name="latitude">
  </div>
    <div id="maps" class="maps"></div>
    <div id="popup_ancien"></div>
    <div style="display: none;">
      <!-- Popup -->
       <div id="popup" class="truc"></div>
    </div>
    <script type="text/javascript">

        var mapy = new ol.Map({
          target: 'maps',
          layers: [
            new ol.layer.Tile(
            {
                source: new ol.source.OSM({})
            })
          ],
          view: new ol.View({
            center: ol.proj.fromLonLat([9.13, 42.11]),
            zoom: 10
          })
        });

        var pos = ol.proj.fromLonLat([9.13, 42.11]);

        var popup_ancien = new ol.Overlay({
            element: document.getElementById('popup_ancien')
        });

        mapy.once('postrender', function(event) {
          popup_ancien.setPosition(pos);
          var element_ancien = popup_ancien.getElement();
          $(element_ancien).popover({
               placement: 'top',
               animation: false,
               html: true,
               content: '<p>Ancien emplacement</p>'
             });
          mapy.addOverlay(popup_ancien);
          $(element_ancien).popover('show');
        });

        var popup = new ol.Overlay({
            element: document.getElementById('popup'),

        });
        mapy.addOverlay(popup);

        document.getElementById("maps").style.cursor = "crosshair"; 

        mapy.on('click', event => {
          const coordWGS84 = ol.proj.transform([event.coordinate[0], event.coordinate[1]], 'EPSG:3857', 'EPSG:4326');
          document.getElementById("lati").value = coordWGS84[0];
          document.getElementById("long").value = coordWGS84[1];
          var element = popup.getElement();
          var coordinate = event.coordinate;
          $(element).popover('destroy');
          popup.setPosition(coordinate);
          console.log(element);
          $(element).popover({
            placement: 'top',
            animation: false,
            html: true,
            content: '<p>Votre nouvel emplacement</p>'
          });
          $(element).popover('show');
        });

    </script>
  </body>
  <style type="text/css">
        #marker {
        width: 20px;
        height: 20px;
        border: 1px solid #088;
        border-radius: 10px;
        background-color: #0FF;
        opacity: 0.5;
      }
      #vienna {
        text-decoration: none;
        color: white;
        font-size: 11pt;
        font-weight: bold;
        text-shadow: black 0.1em 0.1em 0.2em;
      }
      #popup_ancien .popover-content {
        min-width: 200px;
        background: red;
      }
      .toto .popover-content {
        min-width: 200px;
        background: green;
      }
  </style>
</html>

EDIT :

One picture for explain what I'd like :

explanation

  • Can you explain a bit more what actually you want to display? Maybe some screenshots or concept images. It's not clear at the moment. – dmh126 Feb 26 at 9:31
0

This is actually pure HTML, CSS & JS question, but sometimes one can forget about site rules if problem is interesting.

When Boostrap method .popover creates popover HTML element, id gives it unique id, but it does not expose it anywhere so it could be used to set CSS style class. Workaround is to give id to popover HTML content. Then we can get parent of parent of this element which we are after. This looks something like this:

$(element_ancien).popover({
   placement: 'top',
   animation: false,
   html: true,
   content: '<p id="myPopup1">Ancien emplacement</p>'
});
$(element_ancien).popover('show');
var myPopover = $('#myPopup1').parent().parent();

Custom CSS style class can then be added to this element:

myPopover[0].classList.add('myClass1');

For CSS to be applied to the popup, it has to be declared the following way:

.myClass1 {
  background-color: lightgreen !important;
}
.myClass1 .arrow:after {
  border-top-color: lightgreen !important;
} 

So to put it together:

<style>
...
  .myClass1 {
    background-color: lightgreen !important;
  }
  .myClass1 .arrow:after {
    border-top-color: lightgreen !important;
  }
...
</style>

<script>
...
  mapy.once('postrender', function(event) {
    popup_ancien.setPosition(pos);
    var element_ancien = popup_ancien.getElement();
    $(element_ancien).popover({
         placement: 'top',
         animation: false,
         html: true,
         content: '<p id="myPopup1">Ancien emplacement</p>'
       });
    mapy.addOverlay(popup_ancien);
    $(element_ancien).popover('show');
    var myPopover = $('#myPopup1').parent().parent();
    myPopover[0].classList.add('myClass1');
  });
...
</script>

| improve this answer | |
  • It works perfectly ! Thank's ! I hesitated to publish it on stackoverflow, but because it's on mapping app I choose gis stackexchange. – Zacharie Moulin Feb 26 at 15:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.