Skip to content

Commit 686599d

Browse files
AliyanHPeter Rushforth
AliyanH
and
Peter Rushforth
authored
GeoJSON API (#682)
* Add unfinished geojson2mapml code * Add geometrycollection parsing + case insensitive Geometries + few more tests * start on mapml2geojson func. * remove test * Add Table properties support + linestring for mapml2geojson * Add untested polygon + multipoint + multilinestring + multipolygon * Updates to tweak mapml2geojson * Add testing for mapml2geojson + rehome geojson.js * code changes for geojson.js + All geometries + feature collection tests for mapml2geojson and geojson2mapml * Add optional parameters (properties + geometryFunction) to geojson2mapml * Add propertyFunction parameter for mapml2geojson * Minor code + test changes + addition of transform parameter for mapml2geojson * small fix * make geojson api not a module * Add featurecaption for geojson2mapml * minor code fixes Co-authored-by: Peter Rushforth <[email protected]> * Update geojson2mapml parameters + minor code fixes Co-authored-by: Peter Rushforth <[email protected]> * Add options parameter for mapml2geojson + minor updates geojson2mapml * if caption string provided, and no property exists with that name, set caption to options.caption * option.properties' function now takes in a JSON feature instead of a JSON property * updated tests to reflect changes mapml2geojson * removed propertyFunction and transform parameters, and added them to an options Object * when no propertyFunction provided, looks for a table, and sets property by default * updated tests to reflect changes Co-authored-by: Peter Rushforth <[email protected]> * Add more features to geojson.js + add/update tests geojson2mapml: * Throw silent error when properties function returns incorrect output mapml2geojson: * default table2properties function ignores thead properties * map bbox meta element to json.bbox Tests: * reformat tests for efficiency * Add tests for mapml2geojson * update tests to reflect changes to geojson.js Co-authored-by: Peter Rushforth <[email protected]> Co-authored-by: Peter Rushforth <[email protected]>
1 parent 8ee62d0 commit 686599d

File tree

9 files changed

+2529
-0
lines changed

9 files changed

+2529
-0
lines changed

‎Gruntfile.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,14 @@ module.exports = function(grunt) {
7878
src: ['proj4leaflet.js'],
7979
dest: 'dist/'
8080
},
81+
{
82+
expand: true,
83+
cwd: 'src/geojson',
84+
flatten: true,
85+
filter: 'isFile',
86+
src: ['geojson.js'],
87+
dest: 'dist/lib/'
88+
},
8189
{
8290
expand: true,
8391
cwd: 'src',

‎src/geojson/geojson.js‎

Lines changed: 533 additions & 0 deletions
Large diffs are not rendered by default.

‎test/e2e/geojson/geojson2mapml.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>geoJSON 2 MapML</title>
6+
<meta charset="UTF-8">
7+
<script type="module" src="mapml-viewer.js"></script>
8+
<script src="lib/geojson.js"></script>
9+
<!--Stores the expected mapml outputs-->
10+
<script src="geojson2mapmlJSON.js"></script>
11+
</head>
12+
13+
<body>
14+
<div id="output">
15+
<!--geojson2mapml layer output goes here dynamically-->
16+
</div>
17+
18+
<!-- The expected results for geojson2mapml go here-->
19+
<div id="expected">
20+
<layer- label="Point Geometry" checked><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>Point Geometry</map-featurecaption><map-geometry><map-point><map-coordinates>-75.6916809 45.4186964</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Point</td></tr></tbody></table></map-properties></map-feature></layer->
21+
<layer- label="Line Geometry" checked><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>Line Geometry</map-featurecaption><map-geometry><map-linestring><map-coordinates>-75.6168365 45.471929 -75.6855011 45.458445 -75.7016373 45.4391764 -75.7030106 45.4259255 -75.7236099 45.4208652 -75.7565689 45.4117074 -75.7833481 45.384225 -75.8197403 45.3714435 -75.8516693 45.377714 </map-coordinates></map-linestring></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Line</td></tr></tbody></table></map-properties></map-feature></layer->
22+
<layer- label="Polygon Geometry" checked><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>Polygon Geometry</map-featurecaption><map-geometry><map-polygon><map-coordinates>-75.5859375 45.465669 -75.6813812 45.4533876 -75.6961441 45.4239978 -75.7249832 45.4083331 -75.7792282 45.3772317 -75.753479 45.3294614 -75.5831909 45.3815724 -75.602417 45.4273712 -75.5673981 45.4639834 -75.5859375 45.465669 </map-coordinates><map-coordinates>-75.6596588 45.4211062 -75.6338958 45.4254436 -75.6277127 45.4066458 -75.6572542 45.4097792 -75.6596588 45.4211062 </map-coordinates></map-polygon></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Polygon</td></tr></tbody></table></map-properties></map-feature></layer->
23+
<layer- label="MultiPoint Geometry" checked><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>MultiPoint Geometry</map-featurecaption><map-geometry><map-multipoint><map-coordinates>-75.7016373 45.4391764 -75.7236099 45.4208652 -75.7833481 45.384225 </map-coordinates></map-multipoint></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a multipoint</td></tr></tbody></table></map-properties></map-feature></layer->
24+
<layer- label="MultiLineString Geometry" checked><map-meta name="extent" content="top-left-longitude=-75.916809, top-left-latitude=45.886964, bottom-right-longitude=-75.516809,bottom-right-latitude=45.26964"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>MultiLineString Geometry</map-featurecaption><map-geometry><map-multilinestring><map-coordinates>-75.6168365 45.471929 -75.6855011 45.458445 -75.7016373 45.4391764 -75.7030106 45.4259255 </map-coordinates><map-coordinates>-75.7565689 45.4117074 -75.7833481 45.384225 -75.8197403 45.3714435 -75.8516693 45.377714 </map-coordinates></map-multilinestring></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a MultiLineString</td></tr></tbody></table></map-properties></map-feature></layer->
25+
<layer- label="MultiPolygon Geometry" checked><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>MultiPolygon Geometry</map-featurecaption><map-geometry><map-multipolygon><map-polygon><map-coordinates>-75.5859375 45.465669 -75.6813812 45.4533876 -75.6961441 45.4239978 -75.7249832 45.4083331 -75.7792282 45.3772317 -75.753479 45.3294614 -75.5831909 45.3815724 -75.602417 45.4273712 -75.5673981 45.4639834 -75.5859375 45.465669 </map-coordinates></map-polygon><map-polygon><map-coordinates>-75.6744295 45.472892 -75.7053451 45.4439942 -75.7063756 45.4249616 -75.7489704 45.4177324 -75.7788555 45.4003785 -75.7943133 45.4321899 -75.6744295 45.472892 </map-coordinates></map-polygon></map-multipolygon></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a MultiPolygon</td></tr></tbody></table></map-properties></map-feature></layer->
26+
<layer- label="Geometry Collection" checked><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>Geometry Collection</map-featurecaption><map-geometry><map-geometrycollection><map-polygon><map-coordinates>-75.5859375 45.465669 -75.6813812 45.4533876 -75.6961441 45.4239978 -75.7249832 45.4083331 -75.7792282 45.3772317 -75.753479 45.3294614 -75.5831909 45.3815724 -75.602417 45.4273712 -75.5673981 45.4639834 -75.5859375 45.465669 </map-coordinates></map-polygon><map-linestring><map-coordinates>-75.6168365 45.471929 -75.6855011 45.458445 -75.7016373 45.4391764 -75.7030106 45.4259255 -75.7236099 45.4208652 -75.7565689 45.4117074 -75.7833481 45.384225 -75.8197403 45.3714435 -75.8516693 45.377714 </map-coordinates></map-linestring><map-point><map-coordinates>-75.6916809 45.4186964</map-coordinates></map-point></map-geometrycollection></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Geometry Collection</td></tr></tbody></table></map-properties></map-feature></layer->
27+
<layer- label="Test MapML" checked><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-polygon><map-coordinates>-75.5859375 45.465669 -75.6813812 45.4533876 -75.6961441 45.4239978 -75.7249832 45.4083331 -75.7792282 45.3772317 -75.753479 45.3294614 -75.5831909 45.3815724 -75.602417 45.4273712 -75.5673981 45.4639834 -75.5859375 45.465669 </map-coordinates></map-polygon></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">id</th><td itemprop="id">24e21a60be4811d892e2080020a0f4c9</td></tr><tr><th scope="row">label_fr</th><td itemprop="label_fr">Québec</td></tr><tr><th scope="row">label_en</th><td itemprop="label_en">Québec</td></tr><tr><th scope="row">label_ab</th><td itemprop="label_ab">Québec</td></tr><tr><th scope="row">type_fr</th><td itemprop="type_fr">CITY-Ville</td></tr><tr><th scope="row">type_en</th><td itemprop="type_en">CITY-City</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-linestring><map-coordinates>-75.6168365 45.471929 -75.6855011 45.458445 -75.7016373 45.4391764 -75.7030106 45.4259255 -75.7236099 45.4208652 -75.7565689 45.4117074 -75.7833481 45.384225 -75.8197403 45.3714435 -75.8516693 45.377714 </map-coordinates></map-linestring></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Line</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-point><map-coordinates>-75.6916809 45.4186964</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Point</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-multipoint><map-coordinates>-75.7016373 45.4391764 -75.7236099 45.4208652 -75.7833481 45.384225 </map-coordinates></map-multipoint></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a multipoint</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-multilinestring><map-coordinates>-75.6168365 45.471929 -75.6855011 45.458445 -75.7016373 45.4391764 -75.7030106 45.4259255 </map-coordinates><map-coordinates>-75.7565689 45.4117074 -75.7833481 45.384225 -75.8197403 45.3714435 -75.8516693 45.377714 </map-coordinates></map-multilinestring></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a MultiLineString</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-multipolygon><map-polygon><map-coordinates>-75.5859375 45.465669 -75.6813812 45.4533876 -75.6961441 45.4239978 -75.7249832 45.4083331 -75.7792282 45.3772317 -75.753479 45.3294614 -75.5831909 45.3815724 -75.602417 45.4273712 -75.5673981 45.4639834 -75.5859375 45.465669 </map-coordinates></map-polygon><map-polygon><map-coordinates>-75.6744295 45.472892 -75.7053451 45.4439942 -75.7063756 45.4249616 -75.7489704 45.4177324 -75.7788555 45.4003785 -75.7943133 45.4321899 -75.6744295 45.472892 </map-coordinates><map-coordinates>-75.6744295 45.472892 -75.7053451 45.4439942 -75.7063756 45.4249616 -75.7489704 45.4177324 -75.7788555 45.4003785 -75.7943133 45.4321899 -75.6744295 45.472892 </map-coordinates></map-polygon></map-multipolygon></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a MultiPolygon</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-polygon><map-coordinates>-75.5859375 45.465669 -75.6813812 45.4533876 -75.6961441 45.4239978 -75.7249832 45.4083331 -75.7792282 45.3772317 -75.753479 45.3294614 -75.5831909 45.3815724 -75.602417 45.4273712 -75.5673981 45.4639834 -75.5859375 45.465669 </map-coordinates><map-coordinates>-75.6467062 45.4215881 -75.6889363 45.4049585 -75.6693647 45.3767494 -75.627064 45.3924229 -75.6467062 45.4215881 </map-coordinates></map-polygon></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Polygon with holes</td></tr></tbody></table></map-properties></map-feature></layer->
28+
<layer- label="Point" checked><map-meta name="extent" content="top-left-longitude=-75.916809, top-left-latitude=45.886964, bottom-right-longitude=-75.516809,bottom-right-latitude=45.26964"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>This is a Point</map-featurecaption><map-geometry><map-point><map-coordinates>-75.6916809 45.4186964</map-coordinates></map-point></map-geometry><map-properties><h1>String Properties test</h1></map-properties></map-feature></layer->
29+
<layer- label="Point 1" checked><map-meta name="extent" content="top-left-longitude=-75.916809, top-left-latitude=45.886964, bottom-right-longitude=-75.516809,bottom-right-latitude=45.26964"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>caption test</map-featurecaption><map-geometry><map-point><map-coordinates>-75.6916809 45.4186964</map-coordinates></map-point></map-geometry><map-properties><h1>This is a Point - with a featurecaption function</h1></map-properties></map-feature></layer->
30+
</div>
31+
32+
<script>
33+
// --------------------------------------------------------------------------------- //
34+
let mapml = document.getElementById('output');
35+
let layer;
36+
37+
layer = geojson2mapml(point);
38+
mapml.appendChild(layer);
39+
40+
layer = geojson2mapml(line);
41+
mapml.appendChild(layer);
42+
43+
layer = geojson2mapml(polygon);
44+
mapml.appendChild(layer);
45+
46+
layer = geojson2mapml(multipoint);
47+
mapml.appendChild(layer);
48+
49+
layer = geojson2mapml(multilinestring);
50+
mapml.appendChild(layer);
51+
52+
layer = geojson2mapml(multipolygon);
53+
mapml.appendChild(layer);
54+
55+
layer = geojson2mapml(geometrycollection);
56+
mapml.appendChild(layer);
57+
58+
layer = geojson2mapml(featurecollection);
59+
mapml.appendChild(layer)
60+
61+
layer = geojson2mapml(bbox_label_properties_and_caption_string, {label: "Point", caption: "prop0", properties: "<h1>String Properties test</h1>"})
62+
mapml.appendChild(layer)
63+
64+
let cap = function c(j) {
65+
return "caption test";
66+
}
67+
let prop = function f(p) {
68+
let parser = new DOMParser();
69+
return parser.parseFromString("<h1>" + p.properties.prop0 + " - with a featurecaption function</h1>", "text/html").body.firstChild;
70+
}
71+
layer = geojson2mapml(bbox_label_properties_and_caption_function, {label: "Point 1", caption: cap, properties: prop})
72+
mapml.appendChild(layer)
73+
74+
</script>
75+
</body>
76+
</html>

‎test/e2e/geojson/geojson2mapml.test.js‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import { test, expect, chromium } from '@playwright/test';
2+
3+
test.describe("GeoJSON API - geojson2mapml", () => {
4+
let page;
5+
let context;
6+
test.beforeAll(async function() {
7+
context = await chromium.launchPersistentContext('');
8+
page = context.pages().find((page) => page.url() === 'about:blank') || await context.newPage();
9+
await page.goto("geojson2mapml.html");
10+
//await page.waitForTimeout(10000);
11+
});
12+
13+
test.afterAll(async function () {
14+
await context.close();
15+
});
16+
17+
test("Point Geometry (string json)", async () => {
18+
const out = await page.$eval(
19+
"body > #output > layer-:nth-child(1)",
20+
(node) => node.outerHTML
21+
);
22+
const exp = await page.$eval(
23+
"body > #expected > layer-:nth-child(1)",
24+
(node) => node.outerHTML
25+
);
26+
expect(out).toEqual(exp);
27+
});
28+
29+
30+
test("Line Geometry", async () => {
31+
const out = await page.$eval(
32+
"body > #output > layer-:nth-child(2)",
33+
(node) => node.innerHTML//.replace(" ", "")
34+
);
35+
const exp = await page.$eval(
36+
"body > #expected > layer-:nth-child(2)",
37+
(node) => node.innerHTML//.replace(" ", "")
38+
);
39+
expect(out).toEqual(exp);
40+
});
41+
42+
test("Polygon Geometry", async () => {
43+
const out = await page.$eval(
44+
"body > #output > layer-:nth-child(3)",
45+
(node) => node.outerHTML
46+
);
47+
const exp = await page.$eval(
48+
"body > #expected > layer-:nth-child(3)",
49+
(node) => node.outerHTML
50+
);
51+
expect(out).toEqual(exp);
52+
});
53+
54+
test("MultiPoint Geometry", async () => {
55+
const out = await page.$eval(
56+
"body > #output > layer-:nth-child(4)",
57+
(node) => node.outerHTML
58+
);
59+
const exp = await page.$eval(
60+
"body > #expected > layer-:nth-child(4)",
61+
(node) => node.outerHTML
62+
);
63+
expect(out).toEqual(exp);
64+
});
65+
66+
test("MultiLineString Geometry", async () => {
67+
const out = await page.$eval(
68+
"body > #output > layer-:nth-child(5)",
69+
(node) => node.outerHTML
70+
);
71+
const exp = await page.$eval(
72+
"body > #expected > layer-:nth-child(5)",
73+
(node) => node.outerHTML
74+
);
75+
expect(out).toEqual(exp);
76+
});
77+
78+
test("MultiPolygon Geometry", async () => {
79+
const out = await page.$eval(
80+
"body > #output > layer-:nth-child(6)",
81+
(node) => node.outerHTML
82+
);
83+
const exp = await page.$eval(
84+
"body > #expected > layer-:nth-child(6)",
85+
(node) => node.outerHTML
86+
);
87+
expect(out).toEqual(exp);
88+
});
89+
90+
test("Geometry Collection", async () => {
91+
const out = await page.$eval(
92+
"body > #output > layer-:nth-child(7)",
93+
(node) => node.outerHTML
94+
);
95+
const exp = await page.$eval(
96+
"body > #expected > layer-:nth-child(7)",
97+
(node) => node.outerHTML
98+
);
99+
expect(out).toEqual(exp);
100+
});
101+
102+
test("Feature Collection", async () => {
103+
const out = await page.$eval(
104+
"body > #output > layer-:nth-child(8)",
105+
(node) => node.outerHTML
106+
);
107+
const exp = await page.$eval(
108+
"body > #expected > layer-:nth-child(8)",
109+
(node) => node.outerHTML
110+
);
111+
expect(out).toEqual(exp);
112+
});
113+
114+
test("BBOX, Options label, caption + properties string", async () => {
115+
const out = await page.$eval(
116+
"body > #output > layer-:nth-child(9)",
117+
(node) => node.outerHTML
118+
);
119+
const exp = await page.$eval(
120+
"body > #expected > layer-:nth-child(9)",
121+
(node) => node.outerHTML
122+
);
123+
expect(out).toEqual(exp);
124+
});
125+
126+
test("BBOX, Options label, caption + properties function", async () => {
127+
const out = await page.$eval(
128+
"body > #output > layer-:nth-child(10)",
129+
(node) => node.outerHTML
130+
);
131+
const exp = await page.$eval(
132+
"body > #expected > layer-:nth-child(10)",
133+
(node) => node.outerHTML
134+
);
135+
expect(out).toEqual(exp);
136+
});
137+
138+
139+
});

0 commit comments

Comments
 (0)