mprins /
dokuwiki-plugin-openlayersmap
| 1 | /* |
||
| 73 | // const mapOpts = olMapData[0].mapOpts; |
||
| 74 | // const poi = olMapData[0].poi; |
||
| 75 | |||
| 76 | if (!olEnable) { |
||
|
Best Practice
introduced
by
|
|||
| 77 | return; |
||
| 78 | } |
||
| 79 | if (!olTestCSSsupport()) { |
||
| 80 | olEnable = false; |
||
| 81 | return; |
||
| 82 | } |
||
| 83 | |||
| 91 | cleartag.parentNode.insertBefore(fragment, cleartag); |
||
| 92 | |||
| 93 | /** dynamic map extent. */ |
||
| 94 | let extent = ol.extent.createEmpty(); |
||
| 95 | overlayGroup = new ol.layer.Group({title: 'Overlays', fold: 'open', layers: []}); |
||
| 96 | const baseLyrGroup = new ol.layer.Group({'title': 'Base maps', layers: []}); |
||
| 97 | |||
| 98 | const map = new ol.Map({ |
||
| 106 | controls: [new ol.control.Zoom()] |
||
| 107 | }); |
||
| 108 | |||
| 109 | if (osmEnable) { |
||
| 110 | baseLyrGroup.getLayers().push( |
||
| 111 | new ol.layer.Tile({ |
||
| 112 | visible: true, |
||
| 121 | title: 'cycle map', |
||
| 122 | type: 'base', |
||
| 123 | source: new ol.source.OSM({ |
||
| 124 | url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=' + tfApiKey, |
||
| 125 | attributions: 'Data ©ODbL <a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>, ' |
||
| 126 | + 'Tiles ©<a href="https://www.thunderforest.com/" target="_blank">Thunderforest</a>' |
||
| 127 | + '<img src="https://www.thunderforest.com/favicon.ico" alt="Thunderforest logo"/>' |
||
| 168 | })); |
||
| 169 | } |
||
| 170 | |||
| 171 | if (bEnable && bApiKey !== '') { |
||
| 172 | baseLyrGroup.getLayers().push( |
||
| 173 | new ol.layer.Tile({ |
||
| 174 | visible: mapOpts.baselyr === "bing road", |
||
| 203 | })); |
||
| 204 | } |
||
| 205 | |||
| 206 | if (stamenEnable) { |
||
| 207 | baseLyrGroup.getLayers().push( |
||
| 208 | new ol.layer.Tile({ |
||
| 209 | visible: false, |
||
| 227 | const iconScale = 1.0; |
||
| 228 | const vectorSource = new ol.source.Vector(); |
||
| 229 | poi.forEach((p) => { |
||
| 230 | const f = new ol.Feature({ |
||
| 231 | geometry: new ol.geom.Point(ol.proj.fromLonLat([p.lon, p.lat])), |
||
| 232 | description: p.txt, |
||
| 233 | img: p.img, |
||
| 298 | |||
| 299 | if (mapOpts.autozoom) { |
||
| 300 | kmlSource.once('change', function () { |
||
| 301 | extent = ol.extent.extend(extent, kmlSource.getExtent()); |
||
| 302 | map.getView().fit(extent); |
||
| 303 | }); |
||
| 304 | } |
||
| 328 | |||
| 329 | if (mapOpts.autozoom) { |
||
| 330 | geoJsonSource.once('change', function () { |
||
| 331 | extent = ol.extent.extend(extent, geoJsonSource.getExtent()); |
||
| 332 | map.getView().fit(extent); |
||
| 333 | }); |
||
| 334 | } |
||
| 358 | |||
| 359 | if (mapOpts.autozoom) { |
||
| 360 | gpxSource.once('change', function () { |
||
| 361 | extent = ol.extent.extend(extent, gpxSource.getExtent()); |
||
| 362 | map.getView().fit(extent); |
||
| 363 | }); |
||
| 364 | } |
||
| 422 | } |
||
| 423 | if (selFeature.get('img') !== undefined) { |
||
| 424 | pContent += '<div class="coord" title="lat;lon">' + |
||
| 425 | '<img alt="" src="' + DOKU_BASE + 'lib/plugins/openlayersmap/icons/' + selFeature.get('img') + |
||
| 426 | '" width="16" height="16" ' + 'style="transform:rotate(' + selFeature.get('angle') + 'deg)" /> ' + |
||
| 427 | '<a href="geo:' + selFeature.get('lat') + ',' + selFeature.get('lon') + '?q=' + selFeature.get('lat') + |
||
| 428 | ',' + selFeature.get('lon') + '(' + selFeature.get('alt') + ')" title="Open in navigation app">' + |
||
| 429 | ol.coordinate.format([selFeature.get('lon'), selFeature.get('lat')], '{x}º; {y}º', 4) + '</a></div>'; |
||
| 430 | } |
||
| 431 | content.innerHTML = pContent; |
||
| 432 | } else { |
||
| 433 | // do nothing... |
||
| 434 | } |
||
| 435 | }); |
||
| 448 | * add layers to the map based on the olMapOverlays object. |
||
| 449 | */ |
||
| 450 | function olovAddToMap() { |
||
| 451 | for (const key in olMapOverlays) { |
||
| 452 | const overlay = olMapOverlays[key]; |
||
| 453 | const m = olMaps[overlay.id]; |
||
| 454 | |||
| 455 | switch (overlay.type) { |
||
| 456 | case 'osm': |
||
| 457 | m.addLayer(new ol.layer.Tile({ |
||
| 458 | title: overlay.name, |
||
| 459 | visible: (overlay.visible).toLowerCase() === 'true', |
||
| 460 | opacity: parseFloat(overlay.opacity), |
||
| 593 | |||
| 594 | /** init. */ |
||
| 595 | function olInit() { |
||
| 596 | if (olEnable) { |
||
| 597 | // add info window to DOM |
||
| 598 | const frag = document.createDocumentFragment(), |
||
| 599 | temp = document.createElement('div'); |
||
| 605 | |||
| 606 | let _i = 0; |
||
| 607 | // create the maps in the page |
||
| 608 | for (_i = 0; _i < olMapData.length; _i++) { |
||
| 609 | var _id = olMapData[_i].mapOpts.id; |
||
| 610 | olMaps[_id] = createMap(olMapData[_i].mapOpts, olMapData[_i].poi); |
||
| 611 | |||
| 612 | // set max-width on help pop-over |
||
| 613 | jQuery('#' + _id).parent().parent().find('.olMapHelp').css('max-width', olMapData[_i].mapOpts.width); |
||
| 629 | jQuery(window).on('resize', function (e) { |
||
| 630 | clearTimeout(resizeTimer); |
||
| 631 | resizeTimer = setTimeout(function () { |
||
| 632 | for (_i = 0; _i < olMapData.length; _i++) { |
||
| 633 | var _id = olMapData[_i].mapOpts.id; |
||
| 634 | var _w = jQuery('#' + _id + '-olContainer').parent().innerWidth(); |
||
| 635 | if (parseInt(olMapData[_i].mapOpts.width) > _w) { |
||
| 636 | jQuery('#' + _id).width(_w); |
||
| 637 | jQuery('#' + _id + '-olStatusBar').width(_w); |
||
| 638 | jQuery('#' + _id).parent().parent().find('.olMapHelp').width(_w); |
||
| 639 | olMaps[_id].updateSize(); |
||
| 640 | } |
||
| 641 | } |
||
| 642 | }, 250); |
||
| 664 | * |
||
| 665 | * @type {Boolean} |
||
| 666 | */ |
||
| 667 | let olCSSEnable = true; |
||
| 668 | |||
| 669 | /* register olInit to run with onload event. */ |
||
| 670 | jQuery(olInit); |
||
| 671 |
Loading history...