ericire

[resolved] openlayers map in a webviewer

Discussion created by ericire on Aug 15, 2017
Latest reply on Aug 16, 2017 by ericire

Hello
In FM16 advanced, I try to put an openlayers map in a webvieser But I can't move the map with the mouse as it is possible with the same code in Internet explorer, chrome or firefox.

The mouse events do not seem to be adequately taken into account.

examples are here http://openlayers.org/en/latest/examples/index.html
See why?

<!DOCTYPE html>

<html>

  <head>

    <title>Image Vector Layer</title>

    <link rel="stylesheet" href="https://openlayers.org/en/v4.3.1/css/ol.css" type="text/css">

    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->

    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

    <script src="https://openlayers.org/en/v4.3.1/build/ol.js"></script>

  </head>

  <body>

    <div id="map" class="map"></div>

    <div id="info"> </div>

    <script>

      var map = new ol.Map({

        layers: [

          new ol.layer.Tile({

            source: new ol.source.OSM()

          }),

          new ol.layer.Image({

            source: new ol.source.ImageVector({

              source: new ol.source.Vector({

                url: 'https://openlayers.org/en/v4.3.1/examples/data/geojson/countries.geojson',

                format: new ol.format.GeoJSON()

              }),

              style: new ol.style.Style({

                fill: new ol.style.Fill({

                  color: 'rgba(255, 255, 255, 0.6)'

                }),

                stroke: new ol.style.Stroke({

                  color: '#319FD3',

                  width: 1

                })

              })

            })

          })

        ],

        target: 'map',

        view: new ol.View({

          center: [0, 0],

          zoom: 1

        })

      });

 

      var featureOverlay = new ol.layer.Vector({

        source: new ol.source.Vector(),

        map: map,

        style: new ol.style.Style({

          stroke: new ol.style.Stroke({

            color: '#f00',

            width: 1

          }),

          fill: new ol.style.Fill({

            color: 'rgba(255,0,0,0.1)'

          })

        })

      });

 

      var highlight;

      var displayFeatureInfo = function(pixel) {

 

        var feature = map.forEachFeatureAtPixel(pixel, function(feature) {

          return feature;

        });

 

        var info = document.getElementById('info');

        if (feature) {

          info.innerHTML = feature.getId() + ': ' + feature.get('name');

        } else {

          info.innerHTML = ' ';

        }

 

        if (feature !== highlight) {

          if (highlight) {

            featureOverlay.getSource().removeFeature(highlight);

          }

          if (feature) {

            featureOverlay.getSource().addFeature(feature);

          }

          highlight = feature;

        }

 

      };

 

      map.on('pointermove', function(evt) {

        if (evt.dragging) {

          return;

        }

        var pixel = map.getEventPixel(evt.originalEvent);

        displayFeatureInfo(pixel);

      });

 

      map.on('click', function(evt) {

        displayFeatureInfo(evt.pixel);

      });

    </script>

  </body>

</html>

Outcomes