Skip to content

Commit

Permalink
Add TemplatedPMTilesLayer, update map-link to use it.
Browse files Browse the repository at this point in the history 
Add the application/vnd.mapbox-vector-tile media type to map-link,
which is the signal to pass {z}/{x}/{y}.mvt templates to TemplatedPMTilesLayer
Import PolygonSymbolizer and LineSymbolizer explicitly from protomapsL,
in case they become needed / for experimentation.

Update src/mapml/index.js to import from protomaps-leaflet module
directly.

Add grunt-rollup plugin-node-resolve to help bundle output esm from
 protomaps

Add dynamic import of pmtilesRules.js module, containing user styles
for pmtiles / mvt layers.

Use protomaps-leaflet v 4.0.0

Add protomapsL as M.protomapsL

Add label rule with filter example for Spearfish to pmtilesRules.js

Move pmtilesRules.js into src

Add image comparison test for local pmtiles mvt source, win32 png files

Add linux images for templatedPMTilesMVTLayer.test.js

Replace linux image that was missing glyphs or something
Comment out flaky image comparison (IIRC label selection is based on
tile load order, so not reliable for a test, probably)

Let images of labelled maps be up to 1500 pixels different, since labels
can move around based on tile loading order, and the fonts on different
systems are different (?).
  • Loading branch information
@prushforth
prushforth committed Jul 31, 2024
1 parent b1a79c9 commit 1e84137
Show file tree
Hide file tree
Showing 36 changed files with 1,033 additions and 126 deletions.
14 changes: 12 additions & 2 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
module.exports = function(grunt) {
const Diff = require('diff');
const nodeResolve = require('@rollup/plugin-node-resolve');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
cssmin: {
Expand Down Expand Up @@ -94,6 +95,13 @@ module.exports = function(grunt) {
src: ['index.html'],
dest: 'dist/'
},
{
expand: true,
flatten: true,
filter: 'isFile',
src: ['src/pmtilesRules.js'],
dest: 'dist/'
},
{
expand: true,
cwd: 'node_modules/leaflet.locatecontrol/src/',
Expand Down Expand Up @@ -179,7 +187,7 @@ module.exports = function(grunt) {
},
clean: {
dist: ['dist'],
tidyup: ['dist/leaflet-src.js','dist/proj4-src.js','dist/proj4leaflet.js','dist/L.Control.Locate.js'],
tidyup: ['dist/leaflet-src.js','dist/proj4-src.js','dist/proj4leaflet.js','dist/L.Control.Locate.js','dist/protomaps-index.js'],
experiments: {
options: {force: true},
src: ['../experiments/dist']
Expand All @@ -199,7 +207,9 @@ module.exports = function(grunt) {
},
rollup: {
options: {
format: 'iife'
format: 'iife',
plugins: [nodeResolve()],
external: './pmtilesRules.js'
},
main: {
dest: 'dist/mapml.js',
Expand Down
195 changes: 117 additions & 78 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,84 +5,123 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>index-map.html</title>
<script type="module" src="dist/mapml-viewer.js"></script>
<style>
html,
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/* Specifying the `:defined` selector is recommended to style the map
element, such that styles don't apply when fallback content is in use
(e.g. when scripting is disabled or when custom/built-in elements isn't
supported in the browser). */
mapml-viewer:defined {
/* Responsive map. */
max-width: 100%;
/* Full viewport. */
width: 100%;
height: 100%;
/* Remove default (native-like) border. */
border: none;
vertical-align: middle;
}
/* Pre-style to avoid FOUC of inline layer- and fallback content. */
mapml-viewer:not(:defined) > * {
display: none;
}
/* Pre-style to avoid Layout Shift. */
mapml-viewer:not(:defined) {
display: inline-block;
contain: size;
contain-intrinsic-size: 304px 154px;
}
/* Ensure inline layer content is hidden if custom/built-in elements isn't
supported, or if javascript is disabled. This needs to be defined separately
from the above, because the `:not(:defined)` selector invalidates the entire
declaration in browsers that do not support it. */
layer- {
display: none;
}
</style>
<noscript>
<style>
/* Ensure fallback content (children of the map element) is displayed if
custom/built-in elements is supported but javascript is disabled. */
mapml-viewer:not(:defined) > :not(layer-) {
display: initial;
}
/* "Reset" the properties used to pre-style (to avoid Layout Shift) if
custom/built-in elements is supported but javascript is disabled. */
mapml-viewer:not(:defined) {
display: initial;
contain: initial;
contain-intrinsic-size: initial;
}
</style>
</noscript>
<style>
html,
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
}

/* Specifying the `:defined` selector is recommended to style the map
element, such that styles don't apply when fallback content is in use
(e.g. when scripting is disabled or when custom/built-in elements isn't
supported in the browser). */
mapml-viewer:defined {
/* Responsive map. */
max-width: 100%;

/* Full viewport. */
width: 100%;
height: 100%;

/* Remove default (native-like) border. */
border: none;

vertical-align: middle;
}

/* Pre-style to avoid FOUC of inline layer- and fallback content. */
mapml-viewer:not(:defined) > * {
display: none;
}

/* Pre-style to avoid Layout Shift. */
mapml-viewer:not(:defined) {
display: inline-block;
contain: size;
contain-intrinsic-size: 304px 154px;
}

/* Ensure inline layer content is hidden if custom/built-in elements isn't
supported, or if javascript is disabled. This needs to be defined separately
from the above, because the `:not(:defined)` selector invalidates the entire
declaration in browsers that do not support it. */
layer- {
display: none;
}
</style>
<noscript>
<style>
/* Ensure fallback content (children of the map element) is displayed if
custom/built-in elements is supported but javascript is disabled. */
mapml-viewer:not(:defined) > :not(layer-) {
display: initial;
}

/* "Reset" the properties used to pre-style (to avoid Layout Shift) if
custom/built-in elements is supported but javascript is disabled. */
mapml-viewer:not(:defined) {
display: initial;
contain: initial;
contain-intrinsic-size: initial;
}
</style>
</noscript>
</head>
<body>

<mapml-viewer projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation">
<layer- data-testid="osm-layer" label="OpenStreetMap" checked >
<map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
<map-extent units="OSMTILE" checked="checked">
<map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
<map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
<map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
<map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
</map-extent>
</layer->
</mapml-viewer>
</body>

<mapml-viewer projection="OSMTILE" zoom="12" lat="44.436108753775116" lon="-103.75024795532228" controls controlslist="geolocation">
<layer- data-testid="osm-layer" label="OpenStreetMap" >
<map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
<map-extent units="OSMTILE" checked="checked">
<map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
<map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
<map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
<map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
</map-extent>
</layer->
<layer->
<map-title>PMTiles test light</map-title>
<map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
<map-extent units="OSMTILE" checked>
<map-link rel="tile" type="application/pmtiles" tref="https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles?theme=light"></map-link>
</map-extent>
</layer->
<layer->
<map-title>PMTiles test dark</map-title>
<map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
<map-extent units="OSMTILE" checked>
<map-link rel="tile" type="application/pmtiles" tref="https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles?theme=dark"></map-link>
</map-extent>
</layer->
<layer- checked>
<map-title>{z}/{x}/{y}.mvt API test</map-title>
<map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
<map-extent units="OSMTILE" checked="checked">
<map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
<map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
<map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
<map-link rel="tile" type="application/vnd.mapbox-vector-tile" tref="https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5"></map-link>
</map-extent>
</layer->

<layer- label='Custom MVT test' checked>

<map-extent units="OSMTILE" label="Spearfish" checked="checked">
<map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
<map-input name="x" type="location" axis="column" units="tilematrix" min="55430" max="55616"></map-input>
<map-input name="y" type="location" axis="row" units="tilematrix" min="94810" max="94944"></map-input>
<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>
<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>
<map-input name="i" type="location" axis="i" units="tile"></map-input>
<map-input name="j" type="location" axis="j" units="tile"></map-input>
<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>
</map-extent>
</layer->

</mapml-viewer>
</body>
</html>
Loading

0 comments on commit 1e84137

Please sign in to comment.