Questions about getting from OSM to displaying a vector map with maplibre-gl-js

[Midnightz2]

I'm relatively new to this so I might not have all of the lingo down.

First general question:

Is there a tutorial that shows the whole process from downloading a .pbf from OpenStreetMap to displaying generated vector tiles from martin with maplibre-gl-js for just a generic map?

More details:

I've already successfully gone through the following process:

1. Downloaded OSM data in a .pbf file
2. Imported data using osm2pgsql with the generic.lua file into postgresql
3. Served the data with martin
4. Attempted to create a style.json file using maputnik
5. Displayed the maps in a browser using maplibre-gl-js

I'm not sure if I'm thinking about this correctly but I think I'm getting hung up with how to easily import the OpenStreetMap data and translate that into the creation of the style.json. I tried taking one of the publicly available styles from maputnik and just change the source. That didn't really work since, for example, it seems how OpenMapTiles data is set up differently than how mine was when I used the generic.lua style for the postgresql import. To use the OpenMapTiles template I was having to go through and change every layer and key, even then some items were not successfully switched to my data source. Otherwise do I need to manually generate the style.json listing every single key and value from OpenStreetMaps?

I guess I'm looking for suggestions on how I should be approaching this process.

[HarelM]

The process in general is correct, but you might want to simplify it:

1. You might want to take some existing tiles and simply style them according to what you desire, there are vendors for tiles and there are also some free tiles out there.
2. You can use planetiler to build the tiles and serve that, which doesn't require a database running.

The key thing to understand is that a style and the sources (tiles) are very much linked together - when writing a style you should know the underling data, it's properties, and what it represents in order to show it on the map.
You could start with an existing style and tiles and change the style, but you won't be able to present things that don't exist in the tiles, only style them differently or avoid showing stuff.
As a basic starting point I would look into that. After you get the hang of it you can try and roll your own style and tiles.

[Midnightz2]

Thank you for the response, but I’m very confused by it. I’m already successfully creating and serving tiles with maplibre martin. Why would I throw that out to use some other existing tiles which would appear as a black box to me where I have no insight into how they were created? Similarly why would I leave the maplibre stack and use planetiler when I already have maplibre martin creating and serving vector tiles? My confusion grows deeper over that suggestion when I see the planetiler website says the planetiler generated tiles can then be served with maplibre martin.

From what I’ve learned it appears to me that the process to create what I would call a generic base map from OSM data would be (or could be and should be) a standard process up to the point of actually picking the styles. If I’m thinking about this correctly I need that OSM generic base map as my starting point to then start adding my own custom data on top of.

I picked the generic.lua file for my osm2pgsql import because it states: “ This is a generic configuration that is a good starting point for real-world projects. Data is split into tables according to geometry type and most tags are stored in jsonb columns.” There may be better .lua file choices out there but that’s all I know right now.

If I understand this all correctly, always using the same generic.lua file would result in the database having the same structure and the tiles served by maplibre martin would have the same keys, values, features, etc. available for styling and display by maplibre-gl-js. Therefore a matching generic-style.json could be created and used that always works with that data after a few simple customization like pointing it to the tiles location. From there deciding what to display and how to display would be simple, especially with a tool like maputnik.

From what I can gather, no style.json templates even remotely similar to this exist. Strangely all of the documentation (and responses to questions) seems to be centered around just using someone else’s already existing tiles and styles, which aren’t open source from what I can tell, requiring api keys, subscriptions, etc.

If my thoughts and assumptions are correct I can get started on creating a generic-style.json.

[zerda-ocm]

You don't need to throw out anything if you don't want to, but it will save you time.

Historically, osm2pgsql was widely used for generating raster tiles. It is still functional but is no longer the most efficient choice for vector tile generation, especially for large-scale data. It is significantly slower compared to alternatives like Imposm or Planetiler. And as you already experienced, the lack of predefined vector tile styles also makes it harder to use.

If you need a PostGIS-based solution, then OpenMapTiles is a better choice, as it uses Imposm, which is better optimized than osm2pgsql for this use case and has predefined styles you can build on.

If you’re only serving tiles and don’t need a PostGIS database, then planetiler-openmaptiles is a better choice. It can generate vector tiles much faster.

[Midnightz2]

Thank you, this makes more sense to me now. I guess I'm back to my original first question, or some variant. Is there a process map that shows various options for how to go from OSM data to displaying it with maplibre? Ideally it would describe why to use one path over another depending on your goals. That would really help someone new like me.

Any of the processes maps I've seen all start with osm2pgsql, which now seems like outdated information. Even working backwards from maplibre-gl-js documentation through martin, I arrived at using osm2pgsql. I'm going to read more about the options you've both presented and try a new path. Thanks again.

[zerda-ocm]

Is there a process map that shows various options for how to go from OSM data to displaying it with maplibre?

https://wiki.openstreetmap.org/wiki/Vector_tiles might be a good starting point.

Any of the processes maps I've seen all start with osm2pgsql, which now seems like outdated information.

I wouldn't call it outdated. It is a different tool for a different scope. Minutely updates for example are impossible with planetiler.

[Midnightz2]

Adding this comment to close this out and maybe help someone who finds this in the future. I've yet to see a good flowchart describing the whole map making process with pros and cons of using various options along the way. https://wiki.openstreetmap.org/wiki/Vector_tiles was a decent read though.

I believe what I was describing doing for the osm2pgsql import was create as schema to do the styling, which is exactly what OpenMapTiles is. I ended up taking the advice suggested and using the OpenMapTiles quickstart to get started and go from there.