mprins /
dokuwiki-plugin-openlayersmap
| @@ 377-420 (lines=44) @@ | ||
| 374 | }; |
|
| 375 | ||
| 376 | // display popup on click |
|
| 377 | map.on('singleclick', function (evt) { |
|
| 378 | const selFeature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { |
|
| 379 | return feature; |
|
| 380 | }); |
|
| 381 | if (selFeature) { |
|
| 382 | overlay.setPosition(evt.coordinate); |
|
| 383 | ||
| 384 | let pContent = '<div class="spacer"> </div>'; |
|
| 385 | let locDesc = ''; |
|
| 386 | ||
| 387 | if (selFeature.get('rowId') !== undefined) { |
|
| 388 | pContent += '<span class="rowId">' + selFeature.get('rowId') + ': </span>'; |
|
| 389 | } |
|
| 390 | if (selFeature.get('name') !== undefined) { |
|
| 391 | pContent += '<span class="txt">' + selFeature.get('name') + '</span>'; |
|
| 392 | locDesc = selFeature.get('name'); |
|
| 393 | // TODO strip <p> tag from locDesc |
|
| 394 | // locDesc = selFeature.get('name').split(/\s+/).slice(0,2).join('+'); |
|
| 395 | } |
|
| 396 | if (selFeature.get('ele') !== undefined) { |
|
| 397 | pContent += '<div class="ele">elevation: ' + selFeature.get('ele') + '</div>'; |
|
| 398 | } |
|
| 399 | if (selFeature.get('type') !== undefined) { |
|
| 400 | pContent += '<div>' + selFeature.get('type') + '</div>'; |
|
| 401 | } |
|
| 402 | if (selFeature.get('time') !== undefined) { |
|
| 403 | pContent += '<div class="time">time: ' + selFeature.get('time') + '</div>'; |
|
| 404 | } |
|
| 405 | if (selFeature.get('description') !== undefined) { |
|
| 406 | pContent += '<div class="desc">' + selFeature.get('description') + '</div>'; |
|
| 407 | } |
|
| 408 | if (selFeature.get('img') !== undefined) { |
|
| 409 | pContent += '<div class="coord" title="lat;lon">' + |
|
| 410 | '<img src="' + DOKU_BASE + 'lib/plugins/openlayersmap/icons/' + selFeature.get('img') + |
|
| 411 | '" width="16" height="16" ' + 'style="transform:rotate(' + selFeature.get('angle') + 'deg)" /> ' + |
|
| 412 | '<a href="geo:' + selFeature.get('lat') + ',' + selFeature.get('lon') + '?q=' + selFeature.get('lat') + |
|
| 413 | ',' + selFeature.get('lon') + '(' + selFeature.get('alt') + ')" title="Open in navigation app">' + |
|
| 414 | ol.coordinate.format([selFeature.get('lon'), selFeature.get('lat')], '{x}º; {y}º', 4) + '</a></div>'; |
|
| 415 | } |
|
| 416 | content.innerHTML = pContent; |
|
| 417 | } else { |
|
| 418 | // do nothing... |
|
| 419 | } |
|
| 420 | }); |
|
| 421 | ||
| 422 | // change mouse cursor when over marker |
|
| 423 | map.on('pointermove', function (e) { |
|
| @@ 368-406 (lines=39) @@ | ||
| 365 | }; |
|
| 366 | ||
| 367 | // display popup on click |
|
| 368 | map.on('singleclick', function (evt) { |
|
| 369 | const selFeature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { |
|
| 370 | return feature; |
|
| 371 | }); |
|
| 372 | if (selFeature) { |
|
| 373 | overlay.setPosition(evt.coordinate); |
|
| 374 | ||
| 375 | let pContent = '<div class="spacer"> </div>'; |
|
| 376 | let locDesc = ''; |
|
| 377 | ||
| 378 | if (selFeature.get('rowId') !== undefined) { |
|
| 379 | pContent += '<span class="rowId">' + selFeature.get('rowId') + ': </span>'; |
|
| 380 | } |
|
| 381 | if (selFeature.get('name') !== undefined) { |
|
| 382 | pContent += '<span class="txt">' + selFeature.get('name') + '</span>'; |
|
| 383 | locDesc = selFeature.get('name'); |
|
| 384 | // TODO strip <p> tag from locDesc |
|
| 385 | // locDesc = selFeature.get('name').split(/\s+/).slice(0,2).join('+'); |
|
| 386 | } |
|
| 387 | if (selFeature.get('ele') !== undefined) { |
|
| 388 | pContent += '<div class="ele">elevation: ' + selFeature.get('ele') + '</div>'; |
|
| 389 | } |
|
| 390 | if (selFeature.get('type') !== undefined) { |
|
| 391 | pContent += '<div>' + selFeature.get('type') + '</div>'; |
|
| 392 | } |
|
| 393 | if (selFeature.get('time') !== undefined) { |
|
| 394 | pContent += '<div class="time">time: ' + selFeature.get('time') + '</div>'; |
|
| 395 | } |
|
| 396 | if (selFeature.get('description') !== undefined) { |
|
| 397 | pContent += '<div class="desc">' + selFeature.get('description') + '</div>'; |
|
| 398 | } |
|
| 399 | if (selFeature.get('img') !== undefined) { |
|
| 400 | pContent += '<div class="coord" title="lat;lon">' + '<img src="' + selFeature.get('img') + '" width="16" height="16" ' + 'style="transform:rotate(' + selFeature.get('angle') + 'deg)" /> ' + '<a href="geo:' + selFeature.get('lat') + ',' + selFeature.get('lon') + '?q=' + selFeature.get('lat') + ',' + selFeature.get('lon') + '(' + selFeature.get('alt') + ')" title="Open in navigation app">' + ol.coordinate.format([selFeature.get('lon'), selFeature.get('lat')], '{x}º; {y}º', 4) + '</a></div>'; |
|
| 401 | } |
|
| 402 | content.innerHTML = pContent; |
|
| 403 | } else { |
|
| 404 | // do nothing?... |
|
| 405 | } |
|
| 406 | }); |
|
| 407 | ||
| 408 | // change mouse cursor when over marker |
|
| 409 | map.on('pointermove', function (e) { |
|
