0

Based upon sample https://openlayers.org/en/latest/examples/popup.html I want to add another layer to show more information. The 1st layer appears fine but the 2nd doesn't come up

I tried adjusting the code to add that layer

  var attribution = new ol.control.Attribution({
  collapsible: false
  });

 var map = new ol.Map({
 controls: ol.control.defaults({attribution: false}).extend([attribution]),
 layers: [
     new ol.layer.Tile({
         source: new ol.source.OSM({
             url: 'https://tile.openstreetmap.be/osmbe/{z}/{x}/{y}.png',
             maxZoom: 18
         })
     })
 ],
 target: 'map',
 view: new ol.View({
     center: ol.proj.fromLonLat([4.35247, 50.84673]),
     maxZoom: 18,
     zoom: 12
    })
    });

    /* Adding 1st overlay */

    var layer = new ol.layer.Vector({
    source: new ol.source.Vector({
    features: [
    new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 50.84673]))
    })
    ]
    })
    });
    map.addLayer(layer);

    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');

     var overlay = new ol.Overlay({
         element: container,
         autoPan: true,
         autoPanAnimation: {
             duration: 250
         }
     });
     map.addOverlay(overlay);

    content.innerHTML = '<b>Hello world!</b><br />I am 1st popup.';
    overlay.setPosition(ol.proj.fromLonLat([4.35247, 50.84673]));

    /* Adding 2nd overlay */
    var layer1 = new ol.layer.Vector({
    source: new ol.source.Vector({
    features: [
    new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 50.81673]))
    })
    ]
    })
    });
    map.addLayer(layer1);


    var container1 = document.getElementById('popup1');
    var content1 = document.getElementById('popup-content1');

     var overlay1 = new ol.Overlay({
         element: container1,
         autoPan: true,
         autoPanAnimation: {
             duration: 250
         }
     });
     map.addOverlay(overlay1);

    content1.innerHTML = '<b>Hello world 2!</b><br />I am 2nd popup.';
    overlay1.setPosition(ol.proj.fromLonLat([4.35247, 50.81673]));

I am expecting 2 popup. The running code can be seen here: https://www.corobori.com/sos/testmap.html

JGH
  • 15,928
  • 4
  • 31
  • 48
Corobori
  • 303
  • 3
  • 13
  • 2
    An error is occurring in your code which can be seen on the console. It seems to be an OpenLayers bug caused by using the autopan option immediately after opening the map. Setting `autopan: false` or wrapping the add overlays section of the code in a short timeout fixes it. – Mike May 17 '19 at 20:42
  • I saw the error and as the popup was coming I didn't think it was causing the issue. Also the original sample had the issue. Anyweay using the autopan option as you specified worked fine. – Corobori May 17 '19 at 20:52

0 Answers0