Widget:OP

<!DOCTYPE html> <html>

 <head>
   <title>KML</title>
   <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
   <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

 </head>
 <body>

   <script>
     import Map from 'ol/Map.js';
     import View from 'ol/View.js';
     import KML from 'ol/format/KML.js';
     import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
     import BingMaps from 'ol/source/BingMaps.js';
     import VectorSource from 'ol/source/Vector.js';

     var raster = new TileLayer({
       source: new BingMaps({
         imagerySet: 'Aerial',
         key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here'
       })
     });

     var vector = new VectorLayer({
       source: new VectorSource({
         url: 'http://www.wikiexplora.com/images/2/23/Monolito.kmz',
         format: new KMZ()
       })
     });

     var map = new Map({
       layers: [raster, vector],
       target: document.getElementById('map'),
       view: new View({
         center: [876970.8463461736, 5859807.853963373],
         projection: 'EPSG:3857',
         zoom: 10
       })
     });

     var displayFeatureInfo = function(pixel) {
       var features = [];
       map.forEachFeatureAtPixel(pixel, function(feature) {
         features.push(feature);
       });
       if (features.length > 0) {
         var info = [];
         var i, ii;
         for (i = 0, ii = features.length; i < ii; ++i) {
           info.push(features[i].get('name'));
         }
         document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
         map.getTarget().style.cursor = 'pointer';
       } else {
         document.getElementById('info').innerHTML = ' ';
         map.getTarget().style.cursor = ;
       }
     };

     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>

Widget:OP

Wikiexplora