Widget:JSONmap

 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js"></script>
     <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.css">
 <style type="text/css">

1. popup {

   padding-bottom: 15px;

}

 </style>
   <script type="text/javascript">

   //<![CDATA[
       $(window).load(function(){
         var vectorLayer1 = new ol.layer.Vector({
 source: new ol.source.Vector({
   url: 'https://www.transit.wiki/Special:Ask/-5B-5B-2DPlace::SamTrans_ECR-5D-5D/-3FLatlong%3D/format%3Dkml/offset%3D0',
   format: new ol.format.KML({
     extractStyles: true,
     extractAttributes: true
   })
 }),

});

var vectorLayer2 = new ol.layer.Vector({ source: new ol.source.Vector({

       format: new ol.format.GeoJSON(),
      url: 'https://transit.land/api/v1/routes.geojson?onestop_id=r-9q9j-ecr'
   }),
   style: new ol.style.Style({
       stroke: new ol.style.Stroke( /** @type {olx.style.IconOptions} */ ({
           color: 'green',
           width: 5
       }))
   }),

});

var vectorLayer3 = new ol.layer.Vector({ source: new ol.source.Vector({

       format: new ol.format.GeoJSON(),
      url: 'https://transit.land/api/v1/stops.geojson?served_by=r-9q9j-ecr&per_page=false'
   }),
   style: new ol.style.Style({
                   image: new ol.style.Circle({
                       radius: 5,
                       fill: new ol.style.Fill({
                           color: 'blue'
                       })
                   })
               })

});

var rasterLayer = new ol.layer.Tile({

       source: new ol.source.OSM({
         url: 'http://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
       })
     });

var map = new ol.Map({

   layers: [rasterLayer, vectorLayer1, vectorLayer2, vectorLayer3],
   target: document.getElementById('map'),
   view: new ol.View({
       center: [0, 0],
       zoom: 3
   })

});

var element = document.getElementById('popup');

var popup = new ol.Overlay({

   element: element,
   positioning: 'bottom-center',
   stopEvent: false

}); map.addOverlay(popup);

// display popup on click map.on('click', function (evt) {

   var feature = map.forEachFeatureAtPixel(evt.pixel,

   function (feature, layer) {
       return feature;
   });
   if (feature) {
       var geometry = feature.getGeometry();
       var coord = geometry.getCoordinates();
       popup.setPosition(coord);
       $(element).popover({
           'placement': 'top',
               'html': true,
               'content': feature.get('name')
       });
       $(element).popover('show');
   } else {
       $(element).popover('destroy');
   }

});

// change mouse cursor when over marker map.on('pointermove', function (e) {

   if (e.dragging) {
       $(element).popover('destroy');
       return;
   }
   var pixel = map.getEventPixel(e.originalEvent);
   var hit = map.hasFeatureAtPixel(pixel);
   map.getTarget().style.cursor = hit ? 'pointer' : ;

});

       });
   //]]>

</script>