CODEWITHSUNDEEP
javascriptopenlayers-3
Adam Baranyai
Adam Baranyai

Reputation: 3867

Openlayers 3 - popup - strange error

I am trying to put a simple popup on an OpenLayers 3 map, and I am running into a very strange error. As a tutorial, I was using http://openlayers.org/en/latest/examples/popup.html?q=popup , and I tried to implement almost the same solution to my own map. The map initializes correctly, but the popup isn't moved, and I get a strange AssertionError: Assertion failed: element should be defined javascript error, when I click on my map.

Here's the code I use:

function Map(map) {
  var zoom=map.data('zoom'), center = map.data('center'), locations = map.data('locations'), nodes = map.data('nodes'), curMap = this;

  this.mapContainer=map;
  this.vectorSource = new ol.source.Vector({});
  this.map = null;
  this.polygons = {};
  this.locations = {};
  this.overlayPopup = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
    element: curMap.mapContainer.parent().find('popup').get(0),
    autoPan: true,
    autoPanAnimation: {
        duration: 250
    }
  }));

  if (center == '') center=[0,0];
  if (zoom == '') zoom=12;
  center=ol.proj.transform(center, 'EPSG:4326', 'EPSG:3857');

  this.mapContainer.addClass('map-inited');
  this.map =  new ol.Map({
    layers: [
      new ol.layer.Tile({
          source: new ol.source.OSM()
      }),
      new ol.layer.Vector({
          source: this.vectorSource
      })
    ],
    overlays: [this.overlayPopup],
    target: this.mapContainer.attr('id'),
    view: new ol.View({
      center: center,
      zoom: zoom
    })
  });

  this.map.on("singleclick", function(evt) {
    var coordinate = evt.coordinate;

    var features=[];
    curMap.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
        features.push(feature);
    });
    console.log(features);

    curMap.overlayPopup.setPosition(coordinate);
});

}

The HTML for the map looks like this before the initialization:

<div class="venture-map" style="" id="div-BCD82D60-27AE-CCBB-DF40-2AFFB1D4A5F9">
  <div class="map" style="" id="div-39529A9B-6C0C-2F36-5691-9F1A7BFA7878" data-locations="...." data-nodes="..." data-center="..." data-zoom="12"></div>
  <div class="popup" style="" id="div-3716827E-9A13-0912-EF0E-66B0E6E72145">
    <div id="popup-content"></div>
  </div>
</div>

The console says that the error comes from <unknown> location, but I am sure that the curMap.overlayPopup.setPosition(coordinate); is the line that fires this error, as if I comment it out, no error is fired.

The strange thing is, that if I copy EXACTLY the same code that is found on the link, and run it on my own server, the code runs correctly, without no errors. What could be the problem? What am I doing wrong?

Thanks!

Upvotes: 1

Views: 908

Answers (1)

Adam Baranyai
Adam Baranyai

Reputation: 3867

There was a typo in my code. I was intending to select the DOM element with class popup in this line: curMap.mapContainer.parent().find('popup').get(0‌​), but I forgot the . before the popup keyword, so I was selecting a DOM element with the type of popup (from which there was none of course).

Thanks for Jonatas Walker for the help:)

Upvotes: 1

Related Questions