[1.14.1] Example for support custom tiles sources

[astridx]

I like to understand this PR: maplibre/maplibre-gl-js#30

But I can't get it to work. Before I delete everything, I'll show you here. Maybe someone can explain the error in my thinking.

What I did up to now:

1

I cloned the

• repo maplibre-gl-js,
• demotiles and
• maplibre-gl-js-docs

In maplibre-gl-js repo I run

git checkout -b custom
git fetch origin pull/30/head:main
git pull origin pull/30/head:main

The changes are applied. I checked this!

I deleted the files in the folder dist and run

npm run build-prod
npm run build-prod-min
npm run build-css

The dist-files are newly created in the dist-folder. Everything OK so far.

2

I swap to the repo maplibre-gl-js-docs and I created the files.
/maplibre-gl-js-docs/docs/pages/example/custom-map.html
/maplibre/maplibre-gl-js-docs/docs/pages/example/custom-map.md
(This are the changed files in this draft.)

I created a symlink to the demofiles repo:

Symlink ln -s ../../../demotiles ./demotiles

So the styles.json ist accessible via http://localhost:8080/maplibre-gl-js-docs/demotiles/style.json.

This is the output of my browser console.

3

I have modified the files in the Demotiles Repositiory so that they are used offline if stored locally.

---

Do you like this example? Should I expand/change it.

At the moment this example cannot be used with a stable version, so it should be published after the next release.

[HarelM]

The custom protocol you added is treating the response as array buffer while you are using the style.json file with the custom protocol.
I'm not sure it will work.
What I'm doing with this (or planning to do) is load tiles using the custom protocol and not load the style json file.
i.e. I would expect to see inside the style.json a source who's tile urls are using the custom protocol.
I'm not sure I managed to convey the message... :-(

[HarelM]

If you take a look at the makeFetchRequest in the ajax.js I edited you'll be able to see how to "imitate" the style.json fetch as well...
Basically what this feature adds is the ability to "override" this method...
Let me know if and how I can help out...

[astridx]

Thank you very much @HarelM . I was busy the last days. I will have a closer look tomorrow.

[astridx]

I have just updated the example. Now it is functional.

[HarelM]

Cool! The only thing missing in explanation of this example is the fonts and the tiles themselves, I guess. But there is a comment about it.
In any case, the example shows a valid way to use this so I'm pretty happy with the results.
There's a pre-release version in npm with this functionality since this was merged to main in case you would like to update the comments in the initial post (your call).
There's also a request to say that this feature is experimental and can change in the future, not sure where and how to add this.
See the commend here:
maplibre/maplibre-gl-js#30 (comment)

[lseelenbinder]

Looks good to me, other than I think there's a build error due to the arrow functions in custom-map.html. (Error on line 3, char 38.)

[astridx]

@lseelenbinder Looks good to me, other than I think there's a build error due to the arrow functions in custom-map.html. (Error on line 3, char 38.)

Thanks. Now I use normal functions. Will check the other errors next week.

[astridx]

@HarelM

The only thing missing in explanation of this example is the fonts and the tiles themselves

Thank you very much for the feedback. I will continue to work on the explanation next week.

There's also a request to say that this feature is experimental

I will add this, too.

[wipfli]

Hi Astrid. I think if you want to move this forward, then we need an image for this example like for the other examples too. Would you like to look into that process?

[wipfli]

Add an image.

[astridx]

@wipfli Yes, that's on my todo. I would also like to improve the texts. You probably want to publish a new release of the documentary because maplibre now has a new release? Do I still have a few days? If you are in a hurry, someone else can take over and complete the branch.

[wipfli]

No hurry. We can publish updates to the docs website whenever we want.

[astridx]

While reworking, I noticed that this example only works if the addressing of the demotiles fits.
I have inserted this address as a placeholder in the explanation.

This example assumes that you have saved the Demotiles offline in the directory ../../ relative to your html file.

Is it possible to place the demotiles there (../../)? Should I use an other url?

[HarelM]

I'm not sure demotiles can be there as this is hosted in maplibre.org.
But instead of fetching the files from a relative location (which might not be "offline" if this is a site) maybe the example can cache the tiles in indexDB for example...?
Also the style that the example is pointing to doesn't have "custom://" I assume - you'll probably need to copy the style here to the code and modify it... (I might be reading the example wrong though)
Let me know if you need more help/ideas...

[HarelM]

@astridx any chance to push this forward? Sorry for the support late respond...

[astridx]

I created this example by pointing to the Demotiles repo on my local computer. This worked for me locally. I have not found a solution to implement this so that it works in any environment. So even where there is no local Demotiles Repo.
That is why I am closing this PR.