protomaps / basemaps

Basemap PMTiles generation and cartographic styles for OpenStreetMap data and more
https://maps.protomaps.com/
Other
347 stars 44 forks source link

Importing basemap themes from browser's script tags for v3+ #255

Closed daniel-j-h closed 3 months ago

daniel-j-h commented 3 months ago

Hey folks, I have a few projects making use of the basemap themes in this project through unpkg from script tags directly as a starting point as they are so convenient to use.

I just wanted to upgrade from v2 of this package to v3 and noticed in the changelog the move to ES6 modules

https://github.com/protomaps/basemaps/blob/main/CHANGELOG.md#styles-v200

reflected in the code published e.g. here

now with v2 I could simple add the following to my html website's head and in its script section use protomaps_themes_base.default()

<script src="https://unpkg.com/protomaps-themes-base@2.0.0-alpha.6/dist/index.js" crossorigin="anonymous"></script>

Now with the ES6 module I struggle to make the same work; I tried already

<script type="module" src="https://unpkg.com/protomaps-themes-base@3.0.1/dist/index.js" crossorigin="anonymous"></script>

but then I don't seem to have access to the module's exports. What am I missing here? I was wondering what the recommended way to upgrade is here and if you folks want to then move all the protomaps packages to ES6 in the near future? Thank you.

bdon commented 3 months ago

The iife build for script includes was renamed to protomaps-themes-base.js while the es6 module is index.js; this seems more conventional

https://unpkg.com/browse/protomaps-themes-base@3.0.1/dist/

Each theme layer object is also in the layers/dir as static json, however I may remove this approach in the future when we have first class localization support

daniel-j-h commented 3 months ago

Aha! Perfect I somehow missed that! Thank you that works nicely!

For posterity: change

<script src="https://unpkg.com/protomaps-themes-base@2.0.0-alpha.6/dist/index.js" crossorigin="anonymous"></script>

to

<script src="https://unpkg.com/protomaps-themes-base@3.0.1/dist/protomaps-themes-base.js" crossorigin="anonymous"></script>
bdon commented 3 months ago

Updated the docs: https://docs.protomaps.com/basemaps/maplibre#using-a-cdn