OpenLayers ol.Control.SelectFeature undefined

Question

У меня эта карта работает нормально на живом сайте, но я только что попытался добавить несколько всплывающих окон, как показано здесь: https://harrywood.co.uk/maps/examples/openlayers/marker-popups.view.html

Однако я получаю

Uncaught TypeError: Cannot read property 'При попытке создать элемент управления для каждой из функций выберите значение «Не определено»

.

    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script><link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">

<script >

    var houses=[

           [ '51.3899',  '-2.36414', '<div class="map-popup"><p>Spencers Belle Vue, BATH, Somerset, BA1 5ER</p></div>'] ,


           [ '51.3854',  '-2.36025', '<div class="map-popup"><p>Bladud Buildings, BATH, Somerset, BA1 5LS</p></div>'] ,            

           [ '51.3971',  '-2.34538', '<div class="map-popup"><p>Lambridge Buildings, BATH, Somerset, BA1 6RS</p></div>'] ,
                                ]
    var center = ol.proj.fromLonLat([-2.36, 51.391]);

    var view = new ol.View({
      center: center,
      zoom: 10 // 5
    });
    var features = [];
    for (var i = 0; i < houses.length; i++) {
        var item = houses[i]; 
        var iconFeature = new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.transform([parseFloat(item[1]), parseFloat(item[0])], 'EPSG:4326', 'EPSG:3857')),
          description : item[2]
        });      
        features.push(iconFeature);
    }

    var iconStyle = new ol.style.Style({
      image: new ol.style.Icon( ({
        anchor: [0.45, 1],
        anchorXUnits: 'fraction',
        anchorYUnits: 'fraction',
        opacity: 0.75,
        src: 'https://example.com/themes/pheads/resources/img/icons/pointer_original.svg',
        color: '#8959A8',
          crossOrigin: 'anonymous',
          imgSize:[120,120],
          scale:0.25
      }))
    }); 

    var vectorSource = new ol.source.Vector({
        features: features
    });


    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      style: iconStyle,
    });

    var map = new ol.Map({
      target: 'map',
      view: view,
      layers: [
        new ol.layer.Tile({
            preload: 3,
          source: new ol.source.OSM()
        })

      ],

       loadTilesWhileAnimating: true,
    });

    map.addLayer(vectorLayer);

    var controls = {
        selector: new ol.Control.SelectFeature(vectorLayer, { onSelect: createPopup, onUnselect: destroyPopup })
    };
    map.addControl(controls['selector']);
    controls['selector'].activate();

    function createPopup(feature) {
        feature.popup = new ol.Popup.FramedCloud("pop",
            feature.geometry.getBounds().getCenterLonLat(),
            null,
            '<div class="markerContent">'+feature.attributes.description+'</div>',
            null,
            true,
            function() { controls['selector'].unselectAll(); }
        );
        //feature.popup.closeOnMove = true;
        map.addPopup(feature.popup);
    }

    function destroyPopup(feature) {
      feature.popup.destroy();
      feature.popup = null;
    }

</script>