0

Using Putting content of popup into modal using OpenLayers? I am now able to put the content of a popup into a modal of Bootstrap 4.

<div id="map" class="map"></div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
...
</div>

var overlay = new ol.Overlay({
  element:  document.getElementById('myModal'),
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
});

var map = new ol.Map({
  controls: ol.control.defaults().extend([
    new ol.control.ScaleLine({className: 'ol-scale-line', target: document.getElementById('scale-line')}),
  ]),
  layers: [
    OpenStreetMap,
    istat,
  ],
  overlays: [overlay],
  target: 'map',
    render: 'canvas',
  view: new ol.View({
    extent: boundary,
    center: center,
    zoom: 2,
        maxZoom: 20,
        minZoom: 14
  })
});

map.on('singleclick', function(evt) {
  clickFeature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
    return feature;
  });
  if (clickFeature) {
    var element = overlay.getElement();
    overlay.setPosition(evt.coordinate);
    $(element).modal('show');
  }
});

@TomazicM provided part of this code

The problem now is the animation of the map that is activated after the click on the geometry. If I click on a geometry the modal opens and the map moving down. In other words happens a thing similar of the use the pan function for navigate the map.

enter image description here

How I can remove this?

  • 1
    Add pertinent code to your question, otherwise answering is just quessing. – TomazicM Jul 24 at 12:14
  • Is the same code of the linked post. I anyway must add it? – Massimiliano Moraca Jul 24 at 12:22
  • 1
    Yes, otherwise context of the qustion is not clear and it could also go to infinity: linked page could have link to another page and so on ... – TomazicM Jul 24 at 12:27
  • Ok, I do this in a few minutes – Massimiliano Moraca Jul 24 at 12:45
0

Map shouldn't move if you place your modal div definition outside map div:

<body>
  <div id="map" class="map"></div>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
    ...
  </div>
  <script>
    ...
  </script>
</body>

  • I've added an image for give a better comprehension of my problem. The div already exist before the modal – Massimiliano Moraca Jul 24 at 15:06
  • Since it works OK for me, it's hard to say what's wrong in your case without seeing your complete code. – TomazicM Jul 24 at 15:14
0

I've found the solution!

I've changed this:

var overlay = new ol.Overlay({
  element:  document.getElementById('myModal'),
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
});

with this:

var overlay = new ol.Overlay({
  element:  document.getElementById('myModal'),
  autoPan: false,
}); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.