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 | |||
| 84 | // find map element location |
||
| 85 | var cleartag = document.getElementById(mapOpts.id + '-clearer'); |
||
| 86 | if (cleartag === null) { |
||
| 87 | return; |
||
| 88 | } |
||
| 89 | // create map element and add to document |
||
| 90 | var fragment = olCreateMaptag(mapOpts.id, mapOpts.width, mapOpts.height); |
||
| 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({ |
||
| 111 | ] |
||
| 112 | }); |
||
| 113 | |||
| 114 | if (osmEnable) { |
||
| 115 | baseLyrGroup.getLayers().push( |
||
| 116 | new ol.layer.Tile({ |
||
| 117 | visible: true, |
||
| 126 | title: 'cycle map', |
||
| 127 | type: 'base', |
||
| 128 | source: new ol.source.OSM({ |
||
| 129 | url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=' + tfApiKey, |
||
| 130 | attributions: 'Data ©ODbL <a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>, ' |
||
| 131 | + 'Tiles ©<a href="https://www.thunderforest.com/" target="_blank">Thunderforest</a>' |
||
| 132 | + '<img src="https://www.thunderforest.com/favicon.ico" alt="Thunderforest logo"/>' |
||
| 173 | })); |
||
| 174 | } |
||
| 175 | |||
| 176 | if (bEnable && bApiKey !== '') { |
||
| 177 | baseLyrGroup.getLayers().push( |
||
| 178 | new ol.layer.Tile({ |
||
| 179 | visible: mapOpts.baselyr === "bing road", |
||
| 208 | })); |
||
| 209 | } |
||
| 210 | |||
| 211 | if (stamenEnable) { |
||
| 212 | baseLyrGroup.getLayers().push( |
||
| 213 | new ol.layer.Tile({ |
||
| 214 | visible: mapOpts.baselyr === "toner", |
||
| 233 | const iconScale = 1.0; |
||
| 234 | const vectorSource = new ol.source.Vector(); |
||
| 235 | poi.forEach((p) => { |
||
| 236 | const f = new ol.Feature({ |
||
| 237 | geometry: new ol.geom.Point(ol.proj.fromLonLat([p.lon, p.lat])), |
||
| 238 | description: p.txt, |
||
| 239 | img: p.img, |
||
| 256 | font: '12px monospace bold', |
||
| 257 | backgroundFill: new ol.style.Fill({color: 'rgba(255,255,255,.4)'}) |
||
| 258 | }), image: new ol.style.Icon({ |
||
| 259 | src: DOKU_BASE + "lib/plugins/openlayersmap/icons/" + p.img, |
||
| 260 | crossOrigin: '', |
||
| 261 | opacity: p.opacity, |
||
| 262 | scale: iconScale, |
||
| 298 | if (mapOpts.kmlfile.length > 0) { |
||
| 299 | try { |
||
| 300 | const kmlSource = new ol.source.Vector({ |
||
| 301 | url: DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.kmlfile, |
||
| 302 | format: new ol.format.KML(), |
||
| 303 | }); |
||
| 304 | overlayGroup.getLayers().push(new ol.layer.Vector({title: 'KML file', visible: true, source: kmlSource})); |
||
| 305 | |||
| 306 | if (mapOpts.autozoom) { |
||
| 307 | kmlSource.once('change', function () { |
||
| 308 | extent = ol.extent.extend(extent, kmlSource.getExtent()); |
||
| 309 | map.getView().fit(extent); |
||
| 310 | }); |
||
| 311 | } |
||
| 374 | |||
| 375 | if (mapOpts.autozoom) { |
||
| 376 | geoJsonSource.once('change', function () { |
||
| 377 | extent = ol.extent.extend(extent, geoJsonSource.getExtent()); |
||
| 378 | map.getView().fit(extent); |
||
| 379 | }); |
||
| 380 | } |
||
| 425 | |||
| 426 | if (mapOpts.autozoom) { |
||
| 427 | gpxSource.once('change', function () { |
||
| 428 | extent = ol.extent.extend(extent, gpxSource.getExtent()); |
||
| 429 | map.getView().fit(extent); |
||
| 430 | }); |
||
| 431 | } |
||
| 471 | } |
||
| 472 | if (selFeature.get('name') !== undefined) { |
||
| 473 | pContent += '<span class="txt">' + selFeature.get('name') + '</span>'; |
||
| 474 | locDesc = selFeature.get('name'); |
||
| 475 | // TODO strip <p> tag from locDesc |
||
| 476 | // locDesc = selFeature.get('name').split(/\s+/).slice(0,2).join('+'); |
||
| 477 | } |
||
| 489 | } |
||
| 490 | if (selFeature.get('img') !== undefined) { |
||
| 491 | pContent += '<div class="coord" title="lat;lon">' + |
||
| 492 | '<img alt="" src="' + DOKU_BASE + 'lib/plugins/openlayersmap/icons/' + selFeature.get('img') + |
||
| 493 | '" width="16" height="16" ' + 'style="transform:rotate(' + selFeature.get('angle') + 'deg)" /> ' + |
||
| 494 | '<a href="geo:' + selFeature.get('lat') + ',' + selFeature.get('lon') + '?q=' + selFeature.get('lat') + |
||
| 495 | ',' + selFeature.get('lon') + '(' + selFeature.get('alt') + ')" title="Open in navigation app">' + |
||
| 496 | ol.coordinate.format([selFeature.get('lon'), selFeature.get('lat')], '{x}º; {y}º', 4) + '</a></div>'; |
||
| 497 | } |
||
| 498 | content.innerHTML = pContent; |
||
| 499 | } else { |
||
| 500 | // do nothing... |
||
| 501 | } |
||
| 502 | }); |
||
| 515 | * add layers to the map based on the olMapOverlays object. |
||
| 516 | */ |
||
| 517 | function olovAddToMap() { |
||
| 518 | for (const key in olMapOverlays) { |
||
| 519 | const overlay = olMapOverlays[key]; |
||
| 520 | const m = olMaps[overlay.id]; |
||
| 521 | |||
| 522 | switch (overlay.type) { |
||
| 523 | case 'osm': |
||
| 524 | m.addLayer(new ol.layer.Tile({ |
||
| 525 | title: overlay.name, |
||
| 526 | visible: (overlay.visible).toLowerCase() === 'true', |
||
| 527 | opacity: parseFloat(overlay.opacity), |
||
| 660 | |||
| 661 | /** init. */ |
||
| 662 | function olInit() { |
||
| 663 | if (olEnable) { |
||
| 664 | // add info window to DOM |
||
| 665 | const frag = document.createDocumentFragment(), |
||
| 666 | temp = document.createElement('div'); |
||
| 672 | |||
| 673 | let _i = 0; |
||
| 674 | // create the maps in the page |
||
| 675 | for (_i = 0; _i < olMapData.length; _i++) { |
||
| 676 | var _id = olMapData[_i].mapOpts.id; |
||
| 677 | olMaps[_id] = createMap(olMapData[_i].mapOpts, olMapData[_i].poi); |
||
| 678 | |||
| 679 | // set max-width on help pop-over |
||
| 680 | jQuery('#' + _id).parent().parent().find('.olMapHelp').css('max-width', olMapData[_i].mapOpts.width); |
||
| 692 | olovAddToMap(); |
||
| 693 | |||
| 694 | let resizeTimer; |
||
| 695 | jQuery(window).on('resize', function (e) { |
||
| 696 | clearTimeout(resizeTimer); |
||
| 697 | resizeTimer = setTimeout(function () { |
||
| 698 | for (_i = 0; _i < olMapData.length; _i++) { |
||
| 699 | var _id = olMapData[_i].mapOpts.id; |
||
| 700 | var _w = jQuery('#' + _id + '-olContainer').parent().innerWidth(); |
||
| 701 | if (parseInt(olMapData[_i].mapOpts.width) > _w) { |
||
| 702 | jQuery('#' + _id).width(_w); |
||
| 703 | jQuery('#' + _id).parent().parent().find('.olMapHelp').width(_w); |
||
| 704 | olMaps[_id].updateSize(); |
||
| 705 | } |
||
| 706 | } |
||
| 707 | }, 250); |
||
| 729 | * |
||
| 730 | * @type {Boolean} |
||
| 731 | */ |
||
| 732 | let olCSSEnable = true; |
||
| 733 | |||
| 734 | /* register olInit to run with onload event. */ |
||
| 735 | jQuery(olInit); |
||
| 736 |
Loading history...