Javascript Error "Uncaught TypeError: element.popover is not a function" in Ruby on Rails 5

Question

I tried to use the geoJSON Layer for the geo.map.admin.ch API. (See Example here: http://codepen.io/anon/pen/qrGNvy?editors=0010)

That works fine. I have also test it in localhost.

But when I transfere this into the Ruby on Rails Framework, the error "Uncaught TypeError: element.popover is not a function" appears.

I might have to do in which order the js Files are loaded. But evenn when put all stuff in the index.html.erb File the error occures.

<div style="display: block;">
  <div id="popup" title="TubeCam Standort"></div>
</div>

<script src="http://api3.geo.admin.ch/loader.js?lang=en" type="text/javascript"></script>

<script type="text/javascript">

  var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
  var map = new ga.Map({
    target: 'map',
    layers: [layer],
    view: new ol.View({
      resolution: 50,
      center: [692266, 254661]
    })
  });

...

// Popup showing the position the user clicked
  var popup = new ol.Overlay({
    element: document.getElementById('popup')
  });
  map.addOverlay(popup);

  map.on('singleclick', function(evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel, function(feat, layer) {
      return feat;
    });
    var element = $(popup.getElement());
    element.popover('destroy');
    if (feature) {
      popup.setPosition(evt.coordinate);
      element.popover({
        'placement': 'top',
        'animation': false,
        'html': true,
        'content': feature.get('description')
      }).popover('show');
    }
  });

</script>

Any suggestions what's the problem? Thanks for helping out. Greets

Answer 1

You need to load jquery and bootstrap:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

Have a look in the pen settings.