<p dir="auto">Based on <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1721673158" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/4042" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/4042/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/4042">#4042</a> and <a href="https://github.com/openstreetmap/openstreetmap-website/pull/4042/files#r1966844335">https://github.com/openstreetmap/openstreetmap-website/pull/4042/files#r1966844335</a></p>
<p dir="auto">This PR adds a Leaflet.Maplibregl-based layer using Versatiles Colorful.</p>
<p dir="auto">The issue I'm having right now is relative URLs. To use relative URLs for sprites, tiles, and glyphs, you need to use <a href="https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/TransformStyleFunction/" rel="nofollow"><code class="notranslate">TransformStyleFunction</code></a>. This can only be supplied to <a href="https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#setstyle" rel="nofollow"><code class="notranslate">Map.setStyle()</code></a>.</p>
<p dir="auto">In the demo page I did this <a href="https://github.com/openstreetmap/vectortile-website/blob/6d459cec4940e8488d0f7695940256f5f5dc8feb/demo/shortbread/index.html#L62-L69">fairly easily</a>, but I wasn't dealing with Leaflet.Maplibregl.</p>
<p dir="auto">I'm not sure what the best approach here is. Some options I considered are</p>
<ol dir="auto">
<li>making colorful.json use absolute paths. This has a few secondary effects<br>
a. I'd still need to use <code class="notranslate">TransformStyleFunction</code> on the demo page since vector.openstreetmap.org should load tiles/sprites/glyphs via the CDN and dribble.openstreetmap.org should load tiles/sprites/glyphs off of dribble<br>
b. I'd want to put CORS restrictions on <code class="notranslate">https://vector.openstreetmap.org/demo/shortbread/colorful.json</code> restricting it to OSM domains and testing domains (e.g. localhost). Users of the tile layer should be hosting the style on their website, not depending on what we're hosting</li>
<li>Figuring out how to use <code class="notranslate">TransformStyleFunction</code> in Leaflet. I'm not sure if this is possible or where to start.</li>
</ol>
<p dir="auto">I did consider building the colorful.json style in this repo but decided against it. Some aspects of the style (glyphs, sprites) will have to be built externally no matter what, and it's best to keep the style JSON build with those other parts.</p>
<p dir="auto">What I need is some input on what approach to take with the relative/absolute URLs.</p>
<hr>
<h4>You can view, comment on, or merge this pull request online at:</h4>
<p> <a href='https://github.com/openstreetmap/openstreetmap-website/pull/6137'>https://github.com/openstreetmap/openstreetmap-website/pull/6137</a></p>
<h4>Commit Summary</h4>
<ul>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/6137/commits/f32315a96f4920495c22409ed8070536a4d61642" class="commit-link">f32315a</a> Add Shortbread-based vector tile layer</li>
</ul>
<h4 style="display: inline-block">File Changes </h4> <p style="display: inline-block">(<a href="https://github.com/openstreetmap/openstreetmap-website/pull/6137/files">9 files</a>)</p>
<ul>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/6137/files#diff-12fd523cb95d119382c3743591e40c90ae62ed20b24a7012b37aed54031009b8">app/assets/config/manifest.js</a>
(1)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/6137/files#diff-f060eef487077b042f45b3a12e7a2cbd54a446f8c744cdb98405a1295430e8b9">app/assets/javascripts/leaflet.map.js</a>
(19)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/6137/files#diff-a9b88a8a3644f944b9bd54361da588c69fa6a210cf7327194c17895a8ad2b0d6">app/assets/javascripts/osm.js.erb</a>
(3)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/6137/files#diff-766c34fd6533171eaf54300c153f89d6002c35c02cfc9c5b219251f85180ad07">app/controllers/application_controller.rb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/6137/files#diff-be08bf07d01efb10c473fba0708c125561595ef291c0f00f7eb7f9402f85f067">config/eslint.config.mjs</a>
(3)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/6137/files#diff-c1c619ffb7b249550067cb696b8e7d6c29d1efe2ed4cf5b7a8bb6bed47b409d1">config/initializers/content_security_policy.rb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/6137/files#diff-d892782f9b64fbeb09be7a61ed829d071c868b6b125f6a74df1de4bb033524a2">config/layers.yml</a>
(9)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/6137/files#diff-e769bbb8c1ba3711c5403b424ed9c218ffafba7f1890ee394717196f28ff4540">config/settings.yml</a>
(1)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/6137/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519">package.json</a>
(3)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/6137.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/6137.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/6137.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/6137.diff</a></li>
</ul>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/6137">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLL67V6LU3FHRFE6UGL3FTFLTAVCNFSM6AAAAACAH65HMWVHI2DSMVQWIX3LMV43ASLTON2WKOZTGE4DCMZVHEYDSOI">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLJDCI4VW7CWUEFWRLD3FTFLTA5CNFSM6AAAAACAH65HMWWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHL3H5P7M.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/6137</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/6137",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/6137",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>