Use PBF file with OSM API offline

Help and support
1

Hi

my first try with OSM API.
I would like to display 10-60 markers on a map.
offline.

I got PBF file on windows which I exported using [link text][1]
[1]: http://extract.bbbike.org

I am looking for a sample to start with.
I would like to code in HTML/JS (in windows) and use it also on Android.

any help will be much appreciated.

Gonen

2

The PBF is the all OSM information, you normally need to process it in order to use it. The best way to do this will depend on exactly what you want to do.

For just displaying markers over a map you might be OK with vector or raster tiles for the region of interest, but this will depend on how large the region is, what zoom level you need and whether you are OK with needing a constant internet connection. There are various javascript libraries for displaying maps in web pages. You may find this site useful as an introduction.

2 Likes
3

Thank you for reply.
I look to display markers on map offline.
Zoom to road level.
Region size about Uk.

Since I am new here, I look for sample.
Currently I do it using html is with Google maps api but it does not support offline…

Thanks!!!

4

So you want it to be offline?

5

yes. Offline. (windows and android)
I have it today with Google maps API (Markers on map) - but it does not support offline.

I simply have no idea how to use the PBF file …
Very new here.

thanks for any help.

6

I simply have no idea how to use the PBF file …
Very new here.

the pbf is OpenStreetMap data in binary form, it doesn’t display on its own, typically you would either create raster tiles from it (rendering some of the data with rules where you define how it should look like), or vector tiles(transformed osm data that is tiled/split into regular chunks so you don’t have to download the whole world to see something) and define rules for the latter.

2 Likes
7

To use it offline, you need to save it as an HTML file and open it in a web browser on your Windows machine. You can also adapt your code for use within an Android app by utilizing a WebView. Also look here (https://github.com/zerebubuth/openstreetmap-osmpbfreader)

8

I think you’re starting this from the wrong end. A .pbf file is “just some OSM data”. You can convert that into any format that you can read on the device (perhaps a SQLite database?) and then on the device you’ll want to display some of that data as “markers” (in what way you don’t say).

I’d get the functionality you want working with a really simple OSM data file (in normal XML format) before worrying about .PBF files.

9

thank you all !!! theoretically - I understand your explanations but maybe it is too much for newbee like me.

can someone suggest a simpler way to display marker on offline map (region UK , zoom level - roads)
maybe another direction like mapbox ?

thank you again !!!

1 Like
10

Depending on the zoom level, Leaflet with raster tiles on the filesystem might be an option. To be clear, this absolutely isn’t the best solution in 2023 (it’s doubtful that it was about 10 years ago when I wrote that as a PoC), but it is HTML, simple and Leaflet is well-documented.

1 Like
11

thank you !!! do you have maybe a simple html code sample ?

12

yes, mapbox also has an option for offline tiles.

https://docs.mapbox.com/android/maps/guides/offline/

I don’t know whether this is easy :slight_smile:

For a start, I would rather get the tiles in the typical directory structure ( zoom/x/y.png for raster) and use leaflet to show them. You can get the tiles by buying them from someone who sells tile packs, or scrape them from the web (may not be compatible license wise depending from where you get them), or produce them on your own (with a rendering program, e.g. mapnik or maperitive or osmarender).

It depends how big of an area you want to cover and in which detail (max zoom level).

Vector tiles are much nicer for display because they use the full screen resolution (high definition) without requiring more storage space, and if they are rendered locally, they can adopt to the situation (e.g. rotate labels), but they are much more complex compared the raster tiles. If you get it working with raster tiles, you can still change the map to vector tiles later.

1 Like
13

Assuming that’s a reply to me (not your fault - it’s a problem with the Discourse software used here), then yes. It’s not very exciting though :slight_smile:

1 Like
14

Purely theoretically, if I were wanting to do this for a desktop computer, I’d do a quick map viewer app in Electron. One half is the “client” which would just be MapLibre GL JS with a bit of chrome around the edge. The other half is the “server”, which would consume pre-built vector tile packages from Geofabrik, and serve them on an (internal) HTTP endpoint so that MapLibre could consume them.

For someone who knew what they were doing it would be pretty straightforward, but Node.js is not my bag. :slight_smile:

2 Likes
15

thanks !!! I enjoy seeing how many options are there… how many friends are here to help.
but looks like my knowledge is not enough for this level.

I will keep searching for a simple sample to display few markers on offline map.
once I find it, I will know to adjust.

thank you !!!

1 Like
16

leaflet js has some simple examples

1 Like
17

thanks !!! can you be more specific where should I look at???

18

https://leafletjs.com/examples.html

1 Like
19

THANKS !!!

20

To begin with, it would be preferable to obtain the tiles in the standard directory format (e.g., zoom/x/y.png for raster tiles) and utilize Leaflet to display them. The tiles can be acquired by purchasing them from a tile pack vendor, extracting them from the web (although this may raise license compatibility concerns depending on the source), or generating them independently using rendering software such as Mapnik.

Edit: spam removed by moderator