Skip to content

Commit 99963c5

Browse files
prushforprushfor
prushfor
authored and
prushfor
committed
Change context menu to copy location as a map-feature.
Change Util._pasteLayer to sniff for <map-feature, paste as a visible layer.
1 parent d580797 commit 99963c5

File tree

4 files changed

+183
-17
lines changed

4 files changed

+183
-17
lines changed

‎src/mapml/handlers/ContextMenu.js‎

Lines changed: 90 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -300,50 +300,127 @@ export var ContextMenu = L.Handler.extend({
300300

301301
_copyGCRS: function(e){
302302
let mapEl = this.options.mapEl,
303-
click = this.contextMenu._clickEvent;
304-
this.contextMenu._copyData(`lon :${click.latlng.lng.toFixed(6)}, lat:${click.latlng.lat.toFixed(6)}`);
303+
click = this.contextMenu._clickEvent,
304+
projection = mapEl.projection;
305+
let data = `<map-feature zoom="${mapEl.zoom}">
306+
<map-featurecaption>Copied ${projection} gcrs location</map-featurecaption>
307+
<map-properties>
308+
<h2>Copied ${projection} gcrs location</h2>
309+
<div style="text-align:center">${click.latlng.lng.toFixed(6)} ${click.latlng.lat.toFixed(6)}</div>
310+
</map-properties>
311+
<map-geometry cs="gcrs">
312+
<map-point>
313+
<map-coordinates>${click.latlng.lng.toFixed(6)} ${click.latlng.lat.toFixed(6)}</map-coordinates>
314+
</map-point>
315+
</map-geometry>
316+
</map-feature>`;
317+
this.contextMenu._copyData(data);
305318
},
306319

307320
_copyTCRS: function(e){
308321
let mapEl = this.options.mapEl,
309322
click = this.contextMenu._clickEvent,
310-
point = mapEl._map.project(click.latlng);
311-
this.contextMenu._copyData(`z:${mapEl.zoom}, x:${point.x}, y:${point.y}`);
323+
point = mapEl._map.project(click.latlng),
324+
projection = mapEl.projection;
325+
let data = `<map-feature zoom="${mapEl.zoom}">
326+
<map-featurecaption>Copied ${projection} tcrs location</map-featurecaption>
327+
<map-properties>
328+
<h2>Copied ${projection} tcrs location</h2>
329+
<div style="text-align:center">${point.x} ${point.y}</div>
330+
</map-properties>
331+
<map-geometry cs="tcrs">
332+
<map-point>
333+
<map-coordinates>${point.x} ${point.y}</map-coordinates>
334+
</map-point>
335+
</map-geometry>
336+
</map-feature>`;
337+
this.contextMenu._copyData(data);
312338
},
313339

314340
_copyTileMatrix: function(e){
315341
let mapEl = this.options.mapEl,
316342
click = this.contextMenu._clickEvent,
317343
point = mapEl._map.project(click.latlng),
318-
tileSize = mapEl._map.options.crs.options.crs.tile.bounds.max.x;
319-
this.contextMenu._copyData(`z:${mapEl.zoom}, column:${Math.trunc(point.x/tileSize)}, row:${Math.trunc(point.y/tileSize)}`);
344+
tileSize = mapEl._map.options.crs.options.crs.tile.bounds.max.x,
345+
projection = mapEl.projection;
346+
let data = `<map-feature zoom="${mapEl.zoom}">
347+
<map-featurecaption>Copied ${projection} tilematrix location</map-featurecaption>
348+
<map-properties>
349+
<h2>Copied ${projection} tilematrix location</h2>
350+
<div style="text-align:center">${Math.trunc(point.x/tileSize)} ${Math.trunc(point.y/tileSize)}</div>
351+
</map-properties>
352+
<map-geometry cs="tilematrix">
353+
<map-point>
354+
<map-coordinates>${Math.trunc(point.x/tileSize)} ${Math.trunc(point.y/tileSize)}</map-coordinates>
355+
</map-point>
356+
</map-geometry>
357+
</map-feature>`;
358+
this.contextMenu._copyData(data);
320359
},
321360

322361
_copyPCRS: function(e){
323362
let mapEl = this.options.mapEl,
324363
click = this.contextMenu._clickEvent,
325364
point = mapEl._map.project(click.latlng),
326365
scale = mapEl._map.options.crs.scale(+mapEl.zoom),
327-
pcrs = mapEl._map.options.crs.transformation.untransform(point,scale);
328-
this.contextMenu._copyData(`easting:${Math.round(pcrs.x)}, northing:${Math.round(pcrs.y)}`);
366+
pcrs = mapEl._map.options.crs.transformation.untransform(point,scale),
367+
projection = mapEl.projection;
368+
let data = `<map-feature zoom="${mapEl.zoom}">
369+
<map-featurecaption>Copied ${projection} pcrs location</map-featurecaption>
370+
<map-properties>
371+
<h2>Copied ${projection} pcrs location</h2>
372+
<div style="text-align:center">${Math.round(pcrs.x)} ${Math.round(pcrs.y)}</div>
373+
</map-properties>
374+
<map-geometry cs="pcrs">
375+
<map-point>
376+
<map-coordinates>${Math.round(pcrs.x)} ${Math.round(pcrs.y)}</map-coordinates>
377+
</map-point>
378+
</map-geometry>
379+
</map-feature>`;
380+
this.contextMenu._copyData(data);
329381
},
330382

331383
_copyTile: function(e){
332384
let mapEl = this.options.mapEl,
333385
click = this.contextMenu._clickEvent,
334386
point = mapEl._map.options.crs.project(click.latlng),
335387
tileSize = mapEl._map.options.crs.options.crs.tile.bounds.max.x,
336-
pointX = point.x % tileSize, pointY = point.y % tileSize;
388+
pointX = point.x % tileSize, pointY = point.y % tileSize,
389+
projection = mapEl.projection;
337390
if(pointX < 0) pointX+= tileSize;
338391
if(pointY < 0) pointY+= tileSize;
339-
340-
this.contextMenu._copyData(`z:${mapEl.zoom}, i:${Math.trunc(pointX)}, j:${Math.trunc(pointY)}`);
392+
let data = `<map-feature zoom="${mapEl.zoom}">
393+
<map-featurecaption>Copied ${projection} tile location</map-featurecaption>
394+
<map-properties>
395+
<h2>Copied ${projection} tile location</h2>
396+
<div style="text-align:center">${Math.trunc(pointX)} ${Math.trunc(pointY)}</div>
397+
</map-properties>
398+
<map-geometry cs="tile">
399+
<map-point>
400+
<map-coordinates>${Math.trunc(pointX)} ${Math.trunc(pointY)}</map-coordinates>
401+
</map-point>
402+
</map-geometry>
403+
</map-feature>`;
404+
this.contextMenu._copyData(data);
341405
},
342406

343407
_copyMap: function(e){
344408
let mapEl = this.options.mapEl,
345-
click = this.contextMenu._clickEvent;
346-
this.contextMenu._copyData(`z:${mapEl.zoom}, i:${Math.trunc(click.containerPoint.x)}, j:${Math.trunc(click.containerPoint.y)}`);
409+
click = this.contextMenu._clickEvent,
410+
projection = mapEl.projection;
411+
let data = `<map-feature zoom="${mapEl.zoom}">
412+
<map-featurecaption>Copied ${projection} map location</map-featurecaption>
413+
<map-properties>
414+
<h2>Copied ${projection} map location</h2>
415+
<div style="text-align:center">${Math.trunc(click.containerPoint.x)} ${Math.trunc(click.containerPoint.y)}</div>
416+
</map-properties>
417+
<map-geometry cs="map">
418+
<map-point>
419+
<map-coordinates>${Math.trunc(click.containerPoint.x)} ${Math.trunc(click.containerPoint.y)}</map-coordinates>
420+
</map-point>
421+
</map-geometry>
422+
</map-feature>`;
423+
this.contextMenu._copyData(data);
347424
},
348425

349426
_copyAllCoords: function(e){

‎src/mapml/utils/Util.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -458,6 +458,11 @@ export var Util = {
458458
text = text.replace(/(<!--.*?-->)|(<!--[\S\s]+?-->)|(<!--[\S\s]*?$)/g, '').trim();
459459
if ((text.slice(0,7) === "<layer-") && (text.slice(-9) === "</layer->")) {
460460
mapEl.insertAdjacentHTML("beforeend", text);
461+
} else if (text.slice(0,12) === "<map-feature" && text.slice(-14) === "</map-feature>") {
462+
let layer = `<layer- label="Pasted features" checked>
463+
<map-meta name='projection' content='${mapEl.projection}'></map-meta>`+text+
464+
"</layer->";
465+
mapEl.insertAdjacentHTML("beforeend", layer);
461466
} else {
462467
try {
463468
mapEl.geojson2mapml(JSON.parse(text));

‎test/e2e/core/mapContextMenu.test.js‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -336,7 +336,7 @@ test.describe("Playwright Map Context Menu Tests", () => {
336336
currLocCS = await page.$eval(
337337
"body > map",
338338
(map) => (map._map.contextMenu.defLocCS)
339-
)
339+
);
340340
// set cs to pcrs for copying location test
341341
await page.$eval(
342342
"body > map",
@@ -357,7 +357,18 @@ test.describe("Playwright Map Context Menu Tests", () => {
357357
"body > textarea#coord",
358358
(text) => text.value
359359
);
360-
const expected = "lon :-92.062002, lat:46.922393";
360+
const expected = `<map-feature zoom="1">
361+
<map-featurecaption>Copied CBMTILE gcrs location</map-featurecaption>
362+
<map-properties>
363+
<h2>Copied CBMTILE gcrs location</h2>
364+
<div style="text-align:center">-92.062002 46.922393</div>
365+
</map-properties>
366+
<map-geometry cs="gcrs">
367+
<map-point>
368+
<map-coordinates>-92.062002 46.922393</map-coordinates>
369+
</map-point>
370+
</map-geometry>
371+
</map-feature>`;
361372
expect(copyValue).toEqual(expected);
362373
await page.locator("body > textarea#coord").fill('');
363374
await page.$eval(
@@ -368,7 +379,38 @@ test.describe("Playwright Map Context Menu Tests", () => {
368379
currLocCS
369380
);
370381
});
382+
test("Paste map-feature to map", async () => {
383+
currLocCS = await page.$eval(
384+
"body > map",
385+
(map) => (map._map.contextMenu.defLocCS)
386+
);
387+
// set cs to pcrs for copying location test
388+
await page.$eval(
389+
"body > map",
390+
(map) => {map._map.contextMenu.defLocCS = 'gcrs';}
391+
);
392+
await page.click("body > map");
393+
await page.keyboard.press("Shift+F10");
394+
await page.keyboard.press("Tab");
395+
await page.keyboard.press("Tab");
396+
await page.keyboard.press("Tab");
397+
await page.keyboard.press("Enter");
398+
await page.keyboard.press("Tab");
399+
await page.keyboard.press("Tab");
400+
await page.keyboard.press("Enter");
401+
await page.click("body > map");
402+
await page.keyboard.press("Shift+F10");
403+
await page.keyboard.press("p");
371404

405+
const layerLabel = await page.$eval(
406+
"body > map",
407+
(map) => map.layers[1].label
408+
);
409+
expect(layerLabel).toEqual("Pasted features");
410+
// clean up
411+
await page.$eval("body > map",
412+
(map) => map.removeChild(map.querySelector('[label="Pasted features"]')));
413+
});
372414
test("Paste valid Layer to map", async () => {
373415
await page.click("body > textarea#layer");
374416
await page.keyboard.press("Control+a");

‎test/e2e/mapml-viewer/viewerContextMenu.test.js‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -342,7 +342,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => {
342342
currLocCS = await page.$eval(
343343
"body > mapml-viewer",
344344
(map) => (map._map.contextMenu.defLocCS)
345-
)
345+
);
346346
// set cs to pcrs for copying location test
347347
await page.$eval(
348348
"body > mapml-viewer",
@@ -363,7 +363,18 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => {
363363
"body > textarea#coord",
364364
(text) => text.value
365365
);
366-
const expected = "lon :-92.062002, lat:46.922393";
366+
const expected = `<map-feature zoom="1">
367+
<map-featurecaption>Copied CBMTILE gcrs location</map-featurecaption>
368+
<map-properties>
369+
<h2>Copied CBMTILE gcrs location</h2>
370+
<div style="text-align:center">-92.062002 46.922393</div>
371+
</map-properties>
372+
<map-geometry cs="gcrs">
373+
<map-point>
374+
<map-coordinates>-92.062002 46.922393</map-coordinates>
375+
</map-point>
376+
</map-geometry>
377+
</map-feature>`;
367378
expect(copyValue).toEqual(expected);
368379
await page.locator("body > textarea#coord").fill('');
369380
await page.$eval(
@@ -374,7 +385,38 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => {
374385
currLocCS
375386
);
376387
});
388+
test("Paste map-feature to mapml-viewer", async () => {
389+
currLocCS = await page.$eval(
390+
"body > mapml-viewer",
391+
(map) => (map._map.contextMenu.defLocCS)
392+
);
393+
// set cs to pcrs for copying location test
394+
await page.$eval(
395+
"body > mapml-viewer",
396+
(map) => {map._map.contextMenu.defLocCS = 'gcrs';}
397+
);
398+
await page.click("body > mapml-viewer");
399+
await page.keyboard.press("Shift+F10");
400+
await page.keyboard.press("Tab");
401+
await page.keyboard.press("Tab");
402+
await page.keyboard.press("Tab");
403+
await page.keyboard.press("Enter");
404+
await page.keyboard.press("Tab");
405+
await page.keyboard.press("Tab");
406+
await page.keyboard.press("Enter");
407+
await page.click("body > mapml-viewer");
408+
await page.keyboard.press("Shift+F10");
409+
await page.keyboard.press("p");
377410

411+
const layerLabel = await page.$eval(
412+
"body > mapml-viewer",
413+
(map) => map.layers[1].label
414+
);
415+
expect(layerLabel).toEqual("Pasted features");
416+
// clean up
417+
await page.$eval("body > mapml-viewer",
418+
(map) => map.removeChild(map.querySelector('[label="Pasted features"]')));
419+
});
378420
test("Context menu, All buttons enabled when fwd and back history present", async () => {
379421
await page.click("body > mapml-viewer");
380422
await page.$eval(

0 commit comments

Comments
 (0)