How to handle my case using MapLibre GL JS (.mvt tiles and protomaps)

[psplawski]

Howdy!

I've already:

1.Downloaded osm.pbf file for whole world.
2.Trimmed the osm.pbf file to include only a part of the map representing the USA.
3.USA.osm.pbf was converted to .mbtiles format using tilemaker tool.
4.USA.mbtiles was converted to .pmtiles format and uploaded to our AWS s3 instance, on which we are hosting protomaps server so we can access .mvt tiles using coords.

More detailed explanation of what I've done can be found in the discussion that I will provide in the next paragraph.

I've opened a discussion inside protomaps-leafet repository which explains my problem. As you can see in the discussion, author of the protomaps advised to me that I should switch from Leaflet to MapLibre GL JS to handle my case.

Can you guys help me to run my maps using my .mvt tiles and MapLibre GL JS?

I've already tried creating JSON styles file for MapLibre which can be viewed HERE

Unfortunately, map is not working.

What am I doing wrong?
Can someone help please?

[HarelM]

When using your json (the part inside the record) to initialize a map the following is the error in the console:

sources.placester.tiles: array expected, string found

Which means you need to place an array inside tiles and not url (add [...]).

I advise to start with looking at the examples here to understand how to use maplibre:
https://maplibre.org/maplibre-gl-js/docs/examples/

Here's the simples example:
https://maplibre.org/maplibre-gl-js/docs/examples/simple-map/

You can take the code there to jsbin, replace the style property with your own and look for errors in the console to better understand what's wrong with your style.

You can also locally setup maputnik to edit the style.

[psplawski]

@HarelM

Here is my CodePen with the code that should display a map using MapLibre GL → https://codepen.io/Shane-Spawski/pen/BaMvXOM

^ Same code on JSBin here → https://jsbin.com/mufozacupi/edit?html,js,console,output

Here is a JSON file exported from Maputnik that I am using as style for a map → https://api.jsonbin.io/v3/qs/65717c8b0574da7622d1770c

Only error I am getting is the:
// [object Error] {}

What am I doing wrong?

From where should I take sprite URL and Glyphs URL because right now I am using the default ones provided by Maputnik.

[HarelM]

The give json is not a style spec json - it has a record root element that is representing the style.
I suggest to start with a style that is working and slowly complicateing.
After I inlined the style from the json into the jsbin I got this error:

[HarelM]

Removing the first layer (raster) seems helps seeing something, I don't know what I'm seeing though:

[psplawski]

It seems like black dots represents missing Glyphs and Fonts.

@HarelM Can you tell me from where I can find glyphs and fonts for my map?
Or what tool should I use to generate glyphs and fonts?

[acalcutt]

It looks like your style is using "Roboto Regular" and "Roboto Condensed Italic" in your style , so one option may be to download the font files from
https://fonts.google.com/specimen/Roboto
and
https://fonts.google.com/specimen/Roboto+Condensed

Then convert the two fonts your style needs in maplibre font maker and convert them into the glyphs that maplibre needs
https://maplibre.org/font-maker/