How to use API to receive vector tiles with Mapbox?

General
1

I see you have documentation to use the API with MapLibre, is there any support with mapbox?

If so, I have a need to dynamically pull in vector tiles for different time periods. The input could would a be a year and could potentially be hundreds of years. So I would need to dynamically fetch tiles for different years basically.

My current setup uses Mapbox GLJS, vanilla JS, I also use a tileserver to serve vector tiles when needed. Mapbox needs to dynamically add the z,x, and y values. Would this be possible with the API or is there another viable option for my needs?

 map.addSource('countries', {
    type: 'vector',
    tiles: ['http://localhost:3000/data/countries/{z}/{x}/{y}.pbf'],
    minzoom: 1,
    maxzoom: 5,
  });

  map.addLayer({
    id: 'countriesLayer',
    type: 'fill',
    source: 'countries',
    'source-layer': 'country_bordersgeo',
    paint: {
      'fill-color': '#888',
      'fill-opacity': 0.5,
    },
  });
2

Hi, the documentation for MapLibre GL JS should apply to Mapbox GL JS as well. The tile URL template (documented further up) is:

https://vtiles.openhistoricalmap.org/maps/osm/{z}/{x}/{y}.pbf

Administrative boundaries are in the land_ohm_lines source layer.

You’ll also need to filter the features by date, or else you’ll see lots of anachronistic overlapping features. The MapLibre GL Dates plugin might be compatible with Mapbox GL JS. It’s an NPM package, but you can obtain a plain-vanilla JavaScript copy directly from the unpkg CDN. If that doesn’t work, you can crib the source code to do the filtering in your own code.

3

@jordanss1 - what are you working on? Is it something you can share externally? We’d love to see what people are doing with OHM data!

1 Like
4

@Minh_Nguyen Sorry about the late message back I’ve been working on other aspects of the project trying to understand how maps work. Never programmed a map before.

https://vtiles.openhistoricalmap.org/maps/osm/{z}/{x}/{y}.pbf

Thanks for that. It works but I’m noticing it is destroying performance making these requests. Any advice on that?

You’ll also need to filter the features by date, or else you’ll see lots of anachronistic overlapping features. The MapLibre GL Dates plugin might be compatible with Mapbox GL JS. It’s an NPM package, but you can obtain a plain-vanilla JavaScript copy directly from the unpkg CDN. If that doesn’t work, you can crib the source code to do the filtering in your own code.

I’ve added the vanilla JS to my project and map.filterByDate() is not being recognized as a function. There must be something more I need to do to integrate it. When you say crib, do you mean add the Dates function to the mapbox source code? Interested to know how you’d advice adding a function to the mapbox Map object because I’m clueless. :confused:

5

@jeffmeyer would love to, Jeff, once I get it sorted out! I have an idea in my head of what I want to achieve and I’m hopeful I can get it done.

The map will have a normal, modern side to it with places pois etc. Modern info about countries and different search functionality and buttons.

Then I will integrate with OHM and Wikipedia to show events mapped out by year. Wikipedia doesn’t provide lat/long for these events so I will send bulk requests to a LLM to return lat/long for these events and map them out (the LLM has been pretty accurate with the events I’ve tested so far).

First, I need to figure out how to work OHM with Mapbox. Hopefully it’s not too hard.

6

No worries, if you’ve gotten this far, that’s pretty good for a first foray into Web map development!

It’s possible that the lack of date filtering is bogging down Mapbox GL JS, especially if your stylesheet is attempting to label the features. So getting the date filtering to work would be a priority.

Some OHM tiles are huge compared to the equivalent tiles from mainstream OSM providers. Part of it is that we’re cramming all of history into a given tile to facilitate client-side animations and time slider scrubbing without network overhead, but another part of it is that we’ve only begun to optimize the tiles for performance. Do you have an example of the region and zoom level that you’re looking at, so we can have the developers take a look?

Ah, it’s probably because the plugin assumes MapLibre instead of Mapbox:

As a temporary workaround, you can set maplibregl = mapbox; right before including the dates script. That will cause the script to attach the function to mapboxgl.Map instead. I’ve filed this issue to track compatibility with Mapbox GL JS:

1 Like
7

As a temporary workaround, you can set maplibregl = mapbox; right before including the dates script. That will cause the script to attach the function to mapboxgl.Map instead. I’ve filed this issue to track compatibility with Mapbox GL JS:

A lot easier than I thought thanks a lot! Worked like a charm. Can’t wait to get started on working on this in my free time!

It’s possible that the lack of date filtering is bogging down Mapbox GL JS, especially if your stylesheet is attempting to label the features. So getting the date filtering to work would be a priority.

Once again, correct. No issues in performance at all anymore. Thanks Minh, I can’t imagine I will need much assistance going forward but it’s nice to know you guys are so supportive. I will definitely reach out and share my project with this community once I’m done with it.

1 Like
8

This issue is now fixed, so the workaround for Mapbox GL JS is no longer necessary if you include the plugin as a standalone script.