Skip to content

Commit d89dafe

Browse files
prushforprushforth
prushfor
authored and
prushforth
committed
Update pmtilesRules.js and similar stylesheet modules to new required
format (including `new protomapsL.Sheet(...)` and returning a promise. Add a few mvt tiles to demonstrate custom styling of 'private' mvt data
1 parent 7018e9b commit d89dafe

8 files changed

Lines changed: 135 additions & 98 deletions

File tree

‎vector-tiles/pmtiles/darkTheme.js‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
1+
const sheet = new protomapsL.Sheet(`
2+
<html>
3+
<body>
4+
<svg id="icon_0" width="99px" height="97px" xmlns="http://www.w3.org/2000/svg">
5+
<image href="data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbl82NCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgPGltYWdlIGhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQkFBQUFBUUNBWUFBQUFmOC85aEFBQUFDWEJJV1hNQUFBN0VBQUFPeEFHVkt3NGJBQUFBMlVsRVFWUjRuTldQTVdvQ1lSQ0Z2MElDZ2xZaFZnRUwzZmNyZGlsczBteVJUdkFLa2xaSXdKM2ZpTjE2aGhoeUFCRkVjZ2J2WUtFbmtCUkpiNWtFSlRheXNNdFd5WVBYRFBPOW1RZC9YcjVHSlRkc1Rhb21wdm12TzBZbVB1T1FRcjRQeE5yRXR3L29wQzdITFM1TVRFd3NEdmFPdHdOOERCRGIwenh5eklkMWJoSkQraTFLWHN4T1lJSjN2a0dZM2ozZ1BnRmVqUnRjWnVvK2ROeWVCM2l4Skt0TXZQeUNtMGc4bS9neXNYOXlsRlBoT0tUZ3hZYzVYZ2ZYRkkrVnhKMkpkeE85MUlDQmFFZU83dm44b2M2VkQzak1YT1AvNkFmS0Ywd3dXeU9Oc3dBQUFBQkpSVTVFcmtKZ2dnPT0iIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPgogICAgPC9zdmc+" width="99" height="97" />
6+
</svg>
7+
</body>
8+
</html>
9+
`);
110
const pmtilesRules = new Map();
2-
pmtilesRules.set(
3-
'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark',
4-
{ theme: { theme: 'dark' } }
5-
);
6-
export { pmtilesRules };
11+
const pmtilesRulesReady = sheet.load().then(() => {
12+
pmtilesRules.set('https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark', {
13+
theme: { theme: 'dark' }
14+
});
15+
return pmtilesRules;
16+
});
17+
18+
export { pmtilesRules, pmtilesRulesReady };

‎vector-tiles/pmtiles/index.html‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
</head>
7474
<body>
7575

76-
<mapml-viewer projection="OSMTILE" zoom="12" lat="44.436108753775116" lon="-103.75024795532228" controls controlslist="geolocation">
76+
<mapml-viewer projection="OSMTILE" zoom="12" lat="44.436108753775116" lon="-103.75024795532228" controls controlslist="geolocation" static>
7777
<map-layer label="OpenStreetMap">
7878
<map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
7979
<map-extent units="OSMTILE" checked="checked">
@@ -96,19 +96,18 @@
9696
</map-extent>
9797
</map-layer>
9898

99-
<!-- <map-layer label='Custom MVT test'>
100-
99+
<map-layer label='Custom MVT test' checked>
100+
<map-link rel="stylesheet" type="application/pmtiles+stylesheet" href="pmtilesRules.js"></map-link>
101101
<map-extent units="OSMTILE" label="Spearfish" checked="checked">
102102
<map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
103103
<map-input name="x" type="location" axis="column" units="tilematrix" min="55430" max="55616"></map-input>
104104
<map-input name="y" type="location" axis="row" units="tilematrix" min="94810" max="94944"></map-input>
105-
<map-link rel="tile" tref="http://localhost:8080/geoserver/sf/gwc/service/wmts?request=GetTile&tilematrixset=OSMTILE&tilematrix={z}&TileRow={y}&service=WMTS&format=image/png&style=dem&TileCol={x}&version=1.0.0&layer=sf:sfdem"></map-link>
106-
<map-link id='mvt' rel="tile" type="application/vnd.mapbox-vector-tile" tref="http://localhost:8080/geoserver/gwc/service/wmts/rest/spearfish/OSMTILE/{z}/{y}/{x}?format=application/vnd.mapbox-vector-tile" ></map-link>
107-
<map-input name="i" type="location" axis="i" units="tile"></map-input>
105+
<map-link id='mvt' rel="tile" type="application/vnd.mapbox-vector-tile" tref="./tiles/{z}/{y}/{x}.mvt?format=application/vnd.mapbox-vector-tile" ></map-link>
106+
<!-- <map-input name="i" type="location" axis="i" units="tile"></map-input>
108107
<map-input name="j" type="location" axis="j" units="tile"></map-input>
109-
<map-link rel="query" tref="http://localhost:8080/geoserver/gwc/service/wmts?request=GetFeatureInfo&format=image/jpeg&i={i}&j={j}&TileCol={x}&version=1.0.0&layer=spearfish&tilematrixset=OSMTILE&tilematrix={z}&TileRow={y}&service=WMTS&infoformat=text/mapml&feature_count=50&style="></map-link>
108+
<map-link rel="query" tref="http://localhost:8080/geoserver/gwc/service/wmts?request=GetFeatureInfo&format=image/jpeg&i={i}&j={j}&TileCol={x}&version=1.0.0&layer=spearfish&tilematrixset=OSMTILE&tilematrix={z}&TileRow={y}&service=WMTS&infoformat=text/mapml&feature_count=50&style="></map-link>-->
110109
</map-extent>
111-
</map-layer>-->
110+
</map-layer>
112111

113112
</mapml-viewer>
114113
</body>

‎vector-tiles/pmtiles/lightTheme.js‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,27 @@
1+
const sheet = new protomapsL.Sheet(`
2+
<html>
3+
<body>
4+
<svg id="icon_0" width="99px" height="97px" xmlns="http://www.w3.org/2000/svg">
5+
<image href="data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbl82NCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgPGltYWdlIGhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQkFBQUFBUUNBWUFBQUFmOC85aEFBQUFDWEJJV1hNQUFBN0VBQUFPeEFHVkt3NGJBQUFBMlVsRVFWUjRuTldQTVdvQ1lSQ0Z2MElDZ2xZaFZnRUwzZmNyZGlsczBteVJUdkFLa2xaSXdKM2ZpTjE2aGhoeUFCRkVjZ2J2WUtFbmtCUkpiNWtFSlRheXNNdFd5WVBYRFBPOW1RZC9YcjVHSlRkc1Rhb21wdm12TzBZbVB1T1FRcjRQeE5yRXR3L29wQzdITFM1TVRFd3NEdmFPdHdOOERCRGIwenh5eklkMWJoSkQraTFLWHN4T1lJSjN2a0dZM2ozZ1BnRmVqUnRjWnVvK2ROeWVCM2l4Skt0TXZQeUNtMGc4bS9neXNYOXlsRlBoT0tUZ3hZYzVYZ2ZYRkkrVnhKMkpkeE85MUlDQmFFZU83dm44b2M2VkQzak1YT1AvNkFmS0Ywd3dXeU9Oc3dBQUFBQkpSVTVFcmtKZ2dnPT0iIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPgogICAgPC9zdmc+" width="99" height="97" />
6+
</svg>
7+
</body>
8+
</html>
9+
`);
110
const pmtilesRules = new Map();
2-
pmtilesRules.set(
3-
'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
4-
{ theme: { theme: 'light' } }
5-
);
6-
pmtilesRules.set(
7-
'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=light',
8-
{ theme: { theme: 'light' } }
9-
);
10-
pmtilesRules.set(
11-
'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5',
12-
{ theme: { theme: 'light' } }
13-
);
14-
export { pmtilesRules };
11+
const pmtilesRulesReady = sheet.load().then(() => {
12+
pmtilesRules.set(
13+
'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
14+
{ theme: { theme: 'light' } }
15+
);
16+
pmtilesRules.set(
17+
'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=light',
18+
{ theme: { theme: 'light' } }
19+
);
20+
pmtilesRules.set(
21+
'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5',
22+
{ theme: { theme: 'light' } }
23+
);
24+
return pmtilesRules;
25+
});
26+
27+
export { pmtilesRules, pmtilesRulesReady };

‎vector-tiles/pmtiles/pmtilesRules.js‎

Lines changed: 85 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -17,77 +17,90 @@ class SpearfishSymbolizer {
1717
context.fill();
1818
}
1919
}
20+
const sheet = new protomapsL.Sheet(`
21+
<html>
22+
<body>
23+
<svg id="icon_0" width="99px" height="97px" xmlns="http://www.w3.org/2000/svg">
24+
<image href="data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbl82NCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgPGltYWdlIGhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQkFBQUFBUUNBWUFBQUFmOC85aEFBQUFDWEJJV1hNQUFBN0VBQUFPeEFHVkt3NGJBQUFBMlVsRVFWUjRuTldQTVdvQ1lSQ0Z2MElDZ2xZaFZnRUwzZmNyZGlsczBteVJUdkFLa2xaSXdKM2ZpTjE2aGhoeUFCRkVjZ2J2WUtFbmtCUkpiNWtFSlRheXNNdFd5WVBYRFBPOW1RZC9YcjVHSlRkc1Rhb21wdm12TzBZbVB1T1FRcjRQeE5yRXR3L29wQzdITFM1TVRFd3NEdmFPdHdOOERCRGIwenh5eklkMWJoSkQraTFLWHN4T1lJSjN2a0dZM2ozZ1BnRmVqUnRjWnVvK2ROeWVCM2l4Skt0TXZQeUNtMGc4bS9neXNYOXlsRlBoT0tUZ3hZYzVYZ2ZYRkkrVnhKMkpkeE85MUlDQmFFZU83dm44b2M2VkQzak1YT1AvNkFmS0Ywd3dXeU9Oc3dBQUFBQkpSVTVFcmtKZ2dnPT0iIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPgogICAgPC9zdmc+" width="99" height="97" />
25+
</svg>
26+
</body>
27+
</html>
28+
`);
2029
const pmtilesRules = new Map();
21-
pmtilesRules.set(
22-
'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
23-
{ theme: { theme: 'light' } }
24-
);
25-
pmtilesRules.set(
26-
'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=light',
27-
{ theme: { theme: 'light' } }
28-
);
29-
pmtilesRules.set(
30-
'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark',
31-
{ theme: { theme: 'dark' } }
32-
);
33-
pmtilesRules.set(
34-
'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5',
35-
{ theme: { theme: 'light' } }
36-
);
37-
pmtilesRules.set(
38-
'http://localhost:8080/geoserver/gwc/service/wmts/rest/spearfish/OSMTILE/{z}/{y}/{x}?format=application/vnd.mapbox-vector-tile',
39-
{
40-
rules: {
41-
PAINT_RULES: [
42-
{
43-
dataLayer: 'streams',
44-
symbolizer: new protomapsL.LineSymbolizer({ color: 'steelblue', width: 2 })
45-
},
46-
{
47-
dataLayer: 'roads',
48-
symbolizer: new protomapsL.LineSymbolizer({ color: 'maroon', width: 2 })
49-
},
50-
{
51-
dataLayer: 'restricted',
52-
symbolizer: new protomapsL.PolygonSymbolizer({
53-
fill: 'red',
54-
opacity: 0.5
55-
})
56-
},
57-
{
58-
dataLayer: 'restricted',
59-
symbolizer: new protomapsL.LineSymbolizer({ color: 'red', width: 2 })
60-
},
61-
{
62-
dataLayer: 'archsites',
63-
symbolizer: new SpearfishSymbolizer({
64-
color: 'red',
65-
shape: 'square'
66-
})
67-
},
68-
{
69-
dataLayer: 'bugsites',
70-
symbolizer: new SpearfishSymbolizer({
71-
color: 'black',
72-
shape: 'circle'
73-
})
74-
}
75-
],
76-
LABEL_RULES: [
77-
{
78-
dataLayer: 'archsites',
79-
symbolizer: new protomapsL.CenteredTextSymbolizer({
80-
labelProps: ['str1'],
81-
fill:'white',
82-
width:2,
83-
stroke:'black',
84-
font:"600 16px sans-serif"
85-
}),
86-
// note that filter is a property of a rule, not an option to a symbolizer
87-
filter: (z,f) => { return f.props['str1'].trim().toLowerCase() !== 'no name'; }
88-
}
89-
]
30+
const pmtilesRulesReady = sheet.load().then(() => {
31+
pmtilesRules.set(
32+
'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
33+
{ theme: { theme: 'light' } }
34+
);
35+
pmtilesRules.set(
36+
'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=light',
37+
{ theme: { theme: 'light' } }
38+
);
39+
pmtilesRules.set(
40+
'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark',
41+
{ theme: { theme: 'dark' } }
42+
);
43+
pmtilesRules.set(
44+
'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5',
45+
{ theme: { theme: 'light' } }
46+
);
47+
pmtilesRules.set(
48+
'https://maps4html.org/experiments/vector-tiles/pmtiles/tiles/{z}/{y}/{x}.mvt?format=application/vnd.mapbox-vector-tile',
49+
{
50+
rules: {
51+
PAINT_RULES: [
52+
{
53+
dataLayer: 'streams',
54+
symbolizer: new protomapsL.LineSymbolizer({ color: 'steelblue', width: 2 })
55+
},
56+
{
57+
dataLayer: 'roads',
58+
symbolizer: new protomapsL.LineSymbolizer({ color: 'maroon', width: 2 })
59+
},
60+
{
61+
dataLayer: 'restricted',
62+
symbolizer: new protomapsL.PolygonSymbolizer({
63+
fill: 'red',
64+
opacity: 0.5
65+
})
66+
},
67+
{
68+
dataLayer: 'restricted',
69+
symbolizer: new protomapsL.LineSymbolizer({ color: 'red', width: 2 })
70+
},
71+
{
72+
dataLayer: 'archsites',
73+
symbolizer: new SpearfishSymbolizer({
74+
color: 'red',
75+
shape: 'square'
76+
})
77+
},
78+
{
79+
dataLayer: 'bugsites',
80+
symbolizer: new SpearfishSymbolizer({
81+
color: 'black',
82+
shape: 'circle'
83+
})
84+
}
85+
],
86+
LABEL_RULES: [
87+
{
88+
dataLayer: 'archsites',
89+
symbolizer: new protomapsL.CenteredTextSymbolizer({
90+
labelProps: ['str1'],
91+
fill:'white',
92+
width:2,
93+
stroke:'black',
94+
font:"600 16px sans-serif"
95+
}),
96+
// note that filter is a property of a rule, not an option to a symbolizer
97+
filter: (z,f) => { return f.props['str1'].trim().toLowerCase() !== 'no name'; }
98+
}
99+
]
100+
}
90101
}
91-
}
92-
);
93-
export { pmtilesRules };
102+
);
103+
return pmtilesRules;
104+
});
105+
106+
export { pmtilesRules, pmtilesRulesReady };

‎vector-tiles/pmtiles/tiles/11/740/433.mvt‎

14.7 KB
Binary file not shown.

‎vector-tiles/pmtiles/tiles/11/740/434.mvt‎

3.9 KB
Binary file not shown.

‎vector-tiles/pmtiles/tiles/11/741/433.mvt‎

16.4 KB
Binary file not shown.

‎vector-tiles/pmtiles/tiles/11/741/434.mvt‎

7.15 KB
Binary file not shown.

0 commit comments

Comments
 (0)