environment/org.argeo.geo.ui/src/org/argeo/support/openlayers/map-osm.html

   1 <html lang="en">
   2 <head>
   3 <link rel="stylesheet"
   4         href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css"
   5         type="text/css">
   6 <style>
   7 </style>
   8 <script
   9         src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
  10 </head>
  11 <body>
  12         <div id="map" class="map"></div>
  13         <script type="text/javascript">
  14         // default OSM
  15         var source_OSM = new ol.source.OSM();
  16
  17         var map = new ol.Map({
  18                         target : 'map',
  19                         layers : [ new ol.layer.Tile({
  20                                 source : source_OSM
  21                         }) ],
  22                         view : new ol.View({
  23                                 center : ol.proj.fromLonLat([ 34, 34 ]),
  24                                 zoom : 4
  25                         })
  26                 });
  27                 map.on('rendercomplete', e => {
  28                         console.log('Render completed.');
  29                         renderCompleted();
  30                 });
  31                 var select = new ol.interaction.Select();
  32                 map.addInteraction(select);
  33             select.on('select',function (e) {
  34                 if(e.selected.length>0){
  35                                 console.log('Feature selected: '+e.selected[0].get('path'));
  36                         onFeatureSelect(e.selected[0].get('path'));
  37                 }
  38             });
  39         </script>
  40 </body>
  41 </html>