Skip to content

Commit 22e232e

Browse files
prushforthprushforth
authored
Merge branch 'master' into submenu-char-hidden
2 parents be6c632 + 5bc36bf commit 22e232e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+291
-72
lines changed

‎debug/cbmt-test.mapml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<mapml>
1+
<mapml xmlns="https://www.w3.org/1999/xhtml/">
22
<head>
33
<title>Canada Base Map - Transportation (CBMT)</title>
44
<meta http-equiv="Content-Type" content="text/mapml;projection=CBMTILE" />

‎debug/clientTile.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Client Tiles</title>
6+
<meta charset="UTF-8">
7+
<script type="module" src="../dist/mapml-viewer.js"></script>
8+
<style>
9+
html {
10+
height: 100%
11+
}
12+
13+
body,
14+
map {
15+
height: inherit
16+
}
17+
18+
* {
19+
margin: 0;
20+
padding: 0;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
<mapml-viewer style="width: 500px;height: 500px;" projection="WGS84" zoom="1" lat="59.87304909" lon="-53.22587225"
27+
width="900" height="400" controls>
28+
29+
<layer- label="Inline Templated Tile" checked>
30+
<meta name="zoom" content="min=0,max=5" />
31+
<extent units="WGS84">
32+
<input name="zoomLevel" type="zoom" min="1" max="1" value="0" />
33+
34+
<input name="row" type="location" axis="row" units="tilematrix" min="0" max="1" />
35+
<input name="col" type="location" axis="column" units="tilematrix" min="0" max="1" />
36+
37+
<link rel='tile' type='text/mapml' title='Tiles for ne_10m_admin_0_countries (as MapML)' />
38+
39+
</extent>
40+
</layer->
41+
</mapml-viewer>
42+
<script>
43+
let layer = document.querySelector("body > mapml-viewer > layer- > extent > link");
44+
layer.addEventListener("tileloadstart", (e) => {
45+
//let cust = document.createElement("IMG")
46+
//cust.src = "https://1000logos.net/wp-content/uploads/2018/11/GitHub-logo-500x452.png";
47+
//cust.width = 50;
48+
//cust.height = 50;
49+
let cust = document.createElement("IFRAME");
50+
cust.src = "https://www.youtube.com/embed/yI2oS2hoL0k?autoplay=1&mute=1";
51+
cust.width = 256;
52+
cust.height = 256;
53+
e.detail.appendTile(cust);
54+
});
55+
</script>
56+
</body>
57+
58+
</html>

‎src/mapml/layers/MapLayer.js

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FALLBACK_PROJECTION } from '../utils/Constants';
1+
import { FALLBACK_PROJECTION, BLANK_TT_TREF } from '../utils/Constants';
22

33
export var MapMLLayer = L.Layer.extend({
44
// zIndex has to be set, for the case where the layer is added to the
@@ -648,8 +648,16 @@ export var MapMLLayer = L.Layer.extend({
648648
zoomInput = serverExtent.querySelector('input[type="zoom" i]'),
649649
includesZoom = false;
650650
for (var i=0;i< tlist.length;i++) {
651-
var t = tlist[i],
652-
template = t.getAttribute('tref'), v,
651+
var t = tlist[i], template = t.getAttribute('tref');
652+
if(!template){
653+
template = BLANK_TT_TREF;
654+
let blankInputs = mapml.querySelectorAll('input');
655+
for (let i of blankInputs){
656+
template += `{${i.getAttribute("name")}}`;
657+
}
658+
}
659+
660+
var v,
653661
title = t.hasAttribute('title') ? t.getAttribute('title') : 'Query this layer',
654662
vcount=template.match(varNamesRe),
655663
trel = (!t.hasAttribute('rel') || t.getAttribute('rel').toLowerCase() === 'tile') ? 'tile' : t.getAttribute('rel').toLowerCase(),
@@ -704,7 +712,7 @@ export var MapMLLayer = L.Layer.extend({
704712
break;
705713
}
706714
}
707-
if (template && vcount.length === inputs.length) {
715+
if (template && vcount.length === inputs.length || template === BLANK_TT_TREF) {
708716
if (trel === 'query') {
709717
layer.queryable = true;
710718
}
@@ -714,6 +722,7 @@ export var MapMLLayer = L.Layer.extend({
714722
// template has a matching input for every variable reference {varref}
715723
layer._templateVars.push({
716724
template:decodeURI(new URL(template, base)),
725+
linkEl: t,
717726
title:title,
718727
rel: trel,
719728
type: ttype,

‎src/mapml/layers/TemplatedTileLayer.js

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { BLANK_TT_TREF } from '../utils/Constants';
2+
13
export var TemplatedTileLayer = L.TileLayer.extend({
24
// a TemplateTileLayer is similar to a L.TileLayer except its templates are
35
// defined by the <extent><template/></extent>
@@ -59,22 +61,38 @@ export var TemplatedTileLayer = L.TileLayer.extend({
5961
this._parentOnMoveEnd();
6062
},
6163
createTile: function (coords) {
62-
let tileSize = this._map.options.crs.options.crs.tile.bounds.max.x;
64+
let tileGroup = document.createElement("DIV"),
65+
tileSize = this._map.options.crs.options.crs.tile.bounds.max.x;
66+
L.DomUtil.addClass(tileGroup, "mapml-tile-group");
67+
L.DomUtil.addClass(tileGroup, "leaflet-tile");
68+
69+
tileGroup.setAttribute("width", `${tileSize}`);
70+
tileGroup.setAttribute("height", `${tileSize}`);
71+
72+
this._template.linkEl.dispatchEvent(new CustomEvent('tileloadstart', {
73+
detail:{
74+
x:coords.x,
75+
y:coords.y,
76+
zoom:coords.z,
77+
appendTile: (elem)=>{tileGroup.appendChild(elem);},
78+
},
79+
}));
80+
6381
if (this._template.type.startsWith('image/')) {
64-
return L.TileLayer.prototype.createTile.call(this, coords, function(){});
65-
} else {
82+
tileGroup.appendChild(L.TileLayer.prototype.createTile.call(this, coords, function(){}));
83+
} else if(!this._url.includes(BLANK_TT_TREF)) {
6684
// tiles of type="text/mapml" will have to fetch content while creating
6785
// the tile here, unless there can be a callback associated to the element
6886
// that will render the content in the alread-placed tile
6987
// var tile = L.DomUtil.create('canvas', 'leaflet-tile');
7088
var tile = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
89+
this._fetchTile(coords, tile);
7190
tile.setAttribute("width", `${tileSize}`);
7291
tile.setAttribute("height", `${tileSize}`);
73-
// tile.style.outline="1px solid red";
7492
L.DomUtil.addClass(tile, "leaflet-tile");
75-
this._fetchTile(coords, tile);
76-
return tile;
93+
tileGroup.appendChild(tile);
7794
}
95+
return tileGroup;
7896
},
7997
_mapmlTileReady: function(tile) {
8098
L.DomUtil.addClass(tile,'leaflet-tile-loaded');

‎src/mapml/utils/Constants.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export const TILE_SIZE = 256;
22
export const FALLBACK_PROJECTION = "OSMTILE";
3-
export const FALLBACK_CS = "TILEMATRIX";
3+
export const FALLBACK_CS = "TILEMATRIX";
4+
export const BLANK_TT_TREF = "mapmltemplatedtileplaceholder";

‎test/e2e/core/styleParsing.test.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,15 +75,15 @@ jest.setTimeout(50000);
7575
//testing done on 2nd map in the page
7676
test("[" + browserType + "]" + " CSS from a retrieved MapML file added inorder inside svg within templated-tile-container", async () => {
7777
const firstStyle = await page.$eval(
78-
"xpath=//html/body/map[2]/div >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div > div.leaflet-layer.mapml-templatedlayer-container > div > div > svg:nth-child(1) > style:nth-child(1)",
78+
"xpath=//html/body/map[2]/div >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div > div.leaflet-layer.mapml-templatedlayer-container > div > div > div > svg:nth-child(1) > style:nth-child(1)",
7979
(styleE) => styleE.innerHTML
8080
);
8181
const secondStyle = await page.$eval(
82-
"xpath=//html/body/map[2]/div >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div > div.leaflet-layer.mapml-templatedlayer-container > div > div > svg:nth-child(1) > style:nth-child(2)",
82+
"xpath=//html/body/map[2]/div >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div > div.leaflet-layer.mapml-templatedlayer-container > div > div > div > svg:nth-child(1) > style:nth-child(2)",
8383
(styleE) => styleE.innerHTML
8484
);
8585
const foundStyleLink = await page.$(
86-
"xpath=//html/body/map[2]/div >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div > div.leaflet-layer.mapml-templatedlayer-container > div > div > svg:nth-child(1) > link"
86+
"xpath=//html/body/map[2]/div >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div > div.leaflet-layer.mapml-templatedlayer-container > div > div > div > svg:nth-child(1) > link"
8787
);
8888
expect(firstStyle).toMatch("refStyleOne");
8989
expect(secondStyle).toMatch("refStyleTwo");

‎test/e2e/core/tms.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ jest.setTimeout(50000);
2626
let tileOrder = ["1/0/1", "1/0/0", "1/1/1", "1/1/0"]
2727
for (let i = 0; i < 4; i++) {
2828
const feature = await page.$eval(
29-
`xpath=//html/body/mapml-viewer >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div > div.leaflet-layer.mapml-templatedlayer-container > div > div > img:nth-child(${i + 1})`,
29+
`xpath=//html/body/mapml-viewer >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div > div.leaflet-layer.mapml-templatedlayer-container > div > div > div:nth-child(${i + 1}) > img`,
3030
(tile) => tile.getAttribute("src")
3131
);
3232
expect(feature).toEqual(`https://maps4html.org/TiledArt-Rousseau/TheBanksOfTheBièvreNearBicêtre/${tileOrder[i]}.png`);

‎test/e2e/data/tiles/cbmt/alabama_feature.mapml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<mapml>
1+
<mapml xmlns="https://www.w3.org/1999/xhtml/">
22
<head>
33
<title>Natural Resources Canada's CanVec+ 031G - Map Markup Language</title>
44
<meta http-equiv="Content-Type" content="text/mapml;projection=WGS84;zoom=2"/>

‎test/e2e/data/tiles/cbmt/cbmt.mapml

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
1-
<mapml>
1+
<mapml xmlns="https://www.w3.org/1999/xhtml/">
2+
23
<head>
34
<title>Canada Base Map - Transportation (CBMT)</title>
4-
<meta http-equiv="Content-Type" content="text/mapml;projection=CBMTILE"/>
5-
<meta charset="utf-8"/>
6-
<base href=""/>
7-
<link rel="license" href="https://www.nrcan.gc.ca/earth-sciences/geography/topographic-information/free-data-geogratis/licence/17285" title="Canada Base Map © Natural Resources Canada"/>
8-
<link rel="zoomin" href="/mapml/en/cbmtile/cbmt/?z=18" type="text/mapml"/>
5+
<meta http-equiv="Content-Type" content="text/mapml;projection=CBMTILE" />
6+
<meta charset="utf-8" />
7+
<base href="" />
8+
<link rel="license"
9+
href="https://www.nrcan.gc.ca/earth-sciences/geography/topographic-information/free-data-geogratis/licence/17285"
10+
title="Canada Base Map © Natural Resources Canada" />
11+
<link rel="zoomin" href="/mapml/en/cbmtile/cbmt/?z=18" type="text/mapml" />
912
</head>
13+
1014
<body>
1115
<extent units="CBMTILE">
12-
<input name="z" type="zoom" value="17" min="0" max="17"/>
13-
<input name="y" type="location" units="tilematrix" axis="row" min="29750" max="34475" />
14-
<input name="x" type="location" units="tilematrix" axis="column" min="26484" max="32463" />
15-
<link rel="tile" tref="cbmt/{z}/c{x}_r{y}.png" />
16+
<input name="z" type="zoom" value="17" min="0" max="17" />
17+
<input name="y" type="location" units="tilematrix" axis="row" min="29750" max="34475" />
18+
<input name="x" type="location" units="tilematrix" axis="column" min="26484" max="32463" />
19+
<link rel="tile" tref="cbmt/{z}/c{x}_r{y}.png" />
1620
</extent>
1721
</body>
1822
</mapml>

‎test/e2e/data/tiles/cbmt/templatedImage.mapml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<mapml>
1+
<mapml xmlns="https://www.w3.org/1999/xhtml/">
22
<head>
33
<title>Toporama</title>
44
<meta charset="utf-8"/>

0 commit comments

Comments
 (0)